3heads-gear3headschatchecklistglobehead-lockhead-plusimaclife-ringlogo-cornelllogo-melbournelogo-northhamptonlogo-portsmouthlogo-small logo-vancouverlogo-yokohamamail-line mail-wings pdf pie-chartplayplugprinter skype website

The aim of this fourth activity is to:

  1. Learn how to add images to your posts and pages.
  2. 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

Add new post

2. Place your cursor where you want the image to appear and then click on the Add Media icon.

Add Media

3.  In the Add Media window click on the Upload files and then Select Files.

Select File

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.

Open file

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:

Attachment details

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.

Add Image details

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.

Adjust alignment

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.

Select media file

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.

Select image size

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.

Kangaroos
Check out my photo of wild kangaroos!

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.

Image toolbar

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.

Drag drop image

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).

Edit image icon

3.  Select Custom Size from drop-down menu next to size.

Select custom size

4.  Type in your new width.  The height will adjust automatically.

  • In the example below I’ve changed the width to 300 pixels.

Add image dimemsions

5.  Click Update.  

6. This closes the Image details window and your image should be smaller.

Image Alignment

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:

Photofunia
Created using art on a brick wall from PhotoFunia

 

 

Created using Framer tool from Big Huge Labs
Comic created using Make Belief Comix

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.

YOUR TASK

Complete one or more of the following tasks:

  1. 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.
  2. 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.
  3. 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.

21 Comments

Your email address will not be published.


  1. I copied profile image, then control-Vd it

  2. To add an image I downland one that I sent to my email from my phone and upload the image to my blog.

  3. It was a very detailed tutorial and I think the pictures came in great use.

  4. To add this image, I simply downloaded an image of Serj and Daron standing next to each other in a picture and then uploaded it. Then, using the add media button, I added the picture to the post, gave it a caption, and resized it so that the caption would be all on one single line.

    The link to my post:
    http://hughesnc14.edublogs.org/2019/04/30/the-first-image/

  5. I created two separate posts for this. For the simple photo post, I used a photo of a charcoal piece I created and wrote a poem based off of it. For the photo creation post, I used a photo I had edited on a website called freeonlinephotoeditor.com and used it in a post of image prompts for the Write Club members. This particular image was a watercolor galaxy I had made a year or two ago, but the editor had enough features that I was able to make it into something completely different. I was actually going to use one of the photo services recommended in this post, but most of them were blocked on my school Chromebook and the others just didn’t work well for me. I thought that Big Huge Labs had potential, but it wouldn’t accept any of the photos I tried to upload, even though they were all photo types the site accepted.

    First post: http://rhswriteclub.edublogs.org/2019/02/28/suffocation/
    Second post: http://rhswriteclub.edublogs.org/2019/02/28/image-prompts/

    (My image on the second post is the first one in the post and is credited with my name. All of the other images on the second post are from Pixabay, as specified in their captions.)

  6. I had know idea how you upload a photo. thanks \(^3^)/

  7. I love how this site is helping me get a great start to my blog

  8. It was easy and i followed all of the directions.

    • quanesharoberts16
  9. I found it easy & fun knowing how to upload picture & being able to have other write on them.

  10. it was a little confusing at the start

  11. it was a little confusing at first