|src = source||url para a imagem||Tells TimThumb which image to resize|
|w = width||the width to resize to||Remove the width to scale proportionally (will then need the height)|
|h = height||the height to resize to||Remove the height to scale proportionally (will then need the width)|
|q = quality||0 – 100||Compression quality. The higher the number the nicer the image will look. I wouldn’t recommend going any higher than about 95 else the image will get too large|
|a = alignment||c, t, l, r, b, tl, tr, bl, br||Crop alignment. c = center, t = top, b = bottom, r = right, l = left. The positions can be joined to create diagonal positions|
|zc = zoom / crop||0, 1, 2, 3||Change the cropping and scaling settings|
|f = filters||too many to mention||Let’s you apply image filters to change the resized picture. For instance you can change brightness/ contrast or even blur the image|
|s = sharpen||Apply a sharpen filter to the image, makes scaled down images look a little crisper|
|cc = canvas colour||hexadecimal colour value (#ffffff)||Change background colour. Most used when changing the zoom and crop settings, which in turn can add borders to the image.|
|ct = canvas transparency||true (1)||Use tr|
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||Posição centro (padrão).|
|tr||Alinhar no topo à direita|
|tl||Alinhar no topo à esquerda|
|br||Alinhar fundo à direita|
|bl||Alinhar fundo à esquerda|
|l||Alinhar à esquerda|
|r||Alinhar à direita|
An example of this in use would be:
TimThumb Proportional Scaling
Moving the crop position used to be the most requested TimThumb feature – but then I added it, and so something else had to step up and replace it.
The next most requested feature is proportional image scaling. To be honest, this feature request had me confused for a while, I just couldn’t understand what people were asking for. TimThumb already had the ability to scale images proportionally, simply by supplying a single size parameter. However what, it turns out, was wanted – was being able to scale down the image so that the image remains in proportion, and it fits into the required dimensions – adding borders where necessary.
Proportional Image Scaling
Usage is simple. The mysterious zc (Zoom & Crop) parameter comes into action, simply give it the value of 2 and it will apply the borders as required.
zc = Zoom & Crop
The zc parameter was introduced to TimThumb about 3 months after it was first published. The reason for the inclusion is that the scaling in the original version was purely scaling, there was no cropping. This meant that images could end up severely distorted.
When we fixed this
feature bug the zc parameter was introduced. The idea being that existing websites would continue to work as they were. As time went on it seemed to be less and less relevant, until it got to the stage where I was considering removing it entirely.
With the new cropping modes this thought has ended. I have added some new scaling modes, as described below.
|0||Resize to Fit specified dimensions (no cropping)|
|1||Crop and resize to best fit the dimensions (default)|
|2||Resize proportionally to fit entire image into specified dimensions, and add borders if required|
|3||Resize proportionally adjusting size of scaled image so there are no borders gaps|
When I talk about image filters I mean the types of effects you can get in Photoshop or most other image editors. Things like altering brightness and contrast, and blur or emboss. All this functionality is included in TimThumb.
The functionality is actually the implementation of a single PHP function called imagefilter. For more details you can check out the imagefilter documentation on php.net.
f – image filters
The filters are controlled through the ‘f‘ query variable. You give the parameter a series of characters and it converts them into different effects.
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:
It’s probably easier to understand if you see it in practice so now would be a good time to view the demos.
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.
Multiple Filters at once
To make this super flexible I thought it would be good if I could chain the filters together to use multiple filters on a single image. To do this simply separate multiple filters using a pipe character and then pass the whole lot to TimThumb. For example the values below would apply a brightness of 10 to a grayscale image:
You can see some examples of multiple filters being used on the demo page.
s - sharpen
One little extra I recently added is a sharpen filter. This is separate to the other filters above as it doesn't use the imagefilter PHP command. All you have to do is add an s=1 value to the TimThumb query string.