Next in this WordPress 3.9 Crash Course, we’re going to talk about inserting images into your pages.
WordPress 3.9 Media Library
WordPress has a very powerful media library that you should use for inserting all different types of media whether it’s images or audio or PDF files. I should point out that it only works for very short video or very small video files, so video is the one exception but it’s very useful for other media.
Set Image Sizes in Media Settings
Use of the media library actually starts off in your Media Settings. Something that people generally don’t know is that every time you upload an image to the media library, WordPress attempts to create several different sizes of that image.
Image Sizes WordPress Automatically Creates
WordPress uses those different sizes in different ways and in different places. And it gives you the choice of using those different sizes in different ways and different places. This allows you to standardize how images look on your site.
Decide on Image Sizes When Setting Up Your Site
This means it’s important for you really to make up your mind fairly early. So when you get started you ought to seriously consider what the images sizes out to be. These image sizes can be very closely linked to themes.
Theme Choice Affects Image Sizes
While one theme might have a full size image at 650 pixels wide, another theme’s full size image might only be 550 pixels wide. One theme may be using thumbnails at 200×200 and another may use 100×100 size.
The good news is you don’t have to make this decision once and for all but it’s something that you want to consider fairly early on. You’ll want to look at your themes documentation to determine the right size, that is the size it wants to use for optimum use of your images.
How to Change Image Size Settings
You’ll see examples of this here in a minute but this is a place where you can set those image sizes. The thumbnail default setting is 150×150. I’m going to change this to make it 200×200 and as long as the image is at least 200×200 WordPress will automatically create a thumbnail image of that.
When Images are Cropped vs Scaled
When you crop this regardless of the actual aspect ratio of the image, it will crop it to be square or crop it to whatever aspect ratio you tell it here. That’s what this means when it’s checked. This is unique to thumbnails. For the rest of the sizes WordPress will scale your image so that the least dimension of the image fits inside of the min and max.
So the medium size is set to a max width of 300, a max height of 300 and you add an image that is 600×400, it will take that 600 and scale it down so it’s only 300 pixels wide. The 400 will be scaled down then to 200.
It’ll take that max width and the medium size image will be 300 pixels wide and the height will only be 200 because it just scales it. It doesn’t crop it. It scales the image down until it fits inside the max and then once inside it fits inside the max it stops scaling.
Ray asks, “What happens if you choose not to crop the thumbnail to the exact dimensions?” Well, if you choose not to crop the thumbnail to the exact dimensions then it will scale the image just like this. I don’t think that looks very good though and thumbnails are really intended to be used where you have a bunch of posts together and they all have thumbnails. You really want all those images to be exactly the same.
You can experiment with not cropping them but typically where a thumbnail is being used, you want all the thumbnail images to be exactly the same size. So I do strongly recommend you leave that cropped like that instead of scaled because it will look funny otherwise.
3 Image Size Choices and My Recommended Sizing
You have 3 different sizes to choose from, a large size, a medium size and a thumbnail size. What I recommend generally is that your large size image should be the width of your typical content area.
In this Twenty Fourteen theme, the large size image here should be 474 pixels wide. So I would set my max width to 474 because you’re never going to use an image larger than that and then I would set my medium size to half of that.
I’ll make the max height big because maybe you want a really tall rectangular image and the max height can actually screw it up. So we’ll let the max height stay at 1024 but then I would take this one and instead of 475 I’d make it 238 so that it’s half of this size.
In that way a large size will fill the content, the medium size will be half the width of the content and then the thumbnail is just whatever the thumbnail should be but this is a variable based on the theme and what you want displayed.
Media Sizes Only Affect Images Added After Sizing is Set or Changed
Something to recognize is that these sizes only affect images that have been uploaded after you set them. If you have 100 images in there and you changed these image sizes WordPress won’t go back and make new image sizes of your old images for you. In order to have that occur you’ll have to use a plugin like Regenerate Thumbnails.
If you want to learn more about the Regenerate Thumbnails plugin and working with images in that I have videos on the site about that.
Featured Image Size
We’ve now set our Media Settings to match what this theme wants. The one other thing to recognize is that this theme actually likes a featured image of 672 pixels wide even though it doesn’t say it anywhere. So when you upload an image you’re going to want to upload one for this theme that is at least 700 pixels wide.
You’ll have an opportunity to use the full size. You’ll have the choice of using that in places, you’ll have the opportunity to use a large size, the medium size or the thumbnail size.
Inserting Images into Pages
We’re going to leave this like this right now and we’re going to come back over to All Pages and edit this page. The first thing I want to do is insert an image right here between these two paragraphs. Hit Add Media and when you do that you get the media library here.
I currently don’t have any images in the media library so that’s why nothing is showing. But if I hit Select Files, I can come down here and grab an image. I’ll take craftsman-front image, open that up and the image is 618×359. The thumbnail will be cropped down to 200×200.
Attachment Details
I can add a title here. “House designed by Rick Anderson”, this is from my former life as an architect. You can put some alt text in there to do the same. You can also add a description. We’ll call this “Craftsman home”. This description just shows up inside the media library. I’ll show you what it looks like in a minute.
Attachment Display Options
Next you have attachment options. You can say align left, center, right or none, I’m going to say none right now. Align left allows the text to float up beside it to the right, center just centers it in its space, right floats it to the right and the text jumps up beside it on the left and none doesn’t let text do anything, it just breaks the text entirely. We’re going to say alignment none.
WordPress by default often links to a media file and that’s generally not a good idea. If it’s just an image for use inside the page I will have it link to none. If it’s an image link that’s supposed to link some place else then you would use custom URL. And the only time you’d ever use media file is if you wanted somebody to be able to download it so if it was a zip file or something like that. We’re going to say none to this.
Now I have a choice of my size so I could insert the medium size which is half or the large size or the full size. I’m going to choose the large size because it fits into the site.
Editing the Inserted Image
Let’s come over here and update that. Now the image is sitting there. If I view the page, now there’s my image sitting here in the middle of it. Let’s come back and edit the page. If there was some reason why I wanted this image smaller you can actually scale this. I could actually manually change it it but I’m of the opinion that you are better off using standard sizes rather than scaling images yourself.
Change Image Size
If you click on that edit, this gives you a choice of changing your image. So I could go to my full size and hit update and now it’s not going to be any bigger than is allowed by the content area. Everything these days is responsive so it just automatically shrinks the image even if I inserted a bigger image there.
It won’t let a bigger image be inserted. Well, it inserts the bigger image but then it shrinks it down. You can see that responsive behavior at work here whereas the browser window gets smaller so does the image. That’s just part of the built-in responsiveness of this theme.
Insert a Different Image
You could also insert a different image. Let’s go to upload files, select another file and now I’m going to select an image that’s smaller. I’ll choose “client image”. This is only 150×200 pixels. In this case, I’m going to say align left. I really only have a choice of full size, right? It didn’t create a thumbnail image because it’s too small to create one. And it didn’t create any other image sizes because it won’t make an image bigger. It’ll just make an image smaller.
Inline Image Editor Options
Let’s insert that into the page and now you can see what it looks like. We’ve got our image sitting here inside the paragraph with the text floating around it and that so looks pretty good. You can however, add a CSS class to the image, you can make it a link, you can open that link into a new tab, you can do all kinds of things from the inline image editor.
If you’re familiar with WordPress 3.8 and before you’ll remember that when you click edit it was entirely different than this. But this is the way it actually is nowadays, it’s entirely different. If you want to remove the image all you have to do is click remove.
How to Make an Image Stay Lined Up with the Paragraph
The way to make sure that the image stays lined up with the paragraph like that is when you add your media, you want to put your mouse right there at the beginning of that paragraph. And if you want it to float to the right and be lined up, you still want to do it that way.
Put your mouse at the very beginning of the paragraph and then add the media. Choose that media and this time we’re going to say align to the right and insert it. You can see it’s nicely aligned up at the top. That’s one of the good things about 3.9 is it makes this kind of alignment nice and smooth.
Small Images vs Thumbnail
Somebody says, wow at the settings that I set, it makes your images very similar to a thumbnail image. But it’s not exactly the same as a thumbnail image because it doesn’t get cropped. I’ll show you what I mean.
We’re going to add another piece of media to this and we’ll take this soaking-tub image and we’ll use the medium size and we’ll align it to the left. Yes, it’s not much more on 200 pixels wide but it maintains its aspect ratio whereas if I had just inserted the thumbnail image it would’ve been cropped. If I click edit and instead of medium say thumbnail, now I have the cropped view of it.
Uniform Sizing of Images
In my opinion, the best thing to do is have all your images of uniform size. At least all the images on a given page of uniform size and the easiest way to do that is to have your large image size be the width of your content area, your medium image size be half the width, your thumbnail really never shows up on a page. Remember you’re really using the thumbnail for something else.
Featured Image
There’s one other kind of image to consider here and that is the featured image. Different themes use featured images differently but this theme does something kind of cool with the featured image. Let’s set our featured image and pick that same image here, the craftsman-front.jpg. We’ll use that as a featured image, update this, refresh this, here’s what happens, the featured image gets moved up here and the text kind of overlaps it.
The reason why you see this gray hashing is because this image isn’t actually big enough. What this wants is an image that’s 673 pixels wide or larger and this was only 618. So if you want the full effect of this, when you set the featured image pick one that is at least 673 pixels wide.
I’ll pick this mtn-background which is 1600 pixels wide and set that as the featured image. Update it, refresh it and you’ll see what this theme does with the featured image.
We’re going to take a look at different themes and how they behave and you’ll see other themes do different things with the featured image. The image settings are very themed dependent.