Adding TimThumb To Your WordPress Theme

June 27, 2008

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

?View Code PHP
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

?View Code PHP
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&phpMyAdmin=410c4af8e9e6t1397404&phpMyAdmin=446c4b004362t3f340eda 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.

?View Code PHP
1
2
3
4
5
6
7
8
9

<?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&phpMyAdmin=410c4af8e9e6t1397404&phpMyAdmin=446c4b004362t3f340eda 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

  1. In your post go ahead and upload your image.
  2. In the “LINK URL” input, highlight and copy the entire address of the image you just uploaded.
  3. Close the image manager, and open the Custom Fields box down below.
  4. For the key enter thumb.
  5. 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
  6. *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.

Need Help?

Please visit the Timthumb Support Forums.

Tags: , , ,

Was this Post helpful? Please consider a small contribution.

My Amazon.com Wish List
Pypal Tip


28 Responses

Comments

  1. Darren Hoyt

    June 30th, 2008

    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.

  2. Chad Coleman

    June 30th, 2008

    Thanks Darren. And thanks for timthumb!

  3. Entinitty

    August 2nd, 2008

    Thanks for the post

  4. steve

    August 31st, 2008

    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.

  5. steve

    September 1st, 2008

    It turns out using permissions 755 worked. Great tutorial!

  6. Neowster

    October 24th, 2008

    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.

  7. Chetan

    October 27th, 2008

    Thanks dude, you rock, and yes me too.
    I dont know PHP coding but due to your simple language i did it :)

  8. Innocent

    November 5th, 2008

    Interestingly was, but there is someone who does not quite agree with the author?

  9. Li-An

    December 7th, 2008

    Arthemia theme manages the thumbs without Custom Fields…

  10. Chad Coleman

    December 9th, 2008

    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.

  11. Li-An

    December 10th, 2008

    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).

  12. Rahul Chowdhury

    January 22nd, 2009

    I cannot get it to work Chad. Whenever I set the Thumbnail URL it just puts a link to the post while not viewing the Thumbnail! Please help me!

  13. Chad Coleman

    January 28th, 2009

    It appears that you got it working, Rahul. I also noticed you were uploading the images to your root directory. yikes!

  14. Kate

    February 5th, 2009

    Problem with timthumb in some servers, [05-Feb-2009 14:10:57] PHP Notice: Undefined index: extension in /scripts/timthumb.php on line 245. What’s going on? how to fix it?
    I test timthumb on local, it’s working well, but not in live site.

  15. Chad Coleman

    February 6th, 2009

    Hi Kate,

    Is the image you’re using one of these extensions? jpg, jpeg, gif, png

    If your image is not of that extension, that would be my first guess. Do you have a link to the page with the problem?

  16. Kate

    February 6th, 2009

    Yes, i’m using .jpg extension. See this site, http://www.light19.com. Products doesn’t show any images, also Recents News. I came across same problem with another site too.

  17. Kate

    February 7th, 2009

    Just checked and upgraded PHP in live server, it didn’t support GD Lib. I guess not all servers supported GD Lib. After PHP upgrade, i did change folder permissions (cache and scripts) to 777.
    It’s working now.

    So i suggest to check GD Lib in PHP after all steps above, if it still doesn’t working
    Thank you for your great tutorial.

  18. Kuzma

    February 23rd, 2009

    Max post

  19. Lucas

    March 2nd, 2009

    Worked perfectly! Thanks for the post.

  20. Jason

    March 27th, 2009

    Hi Chad, nice tutorial but some how I can’t get this working in my current theme. No image shows, but I have set the permissions to the script folder and cache folder, but nuthing happens. The image url is a jpg. Any ideas?

    thanks

  21. Chad Coleman

    March 27th, 2009

    Hi Jason, When I call timthumb directly it doesnt give me the normal msg. Have you made any mods to it? Are you sure that timthumb.php is located in /awp-dating/

  22. Jason

    March 28th, 2009

    Hey Chad, thnx for the responce. when I tried to access timthumb the way you mentioned I got an internal error saying that it was writeable by group. So I logged in ftp and saw it was 777, changed it to 755 and now it says “no image specified”. I tried 777 and 755 on the cache folder. Unfortuenatly no luck yet, any ideas?

  23. Chad Coleman

    March 28th, 2009

    Hi Jason, Looks like you got it working. Enjoy!

  24. Jason

    March 28th, 2009

    I have been playing around now for a while and I it’s sort-of working.

    I copied a image url of the standard thumbnail on my theme and pasted it into the custom field, and what do u know, it worked, both thumbnail and big image (I could tell the image was unclear because it expanded a small picture.).

    Then I tried an external Image url, nuthing at all worked. No thumb, no big image.

    Then I cropped an image to 250×250 and uploaded via ftp to the /img folder (same folder as the link above.), and the thumbnail worked! but not the big image.

    The img folder is 755, the image file that worked (profile-photo-thumb.jpg) is 644, same as new image that was uploaded there.

    The cache folder seems full of files, so somethings working there.

    Uploading images via article doesnt seem to work, the upload is successfull but can’t view the image, don;t know if this has anything to do with it.

    Otheriwse sorry for spamming your comments! I hope this isnt asking too much!

  25. Chad Coleman

    March 28th, 2009

    Timthumb does not handle external images. So you’ll have to be sure to host the images on the same domain that timthumb is hosted on. I’m not sure about the other problems.

  26. Jason

    March 28th, 2009

    ok, Thanks again for your help! Much appreciated!

  27. thegirlinthecafe

    April 1st, 2009

    I have a very weird problem with Timthumb. The thumbs get generated but somehow they don’t get displayed, only when I do a ctrl-f5 (forced refresh) I am wrecking my brains over this but simply don’t understand what goes wrong.

    Any tips are much appreciated!

  28. Chad Coleman

    April 1st, 2009

    As much as I love helping folks out, I’m gonna have to close this comment thread and start directing traffic to the Timthumb Support Forum ยป

Trackbacks