So You Want To Use Timthumb With WordPress?

Timthumb is an awesome little PHP script, basically it auto creates a thumbnail from an uploaded image and it is mostly used in blogs. Many themes come with timthumb included but today I’m going to show you how to integrate it into your WordPress theme, and troubleshoot any server issues that can prevent it from working.

You can download the timthumb.php file from here: http://code.google.com/p/timthumb

Let’s get this started:

First thing I generally do is create a folder called “scripts” in the template folder (same location as index.php, sidebar.php etc..) then CMOD the folder to 755, then inside the “scripts” folder create a folder called “cache” and also CMOD it to 755.

Timthumb.php

Open Timthumb.php and find the following lines:

[php]
$new_width = preg_replace ("/[^0-9]+/", ”, get_request(‘w’, 0));
$new_height = preg_replace ("/[^0-9]+/", ”, get_request(‘h’, 0));
[/php]

Edit the width and height to your desired thumbnail size, so for example if we wanted a 150px x 150px thumb we would do this:

[php]
$new_width = preg_replace ("/[^0-9]+/", ”, get_request(‘w’, 150));
$new_height = preg_replace ("/[^0-9]+/", ”, get_request(‘h’, 150));
[/php]

Once you have finished editing upload the “timthumb.php” file into the “scripts” folder.

Index.php

Open your index.php in your appearance editor or using your chosen file editor. The following code should be inserted somewhere around

[php]
<?php
if ($images = get_children(array(
‘post_type’ => ‘attachment’,
‘numberposts’ => 1,
‘post_status’ => null,
‘post_parent’ => $post->ID,)))

foreach($images as $image) {
$attachment=wp_get_attachment_image_src($image->ID, $size);
?><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><img src="<?php bloginfo(‘template_directory’); ?>/scripts/timthumb.php?src=<?php echo $attachment[0]; ?>" alt="<?php the_title(); ?>" /></a>
<?php } else { ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><img src="<?php bloginfo(‘template_directory’); ?>/scripts/preview.jpg" alt=""/></a>
<?php } ?>
[/php]

This code won’t need to be altered, it basically calls the thumbnail image it has generated, adds alt tags and you will also notice the inclusion of a line containing “preview.jpg,” this is a fall back image just in case you opt to write a post with no images, so create an image the same size as your timthumb settings and upload it to your “scripts” folder.

Testing

That’s basically all you need to do to implement the script, to test this write a test post and upload an image into the post then publish, it should appear on the blogs main page (index.php.)

Troubleshooting

Timthumb generally works with most apache server setups, but in a few cases it may not. A number of hosts especially with shared hosting will need to alter some settings for you, I find the following resolves the problem, simply ask your host to:

[php]
Add following rules [ 1234234,340151 ] to mod_security for www.YOURSITENAME.com, and request the domain to be white listed.
[/php]

If that fails to work, speak with your host about the error message you have received and they should be able to work out a solution.

19 Comments

  1. Great post Paul. I was curious though, is there any way to have it to do more than one thumbnail with ease?

  2. @Branden you could make it generate multiple thumbs by reproducing lines in the index.php but it would be the same thumbnail it creates.

    The other option I suppose could work is using 2 timthumb files and changing the size/zoom crop number in one, which you could actually so for sidebar posts too…

  3. Wish I knew about this sooner, would of saved me from recreating 150+ thumbnails!

  4. Hi Paul,

    I found this post while searching for a solution to a problem I have with TimThumb.

    My website is http://www.nicholasbenson.co.uk, which is a WordPress blog using a theme I purchased from ThemeForest. It came with TimThumb as part of the theme, and worked straight away.

    However I have an issue which means that sometimes a thumbnail won’t load when I load up a page. For example, in one of the gallery pages if there are 30 images, 3 or 4 of them won’t load, but the others will. If I refresh the page, either they will all load correctly or a different selection of images will have failed to load.

    Do you have any idea what could be causing this problem? I’d love you forever if you knew an answer :)

    Thanks,
    Nick

    • Hmm I’m inclined to say its server settings, contact your host and say “Add following rules [ 1234234,340151 ] to mod_security for http://www.nicholasbenson.co.uk, and please white list the domain too.”

      Then see if it makes a difference, if not it could be something with the actual script.

      • No luck unfortunately, I had this response from my hosting company:
        __________________

        Dear Nick,

        Thank you for contacting 123-reg on the 26th October 2010.

        Following our engineers’ investigation this is to confirm that we can not white-list domains on the system but if you can can confirm the URL with the error we can investigate this further.

        The rules you have mentioned are not in themselves mod rewrite rules.

        If we can be of any further help with regard to this or any other matter, please do not hesitate to contact us.
        Kind Regards

        Dean
        123-reg

        • Hmmm 123reg don’t strike me as very “with it”, you told them to add the rules to mod security and they think its mod rewrite. You probably just need a better host mate, sorry :(

  5. Hi Paul!

    Thanks for the article.

    Random question — I’m just starting to build my site, and it’s built on a lot of timthumb stuff.

    Is there ANY way to make a post without an image without having timthumb put an obligatory “broken image” sign. Sometimes I just don’t want a picture there, but it demands it — at least in my setup.

    I did a tiny 10×10 transparent thing, but of course when I do that timthumb blows it up to be this massive blank space, which isn’t helpful either.

    Anywho, just thought I’d ask an expert :)

    Ben

    • Hi Ben,

      I’m some way off being an expert, but thanks for your kind words! :)

      The code above has the scope to have a fallback image just in case you have no image in your blog post.

      [php]<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><img src="<?php bloginfo(‘template_directory’); ?>/scripts/preview.jpg" alt=""/></a>[/php]

      Where you see preview.jpg just alter that to the location of your fallback image, just ensure its the same size as your other timthumb-ed images.

  6. This is really cool. I really like this because now I don’t have to manually do it all!

  7. how do i save cropped image on my server ?
    i want to crop one image, but save several cropped versions in a folder. thanks

  8. Hey Paul,

    I’m having a problem. My website http://romsdl.com/ isn’t loading the timthumb plugin. I’ve tried placing it in various locations, but it never appears under “Plugins” in my dashboard. Any idea where it needs to be placed specifically?

Leave a Reply to Paul Maloney Cancel reply

Your email address will not be published. Required fields are marked *