Create Thumbnail Images with Rounded Corners

Posted in PHP

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.

Rounded Corner Thumbnails

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.

Tags:

Share


Subscribe to Full RSS Feed

RSS FeedIf 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.

11 Responses (Add Your Comment)

  1. Mr.Satbir Singh , i really laud your post. I have used it in my various webpages of my site and it seems very nice. Thanks to you again.

  2. Dré says:

    This is one way to do it, u could also use “border radius”.
    greats

  3. Jason says:

    @Dre: Actually, CSS border-radius will NOT work on img elements, only on elements you give the style background-img with a path to said img. Also, if you were to use border-radius to give rounded corners to the object, you’d need to use -moz-border-radius, -webkit-border-radius and -khtml-border-radius because that’s the only way to currently do it…and those will only work on Firefox, Safar/Chrome and Konqueror respectively.
    You can use some JS to get it to work for IE, since IE doesn’t have native support…but for imgs, you can’t; have you tried?

    • Maco says:

      actually one can…

      Wrap the IMG in a {span} or {div} and append the border-radius’es to it, then set the wrapping element to overflow:hidden;.

      If you don’t like the non-semantic wrapping elements you can use a simple jQuery commend to wrap some (or all) IMG-elements in a {span class=”round-corner”} for example


      Greetings.
      Maco
      PS: {en} = <en> =

  4. Rahul says:

    Hello

    This is a good example but if i want to save this image then how could i do that
    Any comment would be beneficial for me

Comments are closed for this post.