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.

Inserting Images into your Pages

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects - , ,

Applies to -

Now that you know how to optimize images for a professional services website, it’s time to show you how to insert images into your pages.

Let’s go to Settings and Media. We have not set these media settings to match our website yet but it doesn’t matter at the moment. We just need to upload an image that’s big enough. One that is as large as we could potentially use on the site.

Add a Featured Image

Let’s come over to one of our pages on our sample professional services website. This Finished Projects has an image there and this is a feature image. Let’s edit that page. Seattle area finished projects and click edit.

Upload an Image to the Media Library

The way you set your featured image is by clicking on that button. There are no images in our media library now. To add an image here click upload and select files. And then you will go to the folder where you’ve got your images.

In my case I’ve have got those images in this folder, finished projects. Let’s choose that image. It’s uploaded and set as my featured image. With this set as my featured image I have a choice of title and alt text. You always want to fill these out.

Set Title and Alt Text for SEO

This is an important SEO element. I would say Rick Anderson, Architects, Finished projects for alt text. And then I would take that alt text and I would also make it the title. Alt text is text that that screen readers use so that people with vision disabilities can still traverse or manage going through a web page. Since Google knows that’s what it’s intended for Google pays attention to this image and will count what is said here as if it were relevant to the page.

We still need to click this to set that featured image. Now we can update the page and we’ve got our featured image for this page. Featured images show up in this skin on the front page in this section. And by default they show up at the top of a of a page in Agility. They also show up as thumbnails in different archive pages which we haven’t talked about but we will.

Featured images show up in a lot of different ways. In this case the only place we can see it right now is here with our Seattle area finished projects.

Cropping An Image

Actually, this is too big an image. What I really want to do is edit this image down. Because I don’t really want to show that much of it. You can click on the image and then see where it says edit image. I can crop this image.

And for the purposes of this placement I don’t need to see all the sky in this picture and I don’t need to see all the grass. But I do want to see all of everything else. So I can crop it like that. All you do to crop it is just drag your mouse and then stretch it. You can move it around like this.

If you want to set a height, you can do that here. It says 273 over here, we can type in 300. And if we want it to be 300 and then we can adjust its position until we’re happy with the selection. Once you have what you want, click the cropped image.

You have choices as to which sizes the crop applies to. There is a choice of “all sizes except a thumbnail”, “thumbnail only” or to “all image sizes”. We are going to choose all image sizes here. Now we can save it. Close this. Reload this. Let’s go back and view it on our page and our featured image looks like that. That’s the featured image.

Add an Inline Image

Now we are going to look at adding an inline image. I’ll go to a new page and add some text without images in it. This is a Seattle area finished project page. In terms of inserting images into this text, I want to put those small images in. Come back over to finish projects and you can see I have these little images sitting here. I want to put some small images in like this.

Create a Unique Image Size

This is a different shape than the shape of the many of the other’s I’ve got. What I’m going to do is just upload images exactly in the size I want. When I want to do something that’s not part of the automatic WordPress image size, I just bring in my own image size.

To put an image in there I’m going to put my mouse where I want the image, click “add media”. I’m going to upload a file, select the files. Let’s pick up that one and open it. Now add the title. It is going to be East Side Craftsman Home designed By Rick Anderson. We’ll put that down there for the alt text also.

Attachment Settings

Since we’re inserting images into the page we have a different set of choices from the featured image ones you just saw. That’s these attachment settings.

Alignment

The first thing we’re going to do is look at alignment. In terms of alignment you’ve got choices of left, center and right. And we are going to align it to the left. You’ll see what that means in a minute.

Links

In terms of links, we could say none or we could link it to the actual media file or we link it to an attachment page. We could even pretend it’s a button and link it to some other URL. But this is just an image sitting on the page so we’re going to link it to none.

Size

And then size. Note that we have this choice. You have a thumbnail size which is going to be cropped down 150 by 150 or the full size which is 150 by 200. Also note that none of those larger sizes are a choice here.

If we came over to here you’d see that we have a choice of a full size which is 580 by 300 or a medium sized 300 by 155 or thumbnail size. But we’re not using this image for that, we’re using this image. We’ll choose the full size 150 by 200. I’ll insert that into the post. Notice how the text moves across here to the right of the image. We want that below the headline and we got it in the right spot.

Review the Positioning

Let’s update this and view the page. There it is sitting off to the left and flows to the right of it. That’s what this alignment thing is about. Aligning to the left allows the image to go to the left hand side of the text and the text to float up beside it.

Let’s take a look at what this would look like if it were right aligned. Edit the page. Aligned it to the right and updated it. It essentially does the same thing except the image goes all the way over the right and then the text floats up beside it on the left.

Let’s take a look at center alignment. Choose center. Now no text would float up beside it and the image would be in the middle.

And if we had align none or no alignment, it would be off to the left. But it is inline with the first bit of text because we put the paragraph in the same line as the text. No text will float up beside it. And that’s align none.

Well, in this case we want align left. And we can do that to each one of these images.

Backup Our Work

Before we complete the work today we are going to continue with our ritual. That ritual is coming over to BackupBuddy and backing up the work we’ve done today. We will make a complete backup.

You can see it’s a bit bigger back up now because we’ve got more content on the site. It’ll also be a bigger zip file because we’ve added some images to it. So it will take a tiny bit longer to update. It’s completed now and if we needed to we could download the backup file to our computer. It has everything we would need to restore the website back to this point.

Are there any questions? Richard, you’re say you see backupbuddy back up versions, yes. I don’t know what that means. But this backed up all the work we did since the last time we backed it up. It backs up the site in its current state so everything we’ve already done plus what we’ve done here got backed up.

Anybody else? “Does it back up in versions?”. Well, no. If we go back and look at our backups. This is not a backup that is that is partial so it’s not a backup that only includes the stuff since the last backup. This is a full backup so it backs up the entire site exactly the way it is at the point at which you push the button.

There isn’t any versioning. We now have two backups. If we felt like we wasted our time on this and only want to go back to here we could start here. But we probably don’t.

The main purpose for this is to take a snapshot at each step. So that we can always come back to where we were before if something bad happens.

Dave asks, I alluded to changing the image size in setting so do I suggest we change the three default sizes? Yes, you’re going to do that but you don’t know enough information right now to do it.

We are going to change the image sizes in a later lesson, after we install the Agility Skin. We’re going to discuss how to know what sizes they ought to be and then if you don’t like the way they turned out how to fix it.

Right now we’re just talking about the mechanics of both understanding what WordPress does with an image and then the mechanics of creating a featured image and putting an inline image or a post image in. And doing some basic editing of the image size inside the image editor.

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