Create Thumbnail Images with Rounded Corners

If you have been using Facebook, then you might have noticed thumbnail images with rounded corners in new Facebook homepage. If you would like to have similar effect for thumbnails in your application, then here’s a quick and easy way to do it.

We’ll be using phpThumb, the open source PHP script to generate thumbnails on the fly.

Download and extract phpThumb to somewhere in your website folder. Now to use a rounded corner thumbnail of an image, simply use the img tag of HTML with src as

<img src=”phpThumb.php?src=test.jpg&w=200&h=150&fltr[]=ric|20|20&f=png” />

Adjust the path to phpThumb according to where you place the phpThumb files. Now we have passed 5 parameters to phpThumb.php namely,

1. src is the path to image file relative to phpThumb.php

2. w & h are width and height of the resulting thumbnail

3. fltr is used to tell phpThumb to generate rounded corner thumbnail with first numeric value as horizontal radius of the rounded corner and second as vertical radius in pixels.

4. The last parameter f is used to control the output image format of the thumbnail, namely png, jpg or gif. We are using png as it can render images with transparent corners which can be used on any background.

That’s it, you have cool looking thumbnails with rounded corners.