Add timthumb image resizer to your WordPress theme

Something every WordPress theme should have is the timthumb script.

This PHP file is an image resizer with a cache sistem. It’s fast, easy and works on the fly.

How it works?

You copy the thumb.php file into your theme folder. Then you create the cache folder called “cache” that’s where it will save the cached images.
Please note maybe you will have to set 777 permisisions to the cache folder.

How to resize an image?

Very simple. Let’s see an example:

I have this image (below) wich is 1118px width, 646px height and 392kb.

http://php.quicoto.com/wp-content/uploads/2010/04/ipad.png

There is no way you should add this image to any website. The reader will have to download this large image just to show an small version (like above, 500px).

Here is when timthumb comes in.

We will use the timthumb php and give it to him 3 parameters:

1) Source Image (src)
2) Width (w)
3) Quality (I recomend you 90) (q)

All allowed parameters are:

w: width
h: height
zc: zoom crop (0 or 1)
q: quality (default is 75 and max is 100)

With this url it creates a 200px width image wich is only 20kb!

/thumb.php?src=http://php.quicoto.com/wp-content/uploads/2010/04/ipad.png&w=200&q=90

http://php.quicoto.com/wp-content/themes/developers/thumb.php?src=http://php.quicoto.com/wp-content/uploads/2010/04/ipad.png&w=200&q=90

Amazing, isn’t it?

You can use it whereever you want in your theme. I’ll post how to use the timthumb retrieving the image attachment of your post soon ;)

Download the lastest version from the oficial site:

http://code.google.com/p/timthumb/

8 Responses to “Add timthumb image resizer to your WordPress theme”

  1. JMLeon April 29, 2010 at 8:37 am #

    I think the best way you can use this is aliased with htaccess, this way you can use better SEO image names, instead of inserting a bunch of code in a src attribute.
    You could use:

    src="/thumbs-200/2010/04/ipad.png"
    

    I think this is cleaner and you are making your code lighter. I use to load things in my htaccess to use aliases and other cheats so I don’t have to use plugins.

    Nice trick! I’ll be using this (along with the htaccess trick) in my next development. Thanks!!

    • quicoto April 29, 2010 at 10:33 am #

      Nice idea JMLeon!

      Could you post the .htaccess code necesary to make it work?

      • JMLeon April 29, 2010 at 12:54 pm #

        Well I guess it would be something like:

        RedirectRule ^thumbs-(.*)/(.*)/(.*)/(.*)$ /thumb.php?src=/wp-content/uploads/$2/$3/$4&w=$1&q=90 [L]
        

        The downside is that you’ll need different rules for different places of pics, for example flickr(which gives you pics only in the sizes they want). This rule only would work for pics uploaded to wordpress, which would eat your bandwith. Also, you have to add to your htaccess rules to set the cache expire time to the images which would make the load faster for returning visitors, not to mention that a CDN is always desirable.

  2. quicoto April 29, 2010 at 1:43 pm #

    There is two lines I forgot to post.

    You need to put it in your htaccess file to optimize the timthumb script:

    RewriteRule .* - [E=HTTP_IF_MODIFIED_SINCE:%{HTTP:If-Modified-Since}]
    RewriteRule .* - [E=HTTP_IF_NONE_MATCH:%{HTTP:If-None-Match}]
    

    Don’t know what exacly does but I think its something with the cache

    • Rubén Bonache April 29, 2010 at 7:12 pm #

      The timthumb htaccess notes that the image has not been modified, if not the case takes the image of the cache that was generated at the time and if it was changed because the creation of new

  3. kigzz July 30, 2010 at 8:54 pm #

    Thanks… this is an awesome script.

  4. Tre October 26, 2011 at 10:42 pm #

    I tried to work it out on my site at http://wotobe.com but the images are not showing up.

    • Rick October 27, 2011 at 9:27 am #

      Re-check if the cache folder and the timthumb.php have the right permissions.

Leave a Reply

Add <code> Some Code </code> by using this tags.