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.
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.
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:
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).
Referencing the image by default will produce a 100×100 thumbnail.
Referencing a quality of 100 will give the best image with least compression (and larger file size).
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).
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:”
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:
The image sharpen filter doens’t use the native PHP function. As such, you will have to add it into your string as follows:
Examples of Applied Filters
id = 1: Invert the image with the Negate filter.
id = 2: Turn the image greyscale.
id = 3: Brightness. Requires argument for brightness strength.
id = 3: Brightness. Negative strength argument darkens.
id = 4: Contrast. Requires argument for contrast strength. Note that increased contrast requires a negative value, as seen in the next demo.
id = 4: Contrast with negative strenth.
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.
id = 6: Detect edges.
id = 7: Emboss your image.
id = 8: Gaussian Blur.
id = 9: Selective Blur.
id = 10: Uses mean removal to achieve a “sketchy” effect.
Combined Filters Samples
Colorize and Gaussian Blur.
Colorize and a triple dose of Gaussian Blur.
Greyscale, Brightness, and Contrast all in one.
Greyscale, Emboss, and Invert (Negate).
Sharpening an Image
The image with no sharpening.
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:
Alignment=”top”. Width=”130″. Height=”90″.
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.
The thumbnail created from an external image.
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.
If you liked this article, you may also like: