Resizing Images using TimThumb.php

I recently had a request for some shortcode that would render formatted images and text in a particular way. When I tried to imagine how the average author on one of my blogs would apply the shortcode, I ran into the problem of how image scaling would be handled. Some of the people I work with on some of my own blogs are a little ‘challenged’ when it comes to working with image software… so they often upload massive files to WordPress and have the platform handle scaling natively (meaning, most of the time, images link to a massive version of the themselves). Given my history of having to edit virtually every post that gets uploaded, I couldn’t rely on authors scaling images referenced in shortcode that relied on very specific dimensions.

Following is an introduction to a PHP imaging script that goes by the name of TimThumb. It’s important to introduce TimThumb and describe what it can do before I post a related shortcode function next week.

What is TimThumb.php

TimThump.php is a PHP script that has a series of parameters passed to it through a query string. TimThumb, when referenced as an image source, will then process the image and apply various changes in the way in which it’s presented. The referenced image will be cached locally.

Many people think of timthumb primarily as a means to create thumbnail images… and although it accomplishes this task exceedingly well, its strength comes in being able to process images and apply changes we would normally expect from traditional image processing software. The section below that’s entitled ‘Examples of Applied Filters‘ will give you a better feel for what timthumb.php can do.

Although I’m using timthumb.php for WordPress related tasks, it can obviously be used anywhere for any reason.

Installing TimThumb

Your web server must support PHP files and it must have the GD image library installed. There aren’t many web servers that wouldn’t meet these two basic requirements!

You can download timthumb.php from Google code here. You should copy the source and save it as timthumb.php.

TimThumb hasn’t been without its security flaws in the past so it is important to always ensure that the version you’re using is the one that’s most current.

It’s best to install timthumb.php in its own directory. The first time you run the script (using examples below) the script will attempt to create a cache and temp directory for you. It will also attempt to set the appropriate permissions. If not successful, you’ll have to do this yourself.

From reading around the web, it seems like the majority of support issues with the script are orientated around permission problems. You should set (temp and cache) permissions to 777 or 755 (the latter is required on many servers; the author recommends the former). If you continue to have problems after installation, it might be best to contact your hosting provider.

I continued to have 404 errors despite the fact I was absolutely comfortable I had the script set up correctly. After a phone call to my web host, they set permissions on their end. This fixed the problem! There was an additional security precaution on their end I simply wasn’t aware of.

Support for the script is available on the publisher’s website.

Using TimThumb.php

For the purpose of our examples, I’m using a photo I took of Richard Branson for an event I attended for Flight Podcast. The original image that I’m processing (on my web server) is 720×480 pixels. It’s important to note that every reproduction on this page is a modified version of the original.

Consider the most basic of implementations:

<img src="timthumb.php?src=richard-branson.jpg">

By default, this will create a 100×100 thumbnail of the image, and then cache it locally. Here are some examples (mostly borrowed from binarymoon.co.uk).

  <img src="timthumb.php?src=richard-branson.jpg">

Referencing the image by default will produce a 100×100 thumbnail.

 

  <img src="timthumb.php?src=richard-branson.jpg&q=100">

Referencing a quality of 100 will give the best image with least compression (and larger file size).

 

  <img src="timthumb.php?src=richard-branson.jpg&q=10">

Referencing a quality of, say, 10 will output a poor quality image with lots of compression (and smaller file size).

 

Changing the width will keep the image in proportion

 

Changing the height (or width) will resize the image proportionally and preserve image formatting. In this case, I’ve altered the width to 400 pixels and changed the quality to 75% (q=75).

<img src="/timthumb/timthumb.php?src=richard-branson.jpg&q=75&w=400">

Basic Parameters

 

src – the only required parameter.
w and h – width and height. If not specified, default dimensions of 100×100 will be applied.
q – quality. Comrpession level of processed image.

Applying Image Effects

Image filtering is similar to the effects applied in traditional software such as PhotoShop or Gimp. The functionality is applied through the imagefilter PHP function.

The filters are controlled through the f query variable. From the BinaryMoon website, “Since some filters require arguments such as colour values or strength of the filter (amount of contrast for example) you need to pass the filter id followed by the arguments in a comma separated list. For example the brightness filter (id 3) requires 1 argument – so to give a brightness strength of 10 it would look like this:”

f=1,10

The image filters and arguments that you can use are:

1 = Negate – Invert colours
2 = Grayscale – turn the image into shades of grey
3 = Brightness – Adjust brightness of image. Requires 1 argument to specify the amount of brightness to add. Values can be negative to make the image darker.
4 = Contrast – Adjust contrast of image. Requires 1 argument to specify the amount of contrast to apply. Values greater than 0 will reduce the contrast and less than 0 will increase the contrast.
5 = Colorize/ Tint – Apply a colour wash to the image. Requires the most parameters of all filters. The arguments are RGBA
6 = Edge Detect – Detect the edges on an image
7 = Emboss – Emboss the image (give it a kind of depth), can look nice when combined with the colorize filter above.
8 = Gaussian Blur – blur the image, unfortunately you can’t specify the amount, but you can apply the same filter multiple times (as shown in the demos)
9 = Selective Blur – a different type of blur. Not sure what the difference is, but this blur is less strong than the Gaussian blur.
10 = Mean Removal – Uses mean removal to create a “sketchy” effect.
11 = Smooth – Makes the image smoother.

The filters can be applied together. To do so, seperate the filters you choose to apply with a pipe character and then pass the entire query string to timthumb.

For example the values below would apply a brightness of 10 to a grayscale image:

timthumb.php?src=richard-branson.jpg&f=2|1,10

The image sharpen filter doens’t use the native PHP function. As such, you will have to add it into your string as follows:

timthumb.php?src=richard-branson.jpg&s=1

