Using TimThumb part 1: Getting Started

TimThumb has always been built with simplicity in mind. However there are a few things it can do that have not been exposed before.

Inspired by a comment from RBhavesh I have decided to write a series of posts in which I will show you how TimThumb should be used – and introduce some new functionality.

In this post I will discuss the basic usage of the script – the minimum parameters to send, and some examples of usage.

Basic TimThumb Setup

Getting TimThumb to work is pretty straight forward. You need the php file, which you can download TimThumb from Google code, placed in a folder on your website. In the same directory as the timthumb.php file you need to add 1 directory. The directory should be called ‘cache‘ and needs to have its file permissions set to 775.

Simple explanation

TimThumb is a single php script that has a series of parameters passed to it through a query string. Whilst TimThumb has found a home in WordPress themes it is by no means limited to them – TimThumb can be used on any website to resize almost any image.

Requirements

For TimThumb to work your web server should support the PHP programming language and the GD image library. In all the time I have been developing TimThumb I have yet to find a server it wouldn’t work on, so there’s a pretty good chance that TimThumb will work on your server.

In addition you should create one directory for saving thumbnails. This directory should be in the same directory as the TimThumb script and should be named cache. The cache directory should have it’s permissions set to 775.

Note that the cache directory should be the only file/ directory with 775 permissions. The script, the scripts folder, and any other folders should have the default value for your server.

Basic Parameters

The parameters below are the main ones used. With these you can resize almost anything.

  • src – this is the only required parameter. Absolutely everything else is optional. If you only specify the source property then the image will be cropped/ resized to the default dimensions (which are 100 x 100)
  • w and h – width and height. Totally optional but also almost essential, few people want the default sizes. The width and height can be any value, TimThumb will enlarge or shrink as required.
  • q – quality. This specifies the compression level of the images being cropped/ resized.

I have put together a page of examples with code, so that you can see all you need to know. You can view the examples here.

With just these parameters you can do everything you need to with the average TimThumb image. In the following parts I will outline the more advanced features of TimThumb including showing off some of the latest functionality.

In the next part I will be showing how to use some of the more advanced features in TimThumb, including how to make images greyscale and other filters.

Posted in: TimThumb, Web Design

Ben

Ben is a lifelong Nintendo fan who also likes to build websites, and develop games. He also buys way too much Lego.

