Build Your Own Business Website header image

How to Use the WordPress Image Editor – Part 6 – Edit the Thumbnail of an Image

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - ,

Applies to -

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.

This is the sixth part of a series on using the WordPress Image Editor and Media Library. In this part we discuss how to use the Media Library image editor to edit the size, shape and scale of a thumbnail of an image.

Video Transcript

The next thing we’ll talk about then are these Thumbnail Settings. This thing here called Thumbnail Settings, you can actually crop your thumbnail differently than the rest of the image. Right now what happens is the thumbnail crops itself automatically and by looking at this, you can see generally what’s happened is the thumbnail is cropped you know, right here in the middle.

And maybe you don’t want the crop there. Maybe you want the crop over here. So what you can do then is you can set… let’s scale the image again. Let’s go back to 600 pixels wide and select scale. Okay, we’ve applied that to all image sizes now and now once we’ve made it 600 pixels wide, let’s go ahead and crop and apply this crop only to the thumbnail.

And so the way we do that is to… let’s do 1;1 here. Okay so 1:1, hit Shift. Let’s say I want that to be my image, to be my thumbnail. That right there. Okay what you do there is you would select this now. You’d select that little thumbnail radio button and now when I hit crop, that’s going to apply only to the thumbnail. Let’s see, let’s hit save and let’s go back to edit image.

Okay so there’s the main image size and there’s the thumbnail back to the cropped view that we want it to be. So this is how you can set your thumbnail to be different than just say the center of this.

Okay and so what we’re going to do now is let’s see, we’re going to restore the original image entirely including the thumbnail… okay because restoring the original image restores the thumbnail. We’re going to change our aspect ratio… no, we’re going to scale the image back to 600 but we’re not going to make any changes to the thumbnail image. So we’re just going to save that and we’re going to update the media and we have our new image here.

Okay so that’s how to crop it if you’re ignoring the thumbnail. Now let’s go ahead and crop it while adjusting the thumbnail. And so, if we come back over here to edit this again, only edit that same image and we go ahead and crop. Actually, let’s restore the original image and let’s go ahead and crop the image. Let’s do it 1:1 again since that’s our thumbnail configuration. Let’s just crop the image like that. Okay and say this is what our thumbnail should be. We’re going to apply that change to the thumbnail, we’re going to hit crop, we’re going to hit save. We’re going to go back to the image and now you can see that thumbnail has changed and if we want to insert the thumbnail in the page now, we could, in fact, insert the thumbnail here. So if we select insert, again, grab our image again, same image. Show…but instead of the full size image, we’ll insert the thumbnail image inserted into the post. And now you can see we’ve got the… and completely different scaled image for the same image. Select update, take a look at the page, and there’s our thumbnail image. And in fact, you could edit this image and get rid of the… actually, what I would do would be to… if I wanted to get rid of a little caption around it, I would just edit the image. Pardon me, wrong edit. Edit the image and go to Media Library, show this one, delete the caption, insert it into post and now the caption is deleted from the thumbnail but it’s not deleted for the main image. Update it.

0 Comments… add one
0 comments… add one

Leave a Comment