Ben
Ben is a lifelong Nintendo fan who likes to build websites, and make video games. He buys way too much Lego.
Using TimThumb Part 3: Image Filters
So far I have documented the basic TimThumb functionality, and how to resize images that are on external domains and now things can get interesting. In this part I will talk about some of the features that have been available for a while, but never officially documented – Image Filters.
Image Filters
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:
f=1,10
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:
f=2|1,10
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.
Coming Up
I think that this is a really cool feature, it opens up loads of potential for creative use in image galleries and blogs. In fact if you are an Elemental WordPress theme user, then you already have the ability to use grayscale images on your websites using the theme control panel. However next week there will be more. I will be publishing code for moving the crop position around – which is the single most requested feature there has been.
That’s awesome, thanks for sharing. Looking forward to the next one..
Killer resource! Thanks Ben 🙂
Hey, nice work! i really appreciate but cant download the script from google code…
Thanks a lot 🙂
Hi Matias – you can get the code here: http://timthumb.googlecode.com/svn/trunk/timthumb.php
thanks a lot, Ben! i’m testing it now 🙂
Super Awesome Resource Ben. Really Great Job.
Wow, I’ve been using this script for ages and I never knew this!
Wow! Great script. Thanks for description!
Ben,
Looking forward to being able to crop the thumbnails from the top center! Hoping to read about it soon. I modified timthumb using some code I found on studio-xl.com, but it made the image go all black… in fact, I wanted to use the f=2 option to turn my thumbnails to grayscale, but that also results in a black image. Any clues on how to fix that one?
Thanks!
The IMG_FILTER_COLORIZE doesn’t accept the alpha variable. A bug?
could be – I’m not sure. Will need to have a look.
hey .. first of all .. its brilliant .. and secondly what about water mark is that possible .. or will it be ..
Excellent bit of coding, use it on several sites. Keep up the good work! Thanks Ted.
Thank you so much for this wonderful script! It works great and I’m having such fun with it. Just one feature request: please, oh please, could you provide a more gentle sharpening option (e.g. s=2), or the ability to add strength arguments to the sharpening filter? The sharpening filter is extremely useful but the default is too strong for my images. I would be eternally grateful!
I agree and second this request – the default sharpening is way too strong.
Hi,
Great script. One tiny issue, however. The value of the `a` parameter in the ´rgba´of the colorize function does not have any effect…
Regards,
James
Hey there – thanks for the report. If you could post bugs on the Google code site then I will have a record of them and be more likely to remember to sort them out 🙂
Hi,
I’ve been stupid … the value of the `a` parameter in the ´rgba´of the colorize function does have effect… on png images (I was using jpg).
Sorry.
ah ha – glad you worked it out!
Hi Ben, I’ve tried to edit the zc in my slider.php file, but nothing changes.
<img class="nivim" src="/timthumb.php?src=&h=300&w=960&zc=2″ alt=”” title=””/>
am I doing something wrong?
You don’t have a value set for the src in that image so it won’t resize anything 🙂
Hi Ben, do you know if it is possible to add/remove effect only hen mouse hover? …like in css attribute “:hover”
Hi – I think the easiest way to get this to work would be to use some jQuery and css. If you used CSS alone then you’d have to write the styles with your cms, which gets a bit messy.
Hi Ben,
I am applying filter option it is automatically reside it. why please help
filter image:
http://heatwavesupply.com/slider/timthumb.php?src=images/thumbs/thumb6.jpg&f=3,60
Actual image:
http://heatwavesupply.com/slider/images/thumbs/thumb6.jpg
Ben,
Thanks Ben I made it.
Hi,
I’ve got timthumb.php inside my WordPress template-folder and it processes all the thumbnails fine, just right out of the box.
After that i tried to figure out how to apply the “greyscale filters to/on my thumbnails” so i ended up here after 2 hours of googling and at least a minimum of 4 cups of coffee :D.
I am not a coder nor a programmer but i hope you can give me some directions to get this greyscale filter work.
Thank you in advance 😀
keesh
Hi Ben,
I have a problem:
I want to combine the greyscale and the colorize, but when I add colorize, my picture wins so much brightness, So I think, I will add negative brightness for egalize but no, I loose the contrast, so I added contrast to overcome the problem but it’s impossible, the result is very bad matter the combinations.
That’s an issue? Why colorize add so much brightness? Why the alpha change nothing?
Just for you give the idea, use this: f=5,158,177,181,0
Thanks for your return
Hi, just wanted to let you know the “view the demos” link doesn’t work.
Bye