This series is designed to guide students step by step through the process of learning to blog. The activities can be completed at your own pace and in any order.
The aim of this fourth activity is to:
- Learn how to add images to your posts and pages.
- Add an image(s) to a post.
Using Images in Posts
Images grab your readers attention and encourage them to read your posts.
But you can’t just use any image you like in a blog post.
Laws that apply to use of copyright material in schools don’t apply to using the material on the Internet. We will discuss copyright and finding images online that you can use in blog posts in the next step in this series.
For this activity we will focus on learning how to upload photos you’ve taken or created using app, or online photo editor tool.
Remember to be Internet savvy. Don’t share personal photos online. Be kind and compassionate. Don’t upload photos that could hurt someone else.
Upload your own photos
You insert a photo from your computer into a post as follows:
1. Go to Posts > Add New
2. Place your cursor where you want the image to appear and then click on the Add Media icon.
3. In the Add Media window click on the Upload files and then Select Files.
4. Select the photo on your computer that you want to upload and then click Open to start uploading the image.
- Remember in this activity you must only upload photos you’ve taken yourself or photos you’ve created using an app or online tool.
- Don’t use a photo you’ve found online! We will teach you how to find online images you are allowed to use in the next step in this series.
5. While your photo is uploading you will see a progress bar.
6. Once the photo has uploaded you will see its attachment details.
Below is a summary of the main attachment details you might change:
7. Change your title and add a caption.
- These are both optional and aren’t something you might necessarily do for every photo however it is handy to see how captions work.
8. Select None from the drop down menu next to Alignment.
- Alignment controls the position of the image in your post. None means the image is on its own line without text wrapping.
9. Select Media File from the drop down menu next to Link to.
- This means when someone clicks on your photo they will be taken to the photo where they will see the largest version of the image.
10. Select Medium from the drop down menu next to size.
- Medium size will depend on the original size of your image.
- I want my image to be about 600 pixels wide since the image is being inserted with None alignment.
- If your original image is smaller than my image you may need to select Large.
11. Click Insert into Post.
The Insert Media window will close and you should see your photo in your post editor.
Here is what my image looks like with a caption! If you clicked on the image you will be taken to a larger version of the image.
Below is a quick video tutorial on uploading images:
Change Image Size
You normally use larger images, around 600 pixels wide, when you use None or Center aligned images.
For wrapping text around your image you need to use a smaller image less than 300 pixels wide. After inserting your image you can resize it by clicking on the image once. The Image Toolbar should load.
Now right mouse click on the bottom right corner of the image and drag the image smaller. Release the mouse when you are happy with the new size.
You should only resize to make an image smaller. Resizing an image that is too small decreases the image quality and can make it look blurry. If the image you inserted is too small you should insert a larger size image.
The alternative method to resize an image is to:
1. Click on the Image once to load the Image Toolbar.
2. Click on the Edit icon (Pencil Icon).
3. Select Custom Size from drop down menu next to size.
4. Type in your new width. The height will adjust automatically.
- In the example below I’ve changed the width to 300 pixels.
5. Click Update.
6. This closes the Image details window and your image should be smaller.
Images can be aligned after they have been inserted into your post editor. Click on the image once and then click on an alignment button to change the alignment of your image.
To align an image right you click on the Align Right icon. Remember it is best to resize your image to 150-300 pixels wide if you want to left or right align the image.
If you want several images to appear side by side it is easier to insert them as an image gallery.
Use online tools or apps to create images
There is a range of online tools and apps that can be used to improve images you create or create new an interesting images.
Here’s a list of a few online tools for creating and modifying images:
Here are some examples:
Once you’ve created your new image using one of these online tools you click on the Download button to download it onto your computer and then upload it to a post using the Add Media button.
Complete one or more of the following tasks:
- Add a photo you’ve taken to a post and then share a link to your post by leaving a comment so we can see how you went. Ideas for your post could be to write a poem or story about the image.
- Create your own images using an app or an online tool and then include your image in your post. You could create a series of images like I’ve done in this post and then tell your readers which tool you liked the best and why.
- Leave a comment on this post and tell us how you went adding images to your post. Remember to leave a link to your post in your comment so we can have a look at your new post.