215 thoughts on “Using TimThumb part 1: Getting Started” Leave a comment ›

  1. Hi,

    I’ve used timthumb a lot of times, but this time its not showing the images.
    Its just showing a link, and after trying to open that link I get this error:
    Could not get a lock for writing.

    You can see that in the following link: http://www.everify.com/resources/wp-content/themes/eVerify/scripts/timthumb.php?src=http://www.everify.com/resources/wp-content/uploads/2011/07/Property-records.jpg&h=150&w=150&zc=1

    My page that I get the above link is:
    http://www.everify.com/resources/?p=1309

    Its the testing link there under the red written “testing”

    I’d be glad if you gave me a small hint.

    Reply

  2. Hi,

    my problem is:
    A TimThumb error has occured
    The following error(s) occured:
    Could not find the internal image you specified.

    Query String : src=http://www.stoneitaliana.com/wordpress/wp-content/uploads/2012/03/aaa.png&h=&w=662&zc=1
    TimThumb version : 2.8.10

    Can you help me?
    Thanks a lot.

    Reply

  3. Well, I was hoping there was a way that the script could append a relative URL and make it an absolute URL, but I don’t know how to program that. So I just manually made the change on all the posts on my site. Fortunately, there weren’t that many. TimThumb is working great again!

    Reply

  4. I have installed timthumb on a child theme based on TwentyEleven but I’m getting no thumbnail. My callup has a “alt name” in it and the alt name is showing up for each of three test thumbnails, but the images aren’t coming up.

    I looked at my source code and it’s looking for a scripts folder in TwentyEleven while it’s trying to call up an image from my child theme. No wonder nothing is working! But, my scripts folder is in the child theme where it belongs! I double checked my site and it’s properly using the child theme.

    My template code is this: <img src="/scripts/timthumb.php?src=ID, “thumb”, $single = true); ?>&h=150&w=150&zc=1″ alt=”” width=”150″ height=”150″/>

    My source says this:

    Note that it’s looking for the timthumb script in TwentyEleven.

    Apparently, the issue is that I need my ‘template_directory’ to go to my child theme, not TwentyEleven. What do I need to do? How do I achieve this? Is this a timthumb issue? It seems that ‘template_directory’ should go to my child theme.

    Reply

  5. It looks like you must be stripping out anything that appears to be a URL or something, so my examples didn’t get displayed properly above.

    Anyway, my template PHP is calling up the ‘template_directory’ to look for the timthumb script, but my source code shows that it’s looking for it in the parent theme, not the child theme. I have no script in the parent theme (properly so) but I have it in my child theme with CHMODs set appropriately. And my child theme is activated.

    Reply

  6. I found the solution. Someone on another forum explained that for child themes, one should use ‘stylesheet_directory’ instead of ‘template_directory’. Stylesheet_directory refers to the stylesheet currently in use, that is, a child theme in my case.

    I’ve got my thumbnails! Thanks for the script. I have a client who’s going to be very happy.

    Reply
  7. Pingback: Test DOKO-Kombinat Nagelik 1985

  8. I see a lot of gallery plugins and carousels using TimThumb, is there a way to specify WHICH images of the gallery to display when it comes to displaying the “featured” image within the WP native gallery? Logically it should grab the first image, but in other cases, its grabbing a random one, not sure if this can be called upon from within TimThumb or the plugin itself, I’m trying to figure out how to simply point it to the first image of the gallery and not a random one.

    Reply

    1. Hi – All TimThumb does is resize images, it has no effect over the way things are displayed or their order on the page – that’s all done by WordPress.

      Please note that TimThumb isn’t directly associated with WordPress. It’s used with WP a lot, but it’s not a plugin. It’s just a script people use 🙂

      Reply

  9. Gotcha, and thank you for the clarifications, I guess limiting it to WP was an understatement, I’ll address the issue with the plugin developer to see whats up as it doesnt make sense lol Thanks Ben and yes GREAT script!

    Reply
  10. Pingback: AutoFocus Previous Post / Next Post Image Thumbnails | TQuizzle.com

  13. I am using timthumb to crop an image from another website. The image is a haze and fire danger rating map which updated daily.
    I am trying to make timthumb crop the image on daily basis (since the map is updated daily). I see sometime timthumb use the cached image and doesn’t update to the newest image of the day.
    I don’t know how to fix that. Please advise,

    Thank you very much.

    P.S. The website address (dummy website only): http://civildreamer.com/haze
    The image i am talking about is the one on the middle column which titled “Regional Haze map “

    Reply

  15. I’m making a new wordpress project right now the theme uses timthumb unfortunately the images are not loading some does and many don’t. When I create a new post with single or several images each size 200kb resolution max width 900px max height 750px, it does not load right away timthumb error Could not get a lock for writing then after 15 mins it loads but some times it doesn’t. I already change permission to 777 on cache folder but did not work tried I all the tricks to make timthumb work but to no aveil then I decided to install it to a different hosting comp. and had no problems at all images load without any problem so I issue a ticket on my hostting company ( where timthumb does not work) here is what they said.

    The problem is that the function that timthumb is trying to use, flock() with LOCK_EX, when generating the thumbnails, is not compatible with the Grid Iron architecture. The reason why is because Grid Iron makes use of NFS storage. This is part of what allows us to provide the scalability and redundancy of the Grid Iron platform. The flock() function is not compatible with NFS. I looked briefly into the source code of timthumb, and it is indeed trying to use flock():

    if(flock($fh, LOCK_EX)){
    @unlink($this->cachefile); //rename generally overwrites, but doing this in case of platform specific quirks. File might not exist yet.
    rename($tempfile4, $this->cachefile);
    flock($fh, LOCK_UN);
    fclose($fh);
    @unlink($lockFile);
    } else {
    fclose($fh);
    @unlink($lockFile);
    @unlink($tempfile4);
    return $this->error(“Could not get a lock for writing.”);

    There is more information about flock() not working over NFS here:

    http://www.php.net/manual/en/function.flock.php
    http://stackoverflow.com/questions/218451/locking-nfs-files-in-php

    So, TimThumb will not be able to reliable obtain a file lock using the flock function, so you should see if TimThumb has an alternative file locking mechanism that would be compatible with files stored on NFS.

    Can you please help I don’t have any idea what to do any more

    Reply

  16. Yep, TimThumb does not work on NFS because it tries to use flock() with LOCK_EX – Exclusive locks don’t work on NFS. Author should fix this.

    Reply

  17. ok, so i this super annoying problem.
    i want my thumbnails to be 250×250 square
    but my images are always cropped to 300×167
    even tough in the thumbnail settings i selected full size (250×250)
    and i’ve seen you’re demos on how to specify the size
    but i’m totaly new to wordpress and i don’t understad where should put the code
    THIS is my blog

    Reply

  18. Have you seen a solution to the following problem?

    When I have the full path to the image included in the timthumb.php request, like this:

    The image doesn’t show up and it generates the default 404 WordPress error page. (You can click on the link to see for yourself actually.)

    However, when I click on the link and get rid of the ‘http://jennacomm.com’ from the src variable, it displays the image just find in the browser.

    This is giving me a migraine as I’ve tried just about everything every site out there has suggested to no avail.

    Changed permissions to 777, which I didn’t want to do because of the security hole, but I did, and that didn’t work.
    GD Library is installed.
    Cache is there and that appears to be working.

    Any idea?

    Reply

  19. Hmmm… my last message didn’t seem to post completely. Let me see if I can simplify it.

    Does not work:
    http://jennacomm.com/wp-content/themes/nevo/includes/timthumb.php?src=http://jennacomm.com/wp-content/uploads/2012/12/413362_254703827982345_808989654_o1.jpg&w=83&h=83zc=1&q=100

    Works:
    http://jennacomm.com/wp-content/themes/nevo/includes/timthumb.php?src=/wp-content/uploads/2012/12/413362_254703827982345_808989654_o1.jpg&w=83&h=83zc=1&q=100

    The only difference is ‘http://jennacomm.com’ in the src.

    Any ideas?

    Reply

  20. i used it on my website but i found many problems, images dont appear on the website and hadn’t been created on the cache folder

    Reply
  22. Pingback: TimThumb – PHP Image Resizer | Siterevista.com

  23. Hi, Ben
    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 🙂

    Reply

    1. You need to edit your theme so that it doesn’t try to embed timthumb if there’s no image assigned to the post.

      Reply

  24. Howdy,

    I am using the default lightbox on Super Skeleton to enlarge images and i believe the lightbox is Tim Thumb.

    The lightbox allows users to share the file via Facebook or Twitter – I would like the ability to add more networks like Pinterest etc.

    How can i find where to do this in the wordpress backend pretty please?

    Cheers,

    Kat 🙂

    Reply

  25. w and h – width and height. Totally optional but also almost essential, few people want the default sizes. The width and height can be any value, TimThumb will enlarge or shrink as required.

    With huge sized images, some people may want to automatically activate the MAX_WIDTH or MAX_HEIGHT config settings to save time manually processing images, especially if loaded by third parties, instead of the 100×100 default if w and h omitted, i.e. display at original size unless MAX_WIDTH or MAX_HEIGHT occurs.

    Thanks for your time on TimThumb, brilliant,

    Mark.

    Reply

  26. Hi,
    This is a great script and i’ve been using it for a while, however i found that the script makes a lot of caches that are 0b in size. What is the reason for that?
    Thanks

    Reply

  27. If u want to use friendly url in your website, you can use this script in the .htaccess.

    RewriteRule ^(thumb|image)/([0-9]+)/([0-9]+)/([0-9]+)/([a-zA-Z0-9-./:\/&?=]+) Thumb2.php?w=$2&h=$3&q=$4&src=$5

    I create this format for me. For example:

    Without this regex:
    thumb.php?src=images/image.jpg&w=300&h=250&q=80

    With this regex:
    thumb/300/250/80/images/image.jpg

    thumb////

    you can use thumb or image.

    Reply

  28. Hi, I used this script in my latest project. Everything works good for me, but when site/page load first time that time some image are not load. When refresh it then after all images are load. If you have a any solution for this then please tell me. The client is on my head any one have solution than please reply me…thanks…….

    Reply

  29. I guess its a goodbye to timthumb.php file from all web hosting companies.

    Till April, 2014, it was working on my site http://www.timesofassam.com. But it doesn’t work now.

    I have tried so far:

    1] All fixes found by googling around.
    2] Changed hosting to 4 hosting companies.
    3] Tried VPS & Dedicated server too.

    But no luck.

    Its time to think about alternative of timthumb.php

    Regards-

    Dhruba Jyoti Deka

    Reply

  30. I love this image gallery script.
    I’m looking for image sorting edits so I can have latest modified image load up first. Is there a work around?

    Reply

    1. Hi – TimThumb is just for resizing images. It doesn’t do anything on the website itself. You would need to modify your website to add sorting.

      Reply

Leave a Reply

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