Examples of Applied Filters

 

  <img src="timthumb.php?src=richard-branson.jpg"f=1>

id = 1: Invert the image with the Negate filter.

 

  <img src="timthumb.php?src=richard-branson.jpg&f=2">

id = 2: Turn the image greyscale.

 

  <img src="timthumb.php?src=richard-branson.jpg&f=3,80">

id = 3: Brightness. Requires argument for brightness strength.

 

  <img src="timthumb.php?src=richard-branson.jpg&f=3,-30">

id = 3: Brightness. Negative strength argument darkens.

 

  <img src="timthumb.php?src=richard-branson.jpg&f=4,50">

id = 4: Contrast. Requires argument for contrast strength. Note that increased contrast requires a negative value, as seen in the next demo.

 

  <img src="timthumb.php?src=richard-branson.jpg&f=4,-50">

id = 4: Contrast with negative strenth.

 

  <img src="timthumb.php?src=richard-branson.jpg&f=5,150,0,0,25">

id = 5: Colorize, or tint, your images. This actually requires 4 arguments. R,G,B,Alpha – the RGB values can use the range 0 – 255, and the alpha values are from 0 – 127.

 

  <img src="timthumb.php?src=richard-branson.jpg&f=6">

id = 6: Detect edges.

 

  <img src="timthumb.php?src=richard-branson.jpg&f=7">

id = 7: Emboss your image.

 

  <img src="timthumb.php?src=richard-branson.jpg&f=8">

id = 8: Gaussian Blur.

 

  <img src="timthumb.php?src=richard-branson.jpg&f=9">

id = 9: Selective Blur.

 

  <img src="timthumb.php?src=richard-branson.jpg&f=10">

id = 10: Uses mean removal to achieve a “sketchy” effect.

 

Combined Filters Samples

 

  <img src="timthumb.php?src=richard-branson.jpg"f=5,20,120,40,50|8>

Colorize and Gaussian Blur.

 

  <img src="timthumb.php?src=richard-branson.jpg&f=5,20,120,40,50|8|8|8">

Colorize and a triple dose of Gaussian Blur.

 

  <img src="timthumb.php?src=richard-branson.jpg&f=2|3,30|4,-30">

Greyscale, Brightness, and Contrast all in one.

 

  <img src="timthumb.php?src=richard-branson.jpg&f=2|7|1">

Greyscale, Emboss, and Invert (Negate).

 

Sharpening an Image

 

  <img src="timthumb.php?src=richard-branson.jpg">

The image with no sharpening.

 

  <img src="timthumb.php?src=richard-branson.jpg&s=1">

adding s=1

 

Cropping Aligment

 

The new version of the script gives a user the option of sizing the image with reference to the top, bottom, left or right (or a combination). Available cropping parameters are as follows:

c : center (default)
t : align top
tr : align top right
tl : align top left
b : align bottom
br : align bottom right
bl : align bottom left
l : align left
r : align right

In the case of my image, default (center) worked fine. Here’s the same image with a few cropping parameters applied:

  <img src="timthumb.php?src=richard-branson.jpg&a=t&w=130&h=90">

Alignment=”top”. Width=”130″. Height=”90″.

 

  <img src="timthumb.php?src=richard-branson.jpg&a=r&h=100&w=130">

Alignment=”right”. Height=”100″. Width=”130″.

 

Using External Images

 

TimThumb can reference external images, apply image effects, then store them locally. You simply add permitted external domains to the allowed_sites array in the configuration area near the top of the script. By default, the author has included a number of commonly referenced external websites.

In the following two examples, I’ve referenced an image on one of my other blogs, flight.org.

  <img src="timthumb.php?src=http://flight.org/v07s.jpg">

The thumbnail created from an external image.

 

  <img src="timthumb.php?src=http://flight.org/v07s.jpg&s=1&f=6&w=100&h=200">

Sharpening. Adding “Detect edges” (6). Scaling to a width of 100 and height of 200.

 

TimThumb.php and WordPress Shortcode

I’ve created a small shortcode function that I’ve provided to authors to aid them with image manipulation. I’ll post it next week.

First Name:
Your Email Address:
 


If you liked this article, you may also like:

  1. Timthumb Image ShortCode
  2. Rewrite Your Timthumb Image Links with .htaccess
  3. Create a WordPress Gallery from all Images in a Directory (Using TimThumb)
  4. Picasa Image Tower or Gallery on Your WordPress Website with Shortcode (with timthumb options)
About Marty

is a passionate web developer from Sydney, Australia. He owns about 600 websites and makes a healthy living from working the web. As a day job, he works as a pilot for an international airline. Follow Marty on Twitter or Google+.

Comments

  1. great tutorial… any way timthumb can read a whole directory and batch resize those images?

    • Hi Markus. I’ve just scheduled a post that’ll do what you have described. If you want the code before it goes live, please contact me. M.

Trackbacks

  1. […] TimThumb has the ability to build webpage screenshots if you have access to your own server. Instructions […]

  2. […] http://www.internoetics.com/2011/11/06/resizing-images-using-timthumb-php/ Share this:TwitterFacebookLike this:LikeBe the first to like this post. This entry was posted in My blog. Bookmark the permalink. […]

  3. […] every uploaded image. The solution I’ve recently implemened on two sites involves using timthumb.php to dynamically alter images and have them cached for future retrival. What is Timthumb.php? […]

  4. […] of course, all the standard TimThumb formatting options apply. Here’s a few examples of styled images that were dynamically created (the same […]

  5. […] the use of shortcode (and optional use of timthumb), this post will show you how […]

  6. […] talked about the timthumb image resize script a few times in the past. Timthumb’s strength comes in being able to process images and apply changes using […]

Please leave a comment or question!

*