Adding TimThumb To Your WordPress Theme
TimThumb PHP Script is a custom image-sizing script, that allows you to produce a cropped and sized version of an image. These are great to use along with a Wordpress Magazine Theme. TimThumb has recently been released as open source, and here I will walk you through adding TimThumb to your Wordpress theme.
Using TimThumb will require the use of WP Custom Fields.
01. Setting Up The Script
Lets grab the TimThumb.php source code, and save it to our theme directory.
To keep things organized, lets save it in a scripts directory in our theme.
yourdomain.com/wp-content/themes/your-theme/scripts/timthumb.php
Now create a new directory inside of scripts, and name it “cache”
yourdomain.com/wp-content/themes/your-theme/scripts/cache/
Make sure that both directories /scripts/ and /cache/ are set to 777 so they’re writable by the server.
02. Adding The Call To Our Theme Template
Depending on whether you use home.php or index.php, open the appropriate template file up, and lets find The Loop. Look for the calll to the post title, and lets insert the call somewhere below the title, or meta information.
I’m presenting you with 3 options for the call. You can pick which one might suit you best.
Option 01 - Show Image Only
1 2 3 4 5 6 7 | <?php // This will show only the image. Alter the width and height (in both places) to your needs. ?> <?php if ( get_post_meta($post->ID, 'thumb', true) ) { ?> <div class="postthumb"> <img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>" width="100" height="57" /> </div> <?php } ?> |
Option 02 - Show image, and link image to post
1 2 3 4 5 6 7 | <?php // This will show the image and link the image to the post. Alter the width and height (in both places) to your needs. ?> <?php if ( get_post_meta($post->ID, 'thumb', true) ) { ?> <div class="postthumb"> <a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>" width="150" height="150" /></a> </div> <?php } ?> |
Option 03 - Show image and link image to URL of your choice. Requires additional custom field of “imglink”. Could be used for outgoing links, or linking a thumb to a full version of the image. This option would work best inside of your single.php template.
1 2 3 4 5 6 7 8 | <?php // This will show the image and link it to anything you place into another custom field of "imglink". // Alter the width and height (in both places) to your needs. ?> <?php if ( get_post_meta($post->ID, 'imglink', true) ) { ?> <div class="postthumb"> <a href="<?php echo get_post_meta($post->ID, "imglink", $single = true); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php } ?><img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>" /><?php if ( get_post_meta($post->ID, 'imglink', true) ) { ?></a><?php } ?> </div> <?php } ?> |
03. Making Use of Custom Fields
- In your post go ahead and upload your image.
- In the “LINK URL” input, highlight and copy the entire address of the image you just uploaded. ie: my-image.jpg
- Close the image manager, and open the Custom Fields box down below.
- For the key enter thumb.
- For the value, paste in full address of the image we just copied. ie: http://your-domain.com/wp-content/uploads/2008/02/my-image.jpg
- *For Option 03 - if you want to link the thumb to a url, you’ll need to add a new custom field with a key of “imglink” and paste in the URL as the value. See example below.
About Chad Coleman
Chad has been building websites for friends, family and small businesses for the past 8 years. He currently lives and works in Coeur d'Alene, Idaho. Feel free to contact him regarding any design, web or development work.
June 30th, 2008 at 7:27 am
That’s a great write-up, Chad, and nice site you have here. I’ve had a lot of people ask about practical applications of TimThumb + Wordpress but have not had sufficient free time to write it up myself. I’ll be sure to refer people here.
June 30th, 2008 at 9:06 am
Thanks Darren. And thanks for timthumb!
August 2nd, 2008 at 9:45 pm
Thanks for the post
August 31st, 2008 at 6:25 pm
The images are not being generated in the cache folder even though I have set the permissions to 777. Any ideas why that might be? I have followed your code exactly for Option 1.
September 1st, 2008 at 6:50 am
It turns out using permissions 755 worked. Great tutorial!
October 24th, 2008 at 10:53 am
This is exactly what I am looking for. Thanks alot. Anyway mine worked with permission 755, and not with 777. Great site design by the way.
October 27th, 2008 at 8:37 pm
Thanks dude, you rock, and yes me too.
I dont know PHP coding but due to your simple language i did it
November 5th, 2008 at 8:51 pm
Interestingly was, but there is someone who does not quite agree with the author?
December 7th, 2008 at 2:50 pm
Arthemia theme manages the thumbs without Custom Fields…
December 9th, 2008 at 5:44 pm
Li-An - According to the Arthemia page, the thumbs are managed by custom fields. There really is no other apparent way to manage thumbs, other than using custom fields. But the Arthemia theme does use timthumb.
December 10th, 2008 at 12:55 am
Yes you are right. Sorry (and I understand now why I did not manage to make this theme work with Timthumb :-)). But there are some plugins creating/manging thumbnails without custom fields: Post-Thumb revisited is the more impressive (it’s the one you can see in action on my blog). Impressive but the creator stopped to work on it so there are problems with php5/WP2.6
http://wordpress.org/extend/plugins/alakhnors-post-thumb/
Other solutions http://wordpress.org/extend/plugins/image-extractor/
and http://oktober5.com/visual-recent-posts-plugin/
There is a paying solution too (Thumb Viva).