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 4 – Inserting Images Into Your Pages

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to - ,

I want to do the basic formatting on this Agency Child theme page where we’re going to insert images. We have the text here, here’s a headline for the first case study that’s going to be a heading too, here’s a headline for the 2nd case study that’s going to be a heading too. There are too many spaces there, I want to get rid of that and here’s Heading 2.

Image Sizes in WordPress Media Settings

We have an introductory paragraph and we have 3 headings and 3 blocks of text. We’ll update that and take a look at it in its native form. Let’s talk about the WordPress media settings.

Over here under settings and media, WordPress shows you 3 image sizes, it shows you the thumbnail size, the medium size and the large size. What WordPress does is it creates up to 3 images based on these image sizes for every image that you upload. If you upload an image, it gives you a chance to set that here.

Let’s just say that we set image sizes at a max width of 590 and max height of 1024. Our medium size is 300 and our max height is 300 and our thumbnail is 150×150. When we upload an image that is say, 620 pixels by 400 pixels. It’s going to keep the full size image at 620 pixels, it’ll create a large image where it reduces it down to 590, it’ll create a medium one where it reduces it down to 300 and it will create a thumbnail image where it reduces and crops it down to this thumbnail size.

It will create all 4 of those image sizes for every image that you add to the media library and this gives you the opportunity to use essentially oversized images and be able to control how the images are displayed based on these settings.

If the image is smaller than 590, for example let’s say the image is only 500 pixels wide, it won’t produce a large size, it’ll just have a full size, a medium size and a thumbnail size. It reduces images down to these sizes but it doesn’t expand images up to those sizes.

If you know that your content column has a maximum width of 590 pixels, it can be useful for you to simply create that size this way and when you upload an image, it doesn’t really have to be 590 pixels wide because it’ll go in that way. You can choose the large size and it’ll go in that way because the Agency child theme is responsive.

How the Agency Child Theme Adjusts the CSS for Images

The way the Agency theme adjusts the CSS for images is that it will actually reduce the image down to the 590 pixel width as well. These are the WordPress default image sizes but in the Agency theme, there’s also a featured image size and a slider image size, those are image sizes that are created by WordPress because of the Genesis and Agency settings.

Insert an Image at the Top of the Page

We’ll talk about that more as we work our way through here but the first thing we’re going to do is insert a standard image into our page. If we come over here and take a look at the West Seattle View Home and use this is an example. Here’s our text, we’re going to put that into that, come over to over pages, let’s open up our West Seattle View Home, and paste our text in there.

Notice that this West Seattle View Home has an image right up here at the top so you’ve got the title and we have an image here. This is an image that’s inserted directly into the post. The way you insert an image directly into the post is to place your cursor at the beginning of the post and select Add Media.

You have the opportunity of selecting a file so we’ll select that, come over to documents, my business website and images, that is the West Seattle View Home which is this one here so we’re going to open that up. Notice its size, it’s 640 pixels wide by 427 pixels tall, that means there’s a full size view of it, there is the large size view, there is the medium view and the thumbnail view.

There’s also a featured image view which you don’t see at the moment and when we install our slider plugin, it’ll be the slider size as well. You can see I inserted a 640×427 and because this is Agency, we could insert in full size and it would  still only show up as 590 pixels wide. Before we do that, we’ve got a couple of other things here to deal with.

Image Title

First we have our title and this is the tooltip that shows up when somebody hovers over the image. By default, WordPress puts in the name of the file but I would give it a more descriptive name. It could be, “Front View of a Custom View Home Designed in West Seattle designed by Rick Anderson”.

Alternate Text for Images

Actually, you could do the same thing for alternate text. Alt text is the text that displays for screen readers when people who are visually impaired are viewing the site and it also shows if for some reason or another the image doesn’t show up.

Adding a Caption

