Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 9 – Part 7 – Inserting Images into your Pages

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Placing an Image Where you Want it to Appear

Let’s go back to that West Seattle View Home page that we edited here earlier. If you want to add an image, what you do is place your cursor where you want to place the image. I’m going to place my image above the text here. So in fact, you can enter it, align there and then place your cursor where you want the image and hit the Add Media button.

Choosing Images from the Media Library or by Upload

Now when you’ve done that, you can either choose from your Media Library or you can upload a file. So here’s another way for you to get to those file uploads and I’m going to select that one there. So it’s uploading it and once it’s uploaded, this is the insert into page. But before we do that, we want to take a look at this attachment details and attachment display settings.

Image Attachment Details

In terms of attachment details, the title is the little thing that shows up when your mouse hovers over it. And so I’m going to give it a title. I’m going to say West Seattle View Home, designed by Rick Anderson. I don’t use captioned images. If you use captioned images, you could put a caption in here but I don’t use them so I’m not going to.

SEO Benefit of Title and Alt Text

But I’m also going to put some alt text in and I’ll say the front view of West Seattle View Home. The alt text is intended to be there to show up, if for some reason, the image doesn’t show up or if someone with visual impairments is viewing the site with a screen reader then this alt text is what the screen reader will read so that the person knows what’s there.

Google, as a practical matter, uses both title and alt text to reinforce the meaning of the page because it assumes that images on the page are meaningful and therefore, title and alt text that would be assigned to it would also be meaningful. So this is another part of that on page SEO.

The Description

A description is something that only you will see in the Media Library. This actually never shows up anywhere except the Media Library itself.

Image Attachment Display Settings

And then you come down to your attachment display settings. The first thing is alignment.

Alignment

You can choose to have it left aligned which means if there’s room, the text will jump up beside it on the right. Center aligned which means text will not jump but it will still be centered. Right aligned which is the reverse of left aligned and none which means it doesn’t matter how big the image is, nothing’s going to jump up beside it. I’m going to pick none in this case because it’s 640 pixels wide anyway.

Linking the Image

You have a choice to link it to something. Many beginners, without really thinking about this, leave this alone and it links to the media file. A link there is absolutely useless. A link like this is absolutely useless. But you could choose to use it to link to something and you can pick a custom URL.

You could pick an attachment page. In this case, I’m going to link it to none and here’s where you choose a size. Now because it is 640 by 427, the medium… I thought I said 320. Hmm. This is just wrong. I’m just going to clear this for a second, come back over and look at my media settings.

So I thought I set my media settings properly. I did not. I didn’t save them. 200 by 200, 320 by 1024 and 640. Save changes… sorry about that. And actually, I uploaded that image and it doesn’t have a 200 by 200 thumbnail now because that all happened when it was uploaded.

Demonstrate Regenerate Thumbnails Plugin

So now I’m going to demonstrate that Regenerate Thumbnails plugin. I know you guys don’t know about plugins yet. You’re going to learn about plugins next week but I’m still going to demonstrate it. Search plugins for regenerate thumbnails, install the Regenerate Thumbnails plugin and activate the plugin. Come down to settings, okay tools… and regenerate all thumbnails. And it tells you what it’s doing, right? There we go, that’s been done.

Let’s go back to our page now and do that again. Come down to West Seattle View Home, put our cursor in there, add media. This time we’re going to do it from the Media Library and there it is.

We’ve got this stuff in here but now we want no alignment, link to none. We don’t want the medium size though. We want the full size. We’re going to insert it into the page. We’re going to update this. View the page and now we’ve got a nice, big image sitting here on top of the page.

More Complex Image Placements – How to Align Images and Text

Well, this was the easy way to put the image in, right? Just take it at the top, have nothing moving around it. But what we really want to do is something like this where we’ve got the image sitting here beside the content and so that’s what we’re going to look at next, how to align images and text in this sort of context.

I have created such a page and added this text to it. Now what we’re going to do is add images to  it. So we edit the page and again, I want this image to be right beside this. So I’m going to put my cursor right beside the heading. And sometimes, in that kind of a context, it can be easier to switch over to the text view and place it right there beside the H2.

We’ll select Add Media and the first one is West Seattle. So we’ll insert this one here. The title is going to be… actually, what is the concept? Case study. So again, I’m going to say West Seattle View Home designed by Rick Anderson. Front view… actually yeah, that’s fine.

Image Details

And in this case, I’m going to take the alignment and make it left. I do actually want to attach this to something specific. I want this to be linked to the page that it’s going to be about. So I’m going to come over here, West Seattle View Home. I’m going to grab the URL of that. I’m going to put that URL here so now the image will link to it. I want it in its full size. Notice that that is its only option too because it’s smaller than the standard thumbnail and I’m going to insert it into the page.

What it Looks Like in Visual View of the Text Editor

Now if we switch over to visual, this is a little bit deceptive about what it’s going to look like if we hit update and view the page. Oh, isn’t that interesting? So we may be better off actually keeping it inside that H2 I’m just going to move that H2 to here and see what happens.

Troubleshoot Image Problems

It’s hard to see that here really but what we had was a space, a line break between the A and the H2. And WordPress interpreted that as essentially having a line and so it created a line.

So if we update this now… it is defying us. Why is that? There we go. You can also drag the image like that, right? Refresh this, now it’s going to look right, I think. What’s the difference? You see why I teach this, right? I teach this because it’s not exactly straightforward.

Here the image is getting stuck in this paragraph tag as if it were on its own line, right there. And we don’t want it on its own line, that made it worse. Which leads you to ask… well okay, why is it working here? Let’s just put a couple more in here. Actually, the first thing I’m going to do is just try that again. Add the media. I’m going to not link it to anything. That probably is my problem here, alignment left, insert it into the page, that’s it. The link gave it some fits there, I think.

Add Additional Images to the Page

Okay, that’s it. Forget the link. The link’s not that critical at this point but we got one image in here. And so let’s put some more images in. Here’s the headline for the second one, add the  media. I’m not going to put anything there just at the entrance of time. And then the third one is exactly the same thing and it’s this one here. Insert it into the page, update, refresh. Oh clearly, I didn’t say insert it into the page.

Adjust Text Drop with Margin

Now sometimes, what happens is text drops down here and you don’t really want it to. You can adjust that a bit with margin. So if you click on this and then click on the edit image and go to your Advanced Settings and go to vertical space and say 20 pixels, what it does now is it adds 20 pixel top and bottom margin here.

And if you hit update, that pushes that down. Hit update again and refresh it. And okay well maybe 20 was too much. Maybe what I really should have done was 10 pixels and 20 pixels on the bottom. So I’ll just come back over here, hit that edit again, go back to Advanced Settings.

Now you can see it’s got margin top 20, margin bottom 20. I’m just going to say 10 and leave that 20 and update. And I’m going to do the same thing with this one. Update our page, refresh our page and now our images are pushed down.

And if this was longer, you could have added more bottom margin to prevent the text from dropping down under so that it continued looking like it was in 2 columns like yours, if you wished. That would work just fine.

Recommended Videos for Further Education on Using Images

You’ve just seen me editing images in a couple of different ways. I would like to encourage you to watch a couple of sets of videos that I have added to the recommended watching because there’s quite a bit more to image editing in WordPress than I cover here in this session. The first is our Beginner’s Guide to Image Optimization and the next one is our Editing Images in the WordPress Image Editor. I encourage you to look at both of these video seminars.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment