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:

Wednesday 19 June 2013 11:16 AM
Very nice, but it will cause accessibility problems because the circular frame is used as the image and the actual image is inserted with CSS (although I guess you could apply the ALT attribute to the frame rather than the real image). Why not specify the actual image in the HTML instead, and place the CSS-inserted frame on a Z-indexed layer above? That would be more semantically correct AND would meet the WCAG accessibility standards too, wouldn't it?
Wednesday 19 June 2013 06:04 PM
Yes you are correct. A layer on higher Z would do better than putting the image bellow. I think bit of jQuery you can make a standard function to cover them up.
Wednesday 19 June 2013 11:24 AM
I should have been more clear. My comment above is in reference to the CSS without server-side processing (which I would prefer for this application). Thanks for this great idea, Saman!