You could include a caption. If you include a caption, it’s going to wrap the image and put the caption inside that wrap below the image in the page so we’re not going to include a caption. This description never shows up anywhere except inside the Media Library and it’s really only for your own use.

Image Description

If you feel like you won’t remember what this image was about in the Media Library, you could add one. I’ll put a sample, “Here’s a sample description” and I’ll show you what that looks like. Actually, we’ll go ahead and add a caption, “The Neely Residence”, so you can see what that looks like too. Next you have your link URL.

Link URL

Your link URL is the URL that the image will link to. In this kind of a situation, you don’t want the image to link to anything so we will select “None” but you could choose that the image opens up in the separate page which I think is kind of silly so I’m not going to do that but you could also have it open up to some place else.  If you want it to be an image linked to something else, you could do that here too but we’re just going to say, “None”. In terms of our alignment, we’re going to and say “None”.

Review the Image on the Page

Let’s start off by saying “Full Size” and “Insert into Post”, you can see the image is wrapped if we hit update and view the page. The Agency theme is really not designed to have this caption around it. It’s especially not designed to have a caption and have the image be too large.

You can see what happens once the sidebar goes away, it starts working again but with the sidebar in place, it crops both the image and the thing around it. In fact, that really prevents it from being responsive, isn’t that interesting? We’re going to come back over here and edit this image, we’re going to delete the caption, update, come back over and refresh this.

Now, what it’s done is it’s taken the image and reduced it in size to fit inside the space and I believe now, the image also resizes. That’s interesting, I didn’t realize this but putting a caption around an image prevents it from being responsive, that’s another good reason for not using a caption.

Insert an Image from the Media Library

The other thing you could do is choose a different image size and the best way to do that is to just start all over again. This time we’re going to insert the image from the Media Library rather than from our computer.

We’ll get rid of the caption and give it the large size instead, insert it into the post, update it and refresh the page. Now it’s the right size again and it also scales properly. That’s inserting the image at the top and that’s actually the easiest use case which is to put an image in here and have all the text land below.

Inserting Images Beside the Text

What we’re going to do here now is not the easiest use case and that is to put the image beside the text like it is here. This is right beside the heading and it’s a smaller image, that’s what we’re going to do next.

The way you do that is first to come over here beside the heading and select Add Media. We’ll select our files and we may as well just pick up all 3 of these files because we’re going to do this 3 times anyway.

The first one we’re going to do is this one, the title will be “Front View of the Neely Residence” and we’ll do the same thing for alt text. We are going to use a link URL but the link that we’re going to place is not to the image but to the page we want it to link to. The page we want is this one, the West Seattle View Home, so copy that URL and place that as the link URL. When we click on this image, it’ll take us to that page.

Image Alignment on the Page

Now, we’re going to do something different with the alignment. First, as we can see the image is 150×200 so it only creates a full size, it did not make a large or medium, it has the full and it has a thumbnail. We’re going to use the full size but now you have a choice of alignment.

What happens with “None” is it simply interrupts the text and the text doesn’t flow around it. Alignment allows text to flow around, you can see that in this image here where if you align left, the text jumps to the left, if you align center text, it wraps around it and if you align to the right, it goes to the right.

We’re going to select align left and “Insert into Post”. If we hit update and look at our page, there it is, we have our image here and it aligns up pretty nicely with this. The only unfortunate part is that the text has dropped down below this. What we want to do here is to adjust the location of this image, essentially giving it top and bottom margins so it forces the text to come on over to the side.

Inline Editor for Images

We’re going to use what’s called the inline editor for this image. You get to the inline editor by selecting Edit Image. This is the inline editor and this doesn’t physically edit an image, what it does is it edits the code around the image.

That may be an odd distinction but I have a really good series on editing images in WordPress that discusses and details the difference between the WordPress image editor and the inline image editor. I’m not going to repeat that here but if you’re interested in knowing the ins and outs of that, go look at those seminars.

Set Vertical Space (Margins)

