Create Thumbnail Images with Rounded Corners
Mar 27th, 2009 - 11 Comments »
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.
Subscribe to Full RSS Feed
If you found this article useful, then consider subscribing to our RSS Feed or e-mail updates to stay updated with latest Web Design/ Development articles. You can also follow @webdevplus on twitter for latest updates.