Build Your Own Business Website header image

Thesis Post Image and Thumbnails – Part 3 Manual Thumbnails

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 Part 3 of the Thesis Post Image and Thumbnails series and in this session we discuss the manual method of inserting thumbnails into a post at a size that we specify.

Video Transcript

So now the 3rd thing we’re going to talk about then is the manual method of inserting post thumbnails. We’ve been talking about the automatic method but there is actually a manual method of inserting post thumbnails as well. And that manual method is what you see in this section down here. You never need to do anything with this if you set your default settings the way you want it and you just enter a post image. You never actually need to do anything with the thumbnail image here. You would only use this thumbnail image section if there was a reason why you wanted the thumbnail image to be different than it would be if it came out automatically.

And so for example, if you have say a different thumbnail image for one of these posts, in fact, let’s go over to our Media Library for a second and let’s edit one of these images so that we have different…yeah, let’s edit this one so that we have a different size image. Right now, this is 500 by 500 but we’re going to edit this image and we are going to…let’s see, let’s crop it and let’s do a… let’s see, shall we do… yeah, 1.67 to 1 and then pick our… let’s see. Oh that’s 1.6… oh that’s 1 to 1. Yeah, it’s automatically taking me to 1 to 1 so let’s see, 4 to 3.

Okay so let’s just say that’s our image and so let’s crop it. And now that we’ve cropped it, let’s go ahead and scale it down so that it’s 200 pixels wide. Oh no, no… let’s save this first and then we’re going to edit this image again and then let’s scale the image to 200 pixels wide. And then let’s save it again, update the media…let’s see, we probably should have grabbed the URL there first. Let’s see, let’s edit this, grab this new image size, come back over to this post. If we put this image size or put that image in there, Cherries version, what’s going to happen is the image exactly as we created it in that exact size is going to become the thumbnail image for this post. And so it’s going to ignore the default sizes and it’s going to ignore the source of the image and it’s going to use this exactly as it is, as our thumbnail.

So we come back up here and update it and then view that post. Well, it’s not going to affect the view of the post. It’s going to affect the blog. So now we look at Cara Oranges and here it is. The image has… it’s no longer 100 by 100 but it’s 150 by 200. But it’s the only one that’s like that. It’s entirely different. It’s a different image, a different aspect ratio, a different size. Everything is different because of the fact that I placed this thumbnail image URL in this spot. It overrode all of the defaults

Now you can continue to override the defaults by putting a frame around it or giving it a horizontal or a vertical position or changing its horizontal and vertical position. For example, we could be flush left with no text wrap and now it’ll go up above the headline in this case like that.

And the last part of this, this thumbnail size dimensions, notice how they’re 66 by 66 even though the image itself is 200 by 150? This actually allows you to change the default thumbnail size dimensions. And what that means is this is not going to affect this thumbnail. So for example, if we go 100 by 100 here and hit save, it’s going to have no effect on this thumbnail. It will only affect the default thumbnail. See? This stayed exactly the same as it was.

If we come back down here though and say let’s make it 100 by… let’s make it 300 pixels wide and 100 pixels tall and let’s get rid of this image. So now, we’re not using this thumbnail image. It’s going to auto generate a thumbnail image but it’s going to auto generate that thumbnail image at this size out of this image. So we go ahead and update that and we refresh this and there it is. So from the original image, it auto generated a thumbnail at the size that was specified.

The point f this is that you know, there’s a little bit of sort of mix and match on this dialogue between what is an automatic thumbnail and what is a manual. And the thing to know is that when you specify an image here, it’s not going to be sized… it’s going to be put in exactly as the image is specified here. It’s not going to be scaled down, it’s not going to be cropped, it’s not going to be anything. It’s going to be exactly the image that you put in here that’s going to show up there.

Whereas, if you don’t put anything here then this image will automatically generate a thumbnail and it will either follow the defaults for thumbnails or it will use whatever changes to default you made here. And if we come along and we delete the default stuff, I mean the changes that we made and hit update, this thumbnail will return to its normal 100 by 100 size just like that.

So that is the Thesis post image and thumbnail system.

0 Comments… add one
0 comments… add one

Leave a Comment