Using TimThumb Part 4: Moving the Crop Location
Moving the crop position around is by far the most popular feature that has been requested for TimThumb. And today it has been officially released!
To be honest the cropping code was something I had put off as I wanted to keep things nice and easy to use; but then a month ago I found a comment on the TimThumb Google Code page that gave me a nice simple method for adding the alignment code.
TimThumb Cropping Alignment/ Positioning
The code allows you to align the cropping region to different edges of the image. This isn’t full positioning with x,y co-ordinates, but 99 times in 100 you won’t need that anyway. Since this reduces the complexity considerably it made implementation simpler.
Cropping alignment requires 1 extra parameter being added to the TimThumb query string. The letter a will let you set the alignment.
As with everything TimThumb the parameters are straight forward to understand. They are:
- c : position in the center (this is the 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
An example of this in use would be:
As normal there’s a demo page full of samples showing what can be done with the changes.
It would be no good adding this functionality if people using my themes couldn’t make use of it, so I have now added support for it to Elemental, TheLocal, Nominate, and Mimbo Pro. Usage varies slightly in each theme but the info needed has been added to the relevant theme documentation pages.