Web Hosting

Thesis Tips: Post Images and Thumbnails

Thesis Theme for WordPressImages add hugely to the visual appeal of a post and help to keep site visitors engaged.

And if you’re using the Teasers option (magazine style layout) for displaying posts on your blog page, Thesis will automatically resize your post image to fit into the Teaser box.

The Post Images and Thumbnails section on the Design Options screen enables you to set the default positioning of images and thumbnails you use as introductions to your posts.

These controls are limited to the image at the beginning of your articles.

So when you insert an image into the body of your articles you’ll still need to use the ‘Add an Image’ control from the WordPress Add New Post screen toolbar.

Accessing the Post Images and Thumbnails Controls

Go to the Design Options screen and locate the Post Images and Thumbnails section:

Post Images and Thumbnails

Post Image Settings

Click the ‘ + ‘ sign next to Default Post Image Settings to view the available settings for post images:

Post Image Settings

Click on the radio buttons describing the horizontal and vertical position in which you’d like your post images to appear.

Click the check boxes against any of the options you want.

The options are self explanatory except, possibly, the archives pages option: this refers to the pages that are displaid when you click on a Category or Tag link.

Here’s an example of what selecting the Show Images on Archive Pages looks like to a site visitor:

Articles on Hong Kong.

Thumbnail image settings

The thumbnail settings tell Thesis how to position images that you display in your teasers box, if you’re using that option.

To view the Thumbnail settings click the ‘ + ‘ sign next to Default Thumbnail Settings:

Default Thumbnails settings

You’ll see that Thesis has automatically applied the same settings you selected in your default post images settings, so you don’t need to do anything here unless you want to change the position settings.

You may want to change the default thumbnail size, depending on how wide you’ve made your content column.

The only change I’ve ever made to this is to increase the default size when I’m using a wider than usual content column. Otherwise I just accept the default.

Creating a Post Using The Thesis Post and Thumbnail Settings

Once you’ve set those default settings they will automatically be applied to any post where you define the image URLs in the post write screen (but you can over-ride them on any individual post if you want to).

Below your edit box on the Add New Post screen you’ll find these fields:

Post images on the add new post screen

Firstly, you’ll need to upload the images you want to use to a folder on your server, outside the WordPress folders.

I create a folder called ‘images’, located in the root, and upload all my images to that.

So when you create a new post and want to add a post image all you need to do, then, is add the full URL of the image you uploaded to your images folder, to the box under Post Image (circled above).

To improve the SEO of your article you should also enter a description in the second box – the post image ‘alt’ text.

Thesis will then automatically insert your image in the location you specified in the default settings, or the settings on the post page (below the image alt text box) if you’re over-riding the defaults.

And here’s the really neat part: If you’re using the Teasers option Thesis will automatically resize your image and display it in the teasers box.

You don’t need to specify the URL (unless you want to use a different image). You don’t need to do anything at all. Just leave the fields in the Thumbnail Image area empty.

Here’s an example of a post image added by Thesis (you can make the post image any size you want):

Article on Boracay.

And here’s how that article and image appear on the blog page when you’re using Teasers:

Blog page.

OK, that’s it for Post Images and Thumbnails. If you need clarification on anything leave a comment and I’ll clarify!


Martin Malden

Web Hosting