post thumbnails wordpress

12th December 2010

I must say I’ve battled with thumbnails on WordPress for sometime now. Thankfully, since version 2.9 they integrated the post-thumbnails function; enabling a user to select an image for thumbnail use.

However getting the damn thing to be the exact size you want is tricky, usually you end up with and exact ratio i.e. 150px by 150px regardless of what you put in the settings.

Mark Jaquith has a pretty little post on how you can implement the feature in a custom theme.

But in some cases you might be using the default files copied from the “Twenty Ten” theme.

In which case I found it best to use a little bit of PHP and CSS hacking (Without changing anything in the functions.php file) to get it exactly as you want it; dont let this put you off!

So, using the default files, in the index.php where I want the thumbnails to show, I entered the following code:

<div class="image_style">
<div class="image_style_inner>
<?php if ( function_exists("has_post_thumbnail")
&& has_post_thumbnail() ) {
the_post_thumbnail(array(144,144),
array("class" => "post_thumbnail")); } ?>
</div>
</div>

I then, in my CSS, created the following:

#posts .entry .image_style {
height: 80px;
width: 148px;
overflow: hidden;
border: 1px solid #666;
margin-top: 10px;
}
#posts .entry .image_style_inner {
height: 76px;
width: 148px;
overflow: hidden;
border: 2px solid #fff;
}

This meant it would cut off the image at the exact height, and I used #FFF (white) to match the background color, to ensure there was faux padding at the bottom of the image.

About Blueocto

Blueocto is a web design and development company, based in North Tyneside, UK.

We work with sole traders, small and medium-sized businesses.

PI Insurance Broker