The next thing we’re going to talk about is adding and inserting images into your pages. This isn’t the last time we’re going to talk about this. Last week we introduced a little bit about images and we’re going to talk about this more as we continue to develop our site.
What we’ll do is look at the actual completed Finished Projects page. I’m going to copy this and paste it, this way I lose all the images and all I’ve got is my text. Copy that, come back over here to Finished Projects page, hit “Edit” and go to HTML view and paste that text. This was the heading 2 tag and this is a heading 2 tag and this is a heading 2 tag.
WordPress Media Settings
What we’re going to do is add images in there but before we do that, let’s talk about the WordPress Media Settings. Under the Media Settings, you have this ability to set a thumbnail size, a medium size and a large size. The way this works is that WordPress has this built-in ability to create various sizes of the same image.
WordPress Creates Various Image Sizes
If you know what size you want your images to be so if you’ve got a standardized size say your thumbnail size is 100 pixels wide and 100 pixels tall, WordPress will automatically create a thumbnail of every image and it will crop that thumbnail down to this 150×100.
It doesn’t really matter what the image size itself is, it will reduce it in size and then crop it down. The medium size and the large size images will be reduced down in proportion. The thumbnail size will be reduced in proportion but then it will be cropped whereas medium sized and large size images won’t be cropped.
For example, our column size is 320 pixels, our medium size should be 320 pixels and it doesn’t need a maximum height so let’s just delete that. No maximum height but maximum width should be 320 pixels. For the large size, the maximum width should be 640 pixels and 1024 is a maximum height. The maximum height doesn’t really matter but we know what our widths are.
If we save these changes and go to “Insert an Image”, that max height may not be a good choice here. Let’s just use 1024 for the medium size as well, that’s its maximum height. When we go to “Insert an Image” it’ll give us a chance either to put it in at its full size or or one of these predetermined sizes. If we choose one of the predetermined sizes, WordPress will adjust the image size to fit this predetermined size. That’s the Media Settings.
How to Insert an Image in a Page or Post
Let’s go back to “All Pages” and to Finished Projects and say, “Edit”. If we want to insert an image, you place the cursor where you want the image to begin. I’ve got an image that sits to one side of all this stuff and allows the text to flow beside it.
I’m going to place the cursor beside the heading and say, “Upload/Insert Image” and what I have here is a choice either “From URL” and I can pick a URL from somebody else’s site, I can pick that URL from the “Media Library” because I’ve already uploaded it or “From Computer”.
In this case, let’s say “From Computer”, I’m going to “Select Files” and go to “east-side-services.jpg”, that’s the first one. Once I’ve done that, what happens is it gives me is the thumbnail preview. Notice that it’s rectangular in shape. The dimension is 100×250 pixels but it’s showing me this as if it’s a 150×100 pixels because that’s the size I set in the Media Settings a moment ago for the thumbnail.
Adding Alternate Text or a Tool Tip
Then it gives me the name of the file, the type of file it is, the date and the dimensions of the actual file. Now, I have a chance to give the image a title and that title is going to show up as the tool tip. This was “Builder Spec Home Design” right? Now, I could give it some “Alternate Text” which is the text that will show up if the image doesn’t show up and will also be read by a screen reader if somebody with visual impairment is viewing this page. I’m going to give it “East Side Luxury Spec Home”, this is “Alternate Text”.
Linking an Image to a Page
Next, we come down to this “Link URL”. By default what WordPress does is it links to the place where the image is. I must have already used this image once and then deleted it because it is actually linking to the page that I want it to link to; it’s linking to this “Finished Projects East Side Services”. Ordinarily what it will do is it will link itself to a page that would show the image itself. This can also just be a link to the image or you can have none or you can put your own link in for the image. I’m going to put “No Link” in there at the moment.
Alignment Options for the Image
Then you have a choice of “Alignment” for images. I want it to be “Left Align” so I’m going to leave that “Alignment” but notice here I have my choices, I could use a thumbnail image, I can’t use a medium or large because it’s actually smaller than either the medium or large but I can use a “Full Size” image here and that’s what I’m going to do. I’m going to use the “Full Size” image and say “Insert into Post”.
If we hit “Update”, this is where, What you see is not actually what you get because it’s not going to look like this once it’s inserted. If we go to “Finished Projects”, this is actually what it looks like. It has taken the image and it has put it beside the headline and allowed the text to drop down here. The image itself isn’t clickable although if you hover it, it does in fact, give you this little tool tip “Builder Spec Home Design”.
Inserting an Image from the Media Library and Your Computer
We’re going to do that again for the next image and place the cursor directly before the heading and go to “Insert an Image”. This time I’m going to “Insert an Image” from the “Media Library”, it’s not actually the image that matters here in that regard but nevertheless, it is an image that’s of the same size. We’re going to put it “Left”, “Full Size” and I’m going to skip this stuff for the moment just for expediency sake and hit “Update.
Now we’ve got our second image sitting in here beside the text. If we go to this one more time, put the cursor where I want it and “Upload/Insert Image”, from “My Computer” and “edmonds-front-services.jpg” and see the “Link URL”. I just don’t happen to remember what that “Link URL” is and what I could do is go to “Edmonds View Remodel”, grab the “Link URL” this way and then place that “Link URL” there.
Make it “Left”, ” Full Size”, “Insert into Post”, “Update”, “Finished Projects” and now if I click on this one, it links off to over here, right? In fact, I could come over here and “Edit Image” and then change the title to “View our Remodel Design Services”, hit “Update” and refresh.
Adding a Title and Link to an Image
If you hover over this, it gives the tool tip, “View our Remodel Design Services”. This is one of those places where a link is in order. If we come back and say, “Learn More About this Project”, I can hit that link button, paste that URL, give it a title, “Learn More About Our Services” and “Add Link”. We’re going to do that here too and I’m going to use this as a means of getting a link for the image here. Let’s see, “Custom Home Design Services”, I’ve got the URL so I can just copy that one.
Add the link to that, come back over to edit this image and add the “Link URL” there as well. Hit “Update” and refresh. I must have not done that properly because it’s not saving that. Let’s just try it again from the Advance Settings. I think this is a problem with my browser, sometimes things just doesn’t work the way you expect them to. I guess what we have to do here with this browser is to delete that and then insert image again.
This time you could pick it from the “Media Library”. Grab the image, place the “Link URL” in there, “Insert into Post”, hit “Update” and refresh. Sometimes you have to pick a different way to “skin the cat” but anyway, we’ve added these images, we’ve linked the images and we’ve added them in such a way that they are before the text.
We could just easily take this image and instead of being “Left Align”, we could make it “Right Align” and “Update” this and you would see that the image moves off to the side. If you needed to break this thing up, that might be a way to do it as well. In any case, that’s how you add images to a page and we’re going to add more images as we work our way through here but this is one way to add images to a page.
Insert an Image Using Thesis Post Image
Another way to add images to a page is by using the Thesis Post Image. If we edit this page and we scroll down here, you’ll see this “Post Image and Thumbnail”. We can put a link to an image in here and put it above our headline. Any image in the Text Editor is going to go below the headline, inside of the text. Let’s go to the “Media Library” and “Add New”. I will “Select File” and we’ll take “east-side-front.jpg” for the time being. Let’s just grab its URL, copy and save it.
Come back over to this page and paste that under “Post Image and Thumbnail” and we can choose “Vertical”, “Above Headline”, “Below Headline” and “Before Post/Page Content”. It can be “Flush Left with with No Text Wrap”, “Left with Text Wrap”, “Right with Text Wrap” or it can be “Centered (no wrap)”.
Let’s go ahead and “Center” this, make it “Above”, “Add some Alt text” and hit “Update”. Now you can see that image sits up here above the heading which is essentially how we created this, right? In order to get the image above the heading, we use the Thesis Post Image.
In this case, you don’t have a lot of options set. The only thing you can do is insert the image into the “Media Library”, tell it what position you want to use and put the address in here, that’s all there is to it.
Optimizing Images for the Web Video Series
Later on we’re going to talk about Optimizing Images for the Web. I have a good series here on the site about optimizing images for the web so I encourage you to take a look at that. Let’s search BYOB website for “Optimizing Images for the Web”. This is a 5-Part Series on how to do it, what to do and what optimization really means. I strongly encourage you to search the site for “Optimizing Images for the Web” and watch these videos.
If you don’t know what I’m talking about when I say “Optimizing Images” then I encourage you to take a look at these because what I’ve shown you about adding images to a page presupposes that the images are already the right size and that they’ve been optimized. It makes sense for you to learn how to optimize them.