Dec
04
Creating nice Square Thumbnails with CFIMAGE
Filed Under (ColdFusion) by J.J. Merrick

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

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.

Comments

Glyn on 8 February, 2008 at 10:06 am #

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


J.J. Merrick on 9 February, 2008 at 10:52 am #

Thanks!


Glyn on 11 February, 2008 at 5:16 am #

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 11 February, 2008 at 5:18 am #

sorry whole code would not post


J.J. Merrick on 11 February, 2008 at 3:58 pm #

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


Demian on 6 May, 2008 at 9:12 am #

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 6 May, 2008 at 9:13 am #

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 6 May, 2008 at 9:16 am #

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


David Evenson on 4 June, 2008 at 2:59 pm #

Thanks for the code. Saved me some head scratching.


Post a Comment
Name:
Email:
Website:
Comments: