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.
![](http://cflove.org/warehouse/filemanager/PostImages/Face_Detection/face_crop_7.JPG)
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.
![](http://cflove.org/warehouse/filemanager/PostImages/Face_Detection/roundframe.png)
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">
Here is the result.
![](http://cflove.org/warehouse/filemanager/PostImages/Face_Detection/Circler_Thumbnail_Sample.png)
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>
Here is CSS example:
Posted by Saman W Jayasekara at Monday 20 May 2013 02:28 PM
.
Image Processing
.
ColdFusion
![](http://www.gravatar.com/avatar/849f4b9df883d32bf009c72b9e8b7dac?default=https://cflove.org/images/gravatar.png&s=30)
Jeff
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.
![](http://www.gravatar.com/avatar/849f4b9df883d32bf009c72b9e8b7dac?default=https://cflove.org/images/gravatar.png&s=30)
Jeff
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!