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