“A picture is worth a thousand words” is a quote that all of us will agree 99 out of 100 times. Today on internet we search for all types of images and in various sizes. So how come we get the same images in various sizes. Well the simple answer would be manually re-sizing and uploading the images. But with the power of PHP coming into play we can generate thumbnails on the fly with php, which means that same image can be viewed in different sizes and that also without re-sizing it manually.
What is thumbnail?
In Computers, a thumbnail is a reduced-size version of a picture. which is used purposely on web pages to reduce bandwidth and download time. Also thumbnail are used where you have a pictures of very high resolution or a very large image, so just displaying a small part or a re sized version of the picture can help user to quickly have a look at the image.
Generating thumbnail using timthumb library
TimThumb is a simple, flexible, PHP script that resizes images. The author of this awesome library is Ben Gillbanks. Using this library you can resize, crop, filters and even scale the images. Timthumb is not a perfect library there are some bugs but it gets sorted out from time to time by their authors, all in all it’s a very nice and simple library to use and generate thumbnails.
Requirements before running this script
Before using this script make sure your web server support PHP and GD image library. You also need to create a folder name cache and set the permission to 755.
Enough talking! Let’s generate thumbnails with php
Before we get started make sure the timthumb.php file is in your server. Also in my demo I have a sample image whose height and width are 512px X 512px (You can use bigger image if you want).
<img src="images/img1.jpg" alt="no image found" />
Now create a resized version of the same image lets say width 100px and height 100px. set w and h paramenter to 100.
<img src="timthumb.php?src=images/img1.jpg&w=100&h=100" alt="no image found" />
For creating a low quality image just put q parameter within 0-100
<img src="timthumb.php?src=images/img1.jpg&w=100&h=100&q=50" alt="no image found" />
When you have a transparent image(png mostly) you can choose to show background or leave it transparent. You then have to change ct to 0 to show background color and 1 to use transparency.
<img src="timthumb.php?src=images/logo.png&w=150&h=100&ct=0" alt="no image found" />
If you are unsure about the image size and want to automatically best fit within your given height and width set zc to 2.
<img src="timthumb.php?src=images/img1.jpg&w=150&h=100&zc=2" alt="no image found" />
You can set the alignment of the cropped image position to be displayed like top, bottom, left, right, top left etc. Use a parameter with their respective values.
<img src="timthumb.php?src=images/img1.jpg&w=180&h=100&a=t" alt="no image found" />
Also a very least used paramenter is the filter, with filter you can control brightness, contrast, turn image to grayscale, colorize it and many more. Just use the f parameter to set the action.
<img src="timthumb.php?src=images/img1.jpg&w=100&f=2" alt="no image found" />
Check out the Timthumb Parameters list
||Values||What it does
|src||Source of the image||Your image path||Sets the images to be used.|
|w||width||Must be a positive number||Resize to the given width|
|h||Height||Must be a positive number||Resize to the given height|
|q||Quality||0-100||Sets the image quality but don’t go below 40|
|zc||Zoom/crop||0,1,2,3||resize or crops the image read more.|
|a||Alignment||c, t, l, r, b, tl, tr, bl, br||Sets the croping position.|
|f||filters||too many||Let’s you to set brightness, contrast and many more. read more|
|ct||Canvas Transparency||0,1||Use transparency and ignore background colour|
|cc||Canvas Color||hexadecimal color value like(#000000)||Change background colour. Most used when changing the zoom and crop settings, which in turn can add borders to the image.|