In this case we’re going to go to the Advanced Settings and one of the things we can do here is set vertical space. Let’s say that we’re going to add 20 pixels of vertical space to this. Notice what it did as soon as I put that in there, it gave us a margin top of 20 pixels and a margin bottom of 20 pixels.

If we hit update now, you’ll see how this changes. This is going to move down and there may not be enough room for that text to show up below it anymore. It still wants to move down and it has moved up too much here. What we’ll do is come back over to this and we’re going to edit the image again using the inline editor.

We’ll go to image settings and take the margin top to 10 pixels but let’s just make the margin bottom 50 pixels and update. There’s a bit of trial and error obviously with this. Refresh it, what that’s done is this is margin and it is pushed down here and has kept the text from dropping down under it.

If you’ve got an image that’s wrapped with a bunch of different paragraph formatting around it, you may want the paragraph to break without dropping under so you can add some bottom margin. It’s just a way of adjusting the location of this image in that place. We’re just going to walk through that one more time here to see what happens as we do this.

We’re going to upload this image, go to our gallery and this one will be the “edmonds-front-services”, insert into Post, give it left alignment and in our Advanced Settings, let’s make the same adjustment here then we’re going to do this one more time.

Notice how these images stacked funny like this? That’s because the visual editor doesn’t know how wide your column is. If the visual editor was the exact width of your column, it would show this properly but since it isn’t and since it doesn’t know all the CSS associated with this images, it doesn’t know that there’s a padding and that kind of stuff in here. This is just one of the vagaries of doing this.

Let’s insert one last image a from the gallery. It’s the East Side Home, make it left, we’re going to insert it into the post and we’ll edit it inline, come over to Advanced Settings, give it 10 pixels and 50 pixels, hit update and hit refresh, it looks pretty good.

Add Links to Text

The final thing we’ll do is add links to this. The way we add links inside the text editor is to first grab the text then insert the link. You can actually select link to existing content and you can either search your site or you can just scroll through here.

Looking at your site, this is the West Seattle View Home, that’s the one we’re going to pick. Open it in a new tab or window and hit Add Link. The same thing is true with this one, “Edmonds Remodel” and add a link. Finally, we have this “East Side Craftsman Home”, you can select stuff to link to from there and we’ll just hit update here.

Let’s look at an example from a more complex site like mine and we’ll go to one of the course pages. You can also look for keywords, you don’t have to look for the name of something. This can be useful for you to find places to do internal linking from.

For example, if we just come over and edit How to Create a Membership Website course and let’s link there, we can search for something like Thesis Design Options. It’s actually going to show me examples of posts, pages, courses, everything that has that phrase, Thesis Design Options in it. Now, the bad news is it does this return search results by date and it’s going to return the very first example that it finds.

This is an easy way for you to find content on your site to link to and that’s really what you’re looking for in that situation. You want to create an internal link to another page to help establish what that page is about. Anyway you can do that in a more complex site. We don’t really have very much real content on this site so that’s not very useful to demonstrate here. We’ve updated it, come over and we refresh it, now we’ve got our links that link us off to the page.

Setting a Featured Image

There’s one other thing I want to talk about and that is the featured image. If you are on your page, there’s this opportunity for you to set a featured image. Let’s do it on this one here, West Seattle View Home and set a featured image. You can take this image from the gallery and use it as your featured image. Here it is, you can click this button here, “Use as Featured Image” and a featured image size will be created.

The Genesis theme and Agency Child Theme create the featured image as 280×100 pixels, that’s the size of the featured image. We’re going to see that next week when we use widgets to put a featured page in but this is how you set that, by simply using this dialog over here and the featured image is created from the larger image.

You didn’t really need to add a featured image that is the size of the featured image, you can let WordPress create the size from the regular size. When we do this, you’ll see that there’s a potential problem with that so you may be better off just creating your featured image the exact correct size but it’s not absolutely necessary.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment