I love the teaser feature of Thesis, where you have two columns of shorter blurbs linking to older blog posts. You can get a lot more links on your home page without making visitors have to scroll forever. However, by default, the teasers only display text, which is a little bland. And it's a real waste for sites that have a lot of attractive imagery in their posts, like photography, travel, and food blogs.
Fortunately, it's very easy to add images to your teasers and Thesis offers several options for sizing and positioning them without requiring any coding at all.
Specifying the thumbnail image
When you're writing your post, simply scroll down to the Post Image and Thumbnail section and enter the URL to the image you want to use as your post image. (If you uploaded the image while writing the post, you can click on it, then click on the image icon that appears to pop up a window that will show you the URL.)
Now when you save your post, a thumbnail of that image will automatically be generated beside your teaser on the home page.
Note that this will also add the same image, at full size, above the headline on your actual post. So when you click through from the teaser, you'll see this:
If you don't want that—for example, you might not want to use the same image for your thumbnail that you've designated as the main post image—you can enter a different URL for the thumbnail image into the Thumbnail field below.
Setting the image framing, positioning, and sizing options
You can see that this section also lets you set how to display the thumbnail. The default, above, is no frame, left-aligned just before the content, and 66 x 66 pixel size. The screenshot below shows a frame, centered above the headline, that's 280 x 50 pixels.
About automatic resizing: As you can see, if you set height and width settings that are different proportions than the actual image, it may crop some of the picture out. Also, the built-in function that automatically crops thumbnails only works when you specify a post image. If you use a different image for the thumbnail, you'll have to resize the image file itself to the desired dimensions.
Setting defaults for your post and thumbnail images
If you want the same settings for framing, positioning, and sizing for all post and thumbnail images, you can set them in the Thesis Options > Thesis Options > Post Images and Thumbnails panel. You can override these settings for any individual post using the settings mentioned above. The screenshot below shows the settings for thumbnails. The settings for the post image itself is right above this.
Posted in Blogging, Formatting, How To, QuickTips, Thesis
{ 7 comments… read them below or add one }
Thanks so much for writing this.
I have a question. In the "Specifying the thumbnail image" section, you have the sentence: "Note that this will also add that image, at full size, above the headline on your actual post." I don't understand. What does that mean?
Thanks for pointing out that that wasn't clear. I've added more explanation and a screenshot to display what I mean. But basically, when you're adding a post image, the primary purpose is to add the image to the individual post page. Adding it to the teaser is the secondary result. A lot of people want to add a main image to the post and have it automatically added to the teaser, which is why it's set up this way. But you might want to use a different image for the teaser, maybe even one that doesn't appear in the post at all, in which case you would specify that in the Thumbnail field. Does that make more sense?
What if I want across the board that the "main" post image is positioned center after the headline? And this image is used as the thumbnail in the teaser and looks like the example you gave? What do I do?
Set the default positioning using the Thesis Options > Thesis Options > Post Images and Thumbnails. Then you just have to enter the image URL in the field for each individual post (you would leave the thumbnail image field blank). Your default settings will apply, but you can override them on a case-by-case basis.
Does that make sense?
Would the post image be "Below headline" or "Before post/page content" if I want it just above the text of a post?
It depends on how your page is set up. I recommend you test both and go with the one you like better. That's one of the great things about Thesis -- quick and easy way to test things out without screwing up all your code.
Exactly what I was looking for. Thanks so much.