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.

Share This...

TimThumb Technical Support

Need help with getting TimThumb to work? Check here for my prices.

Support ›
About The Author

Ben Gillbanks

Web Designer, Video Gamer, Blogger, and part time Entrepreneur. Read More

206 thoughts on “Using TimThumb part 1: Getting Started

  • Reply ›
    David

    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.

    April 8, 2012

  • Reply ›
    FanaticWeb

    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.

    May 12, 2012

    • Reply ›
      Ben

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

      May 12, 2012

  • Reply ›
    FanaticWeb

    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!

    May 13, 2012

  • Reply ›
    darknote

    Replaced timthumb by the_post_thumbnail, itmakes as well as timthumb and without the risk have a day, a new fault of security as timthumb!
    http://stackoverflow.com/...wordpress-native-image-tools

    June 28, 2012

  • Reply ›
    aderse02

    Worked like a charm...thanks!

    July 24, 2012

  • Reply ›
    Bagus

    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 "

    August 2, 2012

  • Reply ›
    Jimmy James

    Howdy,

    Installed Respo theme and having all sorts of image glitches - http://needleandspindle.com/ - cache is 775 - what is the basic error I have overlooked? thanks!

    September 13, 2012

  • Reply ›
    ninja81

    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/...451/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

    October 21, 2012

  • Reply ›
    Guy

    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.

    November 2, 2012

  • Reply ›
    Jeroen

    ok, so i this super annoying problem.
    i want my thumbnails to be 250x250 square
    but my images are always cropped to 300x167
    even tough in the thumbnail settings i selected full size (250x250)
    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

    November 17, 2012

  • Reply ›
    David

    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?

    December 6, 2012

  • Reply ›
    David

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

    Does not work:
    http://jennacomm.com/...38;w=83&h=83zc=1&q=100

    Works:
    http://jennacomm.com/...38;w=83&h=83zc=1&q=100

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

    Any ideas?

    December 6, 2012

  • Reply ›
    ????? ?????

    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

    January 19, 2013

  • Reply ›
    Horácio Lopes

    Hello, I used Timthumb in theme CONSULTANT I bought.
    The thumbs don't show up and I've tried and reviwed all tips in this page.
    Can you plese look at it?
    http://www.ensinarmelhor.com
    Thank you

    February 4, 2013

  • Reply ›
    cn arabic

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

    March 3, 2013

    • Reply ›
      Ben

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

      March 3, 2013

  • Reply ›
    Kat Angelone

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

    April 2, 2013

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Websites linking here

  1. Favicon for http://www.google.com/s2/favicons?domain=www.binarymoon.co.uk Using TimThumb Part 2: External Websites
  2. Favicon for http://www.google.com/s2/favicons?domain=www.binarymoon.co.uk TimThumb Image Filters
  3. Favicon for http://www.google.com/s2/favicons?domain=www.binarymoon.co.uk TimThumb troubleshooting help
  4. Favicon for http://www.google.com/s2/favicons?domain=caramboo.com Tim Thumb Shortcodes | Caramboo Dot Com
  5. Favicon for http://www.google.com/s2/favicons?domain=www.binarymoon.co.uk Complete TimThumb Parameters Guide
  6. Favicon for http://www.google.com/s2/favicons?domain=www.nagelik.de Test DOKO-Kombinat Nagelik 1985
  7. Favicon for http://www.google.com/s2/favicons?domain=www.tquizzle.com AutoFocus Previous Post / Next Post Image Thumbnails | TQuizzle.com
  8. Favicon for http://www.google.com/s2/favicons?domain=www.siterevista.com TimThumb – PHP Image Resizer | Siterevista.com

My Projects

TimThumb - Image Resize Script TimThumb

Image Resize Thumbnail Script

WPVote - WordPress Social Voting WPVote.com

WordPress Social Voting Site

About me

About BenMy name is Ben Gillbanks. I'm a lover of Video Games, WordPress, Web Development and everything in between.

I have been working on the internet since 1998, and working with computers even longer. I am a hardcore Nintendo fanboy and have owned most of their consoles at one stage or another.

Read more about me on my about page.

My Tweets › Binary Moon

Random Link-outs

Keep Updated

Subscribe to RSS

Stay Updated

Binary Moon

WordPress and Web Development › home of Ben Gillbanks