jeremiahx|com J.J. Merrick on Facebook jeremiahx on Twitter

Creating nice Square Thumbnails with CFIMAGE

I recently worked on a project that allowed users to upload images and I then needed to create different versions of the image... a 1200 x N, 430 x N, and 75x75... wait it has to be square!? Yeah that was my first thought, nah that won't work

What about stretching it?

Stretched Image

Nope that looks like junk

What about white bars ALA Your DVD player?

White Bars

Image is too small and they want the image to fill up the whole square.

hmm how about a nice sized-down-then-chopped image?

square.gif

yeah that would look cool.

So how do we do it?

First we need to read the image from the upload and put it into a variable

PLAIN TEXT
CFM:
  1. <cffile action="upload" filefield="form.uploaded_image" destination="#expandpath(" nameconflict="makeunique">
  2.  
  3. <cfimage action="read" name="img1" source="#cffile.serverDirectory#/#cffile.serverfile#">

Next we want to create an image that is 1200xN and an image that is 430xN and write it to our image directory.

PLAIN TEXT
CFM:
  1. <!--- Create the full size image 1280 x N --->
  2.  
  3. <cfif img1.height GT img1.width>
  4.     <cfif img1.width GTE 1024>
  5.         <cfset ImageResize(img1,'1024','')>
  6.     </cfif> 
  7. <cfelseif img1.width GT img1.height>
  8.     <cfif img1.width GTE 1280>
  9.         <cfset ImageResize(img1, '1280','')>
  10.     </cfif> 
  11. </cfif>
  12.  
  13. <cfset ImageWrite(img1, "#expandpath("/images")#\img-#insertImage.newImageID#-fullxfull.jpg")>
  14.  
  15.  
  16.  
  17.  
  18. <cfif img1.height GT img1.width>
  19.         <cfset ImageResize(img1,'430','')>
  20. <cfelseif img1.width GT img1.height>
  21.         <cfset ImageResize(img1, '430','')>
  22. </cfif>
  23.  
  24. <cfset ImageWrite(img1, "#expandpath("/images")#\img-#insertImage.newImageID#-430xN.jpg")>

The fun part comes next. We want to create the thumbnail and do all kinds of math to figure out how to crop. That is where the "FromX" and "FromY" variables comes in. It figures out where the upper left hand corner is then it walks its way in to 38 pixels and does a crop. This is how we now if it is portrait or landscape and where to crop it. After that we save the image and we are done!

PLAIN TEXT
CFM:
  1. <!--- Create the thumbnail 75 x 75 --->
  2.  
  3. <!--- resize image to 75 pixels tall if width is greater then height --->
  4. <cfif img1.height GT img1.width>
  5.  
  6.     <cfset ImageResize(img1,'75','')>
  7.     <cfset fromX = img1.Height / 2 - 38>
  8.     <cfset ImageCrop(img1,0,fromX,75,75)>
  9.  
  10. <!--- resize image to 75 pixels wide if height is greater then width --->
  11. <cfelseif img1.width GT img1.height>
  12.  
  13.     <cfset ImageResize(img1,'','75')>
  14.     <cfset fromY = img1.Width / 2 - 38>
  15.     <cfset ImageCrop(img1,fromY,0,75,75)>
  16.  
  17. <cfelse>
  18.     <cfset ImageResize(img1,'','75')>
  19.     <cfset ImageCrop(img1,0,0,75,75)>
  20. </cfif>
  21.  
  22. <cfset ImageWrite(img1, "#expandpath("/images")#\img-#insertImage.newImageID#-75x75.jpg")>

Nice easy way to create cool looking square thumbnails.

J.J. Merrick on December 4, 2007 | Filed Under ColdFusion

12 Comments

Glyn  on February 8th, 2008

Thank you for this example, i was having the same issue.

J.J. Merrick  on February 9th, 2008

Thanks!

Glyn  on February 11th, 2008

Just to point out anything passed 114 x 114 would not resize correctly. I solved this by the following…

<cfset mysum = myImage.Width / 38?

My math is not the best but working out how many times 38 goes in to the width means I can resize the thumb dynamic to what I want.

Glyn  on February 11th, 2008

sorry whole code would not post

J.J. Merrick  on February 11th, 2008

Hey Glyn, submit me the via my contact us form and I will post it as an edit. Thanks!

Demian  on May 6th, 2008

I’ve modified your code to make it work with all possible thumbnail sizes by doing the following:

Where thumbnailWidth is the max width you want (i.e. 75, 150, 114).

Demian  on May 6th, 2008

D’OH! Let me try that code post again…

<cfset offSet = ceiling( thumbnailWidth / 2 ) />

Also, offSet is your fromX or fromY.

J.J. Merrick  on May 6th, 2008

Thanks Demian! It’s nice to know that old posts written months ago are still helpful to people!

David Evenson  on June 4th, 2008

Thanks for the code. Saved me some head scratching.

T Ready  on July 9th, 2008

How can this be done in CF MX 7??

J.J. Merrick  on July 9th, 2008

@t Ready Actually yes it can by using the core java image manipulators. Rick Root has a CFC called image.cfc that allows you to do many of the same commands

http://www.opensourcecf.com/imagecfc/

Joshua Rountree  on November 15th, 2009

Thanks J.J. helped me a ton!

Leave a Comment