Circular Thumbnails with ColdFusion / CSS

Thumbnails were always square, at least in my applications. But thumbnail images in different shapes popping up here and there nowadays, I decided to give that a try too. It is quite easy and looks quite elegant. This can be done with CSS alone or with few line of CFM.

Here is my large image and I created a “face recognized” square thumbnail using ColdFusion.
 

This web page’s background is white and keeping that in mind, I create a ping-24 image with transparent center and slightly shaded circular frame using PhotoShop. You can download the PSD file here and modify it to match different background color.


In ColdFusion first I created a blank transparent canvas and pasted my old square thumbnail in the middle, next the new circular frame on top of it. 3 Lines. That is all. 

   1: <cfset canvous = ImageNew("",178,178,'argb',"")>

   2: <cfset ImagePaste(canvous, ImageNew(ExpandPath('images/test.JPG')) ,13,13)>

   3: <cfset ImagePaste(canvous, ImageNew(ExpandPath('images/roundframe.png')) ,0,0)>

   4: <cfimage source="#canvous#" action="writeToBrowser">

Show/Hide Line Numbers . Full Screen . Plain

Here is the result.

This can be also done using simple CSS without any server side processing. All you have to do is, insert the thumbnail image as the centered, no-repeat background of a DIV and place the transparent circular frame image on the top.

   1: <div style="width:178px; height:178px; background-image:url(images/test.JPG); background-position:center; background-repeat:no-repeat">

   2: <img src="images/roundframe.png">

   3: </div>

Show/Hide Line Numbers . Full Screen . Plain

Here is CSS example: