Easy thumbnails for The Unstandard (or any theme)

  • July 1st, 2009

timthumb script support

One of the most requested features by The Unstandard WordPress theme users was a easier method for photo thumbnails on front pages. After exploring a few options including using the baked in WordPress media image re-sizer, Raul’s code snippet to be added to functions.php, and various plugins and scripts, I decided to go the route of Darren Hoyt’s timthumb script for a official theme update.

Old method vs. updated method

Prior to the update, cropping and uploading two versions of a photo was required in order to prevent skewed or distorted images. For every post published, two photos were needed: 1 x large hero and 1 x smaller alternative.

For some, the flexibility of being able to specify two unique assets worked. That is why I have not changed that aspect of the theme. What is different is that cropping images prior to uploading is no longer necessary. Cropping, thumbnail creation, and caching is now handled by the timthumb.php script.

Users can still specify two unique images – one for the hero (if the post is the newest on the front page), and a second for older posts. Alternatively, users can upload one image 600px wide or greater then copy ‘n paste the same URI for the file in both custom fields.

Visit the download page for info or edit your existing theme manually using the instructions below.

Adding timthumb.php support manually

Folder heirarchyFirst, visit Darren Hoyt’s site to grab a copy of timthumb.php. Next, visit your theme directory using a (s)FTP client and create a new folder called ‘scripts’. Within that, create another directory and name it ‘cache’. Check to make sure that both newly created folders are set to CHMOD 777 (so that timthumb can write to those folders).

If you’re using The Unstandard, open index.php and look for the following code:

<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><img src="<?php echo $img_src; ?>" /></a>

Replace that with this new snippet which integrates the newly added timthumb script:

<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<?php if ( is_first_post($post->ID) ) { ?>
	<img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo $img_src; ?>&w=593&h=225&zc=1" width="593" height="225" />
<?php } else { ?>
	<img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo $img_src; ?>&w=293&h=150&zc=1" width="293" height="150" />
<?php } ?>
</a>

What changed? The modified code for The Unstandard users does one of two things:

  1. If the post is calling the larger hero image, use timthumb to create a thumbnail using the value set for ‘lead_image’.
  2. If the post is not the latest, use timthumb to create a thumbnail using the value set for ‘secondary_image’.

The script accepts a couple different parameters including height, width, zoom crop, and quality. Find out more here.

Caveats relying on timthumb

The only issue using timthumb to automatically create thumbnails is that image files must be hosted on your own site. Images hosted externally will not be thumbnailed and cached.

Note that if you plan on using the same image URI for both ‘lead_image’ and ‘secondary_image’, it is better to cover your bases and upload a image equal to or greater than 600px to account for zooming / resizing.