Adding an Image

Adding an Image to posts in WordPress

In this video, we are going to learn how to add the following image to a WordPress post.  It is the second part of two videos and in the first one, we looked at getting images from Photopin.com.

Have fun!

Two happy children
Happiness in Two Children
photo credit: Pensiero

Video Transcript.

  • In this video I am going to show you how to add an image in a WordPress page or blog post
  • So after logging in you will come to your dashboard
  • And we will use a post so, go to posts, add new
  • Add your title to the post , then Add a Header and make it an h2
  • And now we are ready to insert an image and first of all we go to Add Media
  • We are going to upload a file then select files
  • You remember I put this image in my own folder called Blogging
  • There’s the image and I called it happiness in two children, and open.
  • Here we see that WordPress uploaded the image
  • And on the right hand side here, it has used the image name as the title but we don’t need the dashes.
  • So I change that and start to add a caption.
  • We are using the Keyword again in the caption, “happiness,” remember in the previous video we talked about using the keywords.
  • Well, here the word happiness is in the file name and the caption.
  • Next we look at “Alt Text.” It’s alternative text.
  • It’s what would be read out to someone who is using a screen reader or displayed if images are turned off in the browser
  • The easiest way to think about alternative text for an image Is to try to describe the image as if you were telling a friend what it was on the telephone.
  • So this is two happy children. That just says what the image is and nothing more is needed.
  • Down here we have Alignment so that’s whether the image sits to the left of the page, in centre, to the right or none.
  • I am going for centre.
  • In this drop-down we have Link To
  • WordPress wants to know if that image should link to something.
  • It could be the image itself, another page or a custom link, which is a link that you decide upon
  • I usually select None as I don’t want images to go anywhere and I like them to sit in the post or the page as an addition to the content there.
  • Next we are given a choice of sizes and I am going to stick with the full size image.
  • Now that’s it; we have uploaded the file and set some of our other information in it.
  • Now we just click, insert into post and there it is, exactly as we hoped.
  • So I save this again as a draft, Right click on Preview to view in a new tab
  • There we have it, this is our post with our lovely image Sitting in the centre of the page. If you want to edit the image
  • Just go back to the visual editor and click in it, and then click on the image and click the icon that looks like a picture.
  • So we get the edit screen and lets change the alignment.
  • One option is to select Align Left.
  • Now one thing that Align Left does is to allow text to float or wrap to the right.
  • That’s the same with Align Right but the other way around.
  • As there’s no text in the post, let’s select None and see what happens.
  • And there it is. We’ll just save draft to keep our changes
  • Nip back to the post and refresh the page
  • And now you can see the images sits to the left.
  • The difference between None and Align Left Is that this would not permit text to wrap around the image.
  • This is a pretty big image in the post and we probably wouldn’t want to do that anyway.
  • Now we will go back to the image again and think about our caption text.
  • Because that’s where we want to add the attribution that we thought about when getting the image from Photopin.
  • So we go back to the image editor and I still have the Photopin site open in my browser. That is the text that I need to copy
  • So I’ll copy it now and go back to the image editor in the other tab. and I will paste it into the caption but before I do
  • I am going to add a tiny bit of code which is called a break tag.
  • You’ll see why we add it but it has to be added exactly as it is there.
  • A left pointing arrow or less-than symbol, b r and a space
  • a forward slash and a right pointing arrow.
  • Its a tiny piece of HTML code and it sets what we paste next on its own line
  • After pasing in that text, I’m going to update and then go back to my post and save my draft
  • Go back to the post and refresh the page
  • And there you have it. Happiness in Two Children is the image caption
  • Caption and we have a new line And the photo credit for our Creative Commons attribution.
  • That link takes us to the photographers image on Flickr
  • So that’s it. The photographer gets a link back and we get a nice image for our web site.
  • That’s our video complete and you can now easily add an image to your WordPress web site.

Leave a Comment