Copy link to clipboard
Copied
Hi everyone,
I have created a Blog page on our site and am setting up a page for anyone in the company to update the blog with some text and an image.
Does anyone know how to set up code so when the Browse button is clicked that it will resize the image automatically to what I want it to be with the pixel size and file size? I’m thinking having it be 200 pixels wide and height doesn't matter. Maybe have the file size at 4K or so. It would be like Facebook when you upload a large file image, but it re-sizes it automatically.
We have CF version 7, so I can't use the CFimage code that's in 8 and 9. I've found something called imageCFC.resize(), but I don't understand how to use this or incorporate this into my code.
This is what I have on my pages now just to upload an image file:
Add Page:
<td><input type="file" name="Image1" id="Image1"></td>
Add Action Page:
<cfif isdefined("form.Image1")>
<cffile action="upload" filefield="Image1" destination="#ExpandPath("BlogPhotos/")#" nameconflict="overwrite">
<cfset uploadedfile = "test_file\#file.serverfile#">
<input name="Blog_Image" type="hidden" value="#file.ServerFile#">
</cfif>
<cfquery Datasource="#application.DataSource#">
Insert Into Blog (Blog_Image)
Values ('#file.ServerFile#')
</cfquery>
I then just display the image on my blog page as an image src file.
Thanks.
Andy
I ended up using the ImageCFC code and was able to get it to work. I incorporated it into my upload file also so when an image is uploaded, it gets re-sized right away to the dimensions I want it to be. Here's the code that uploads the image into the correct folder and then also re-sizes it right away:
<cfif isdefined("form.Image1")>
<cffile action="upload" filefield="Image1" destination="#ExpandPath("BlogPhotos/")#" nameconflict="overwrite">
<cfset uploadedfile = "test_file\#file.serverfile#
...Copy link to clipboard
Copied
I hate to see posts slowly sinking to the bottom of the page with no replies, so I'll take a stab.
Does the server you're hosted on have ImageMagick? It's a pretty popular package on shared hosting accounts (for PHP at least - not sure about CF). If not, it's a free download.
I think you can run ImageMagick from within CF, assuming the commands you need to run it are not restricted.
http://stackoverflow.com/questions/751477/how-to-work-with-imagemagick-from-coldfusion
You could also try ImageCFC
http://www.opensourcecf.com/imagecfc/
Good luck!
Copy link to clipboard
Copied
Breakaway Paul,
Thanks for writing back. I have no idea if our Cold Fusion server has ImageMagick on it or not. How do I install it on the server exactly?
I just tried running this code for imageCFC on a cfm page:
<cfset imageCFC = createObject("component","image")>
<cfset imgInfo = imageCFC.scaleWidth("", "BlogPhotos/C11IP139.jpg", "BlogPhotos/tn_C11IP139.jpg",100)>
<img src="C11IP139.jpg" width="100" alt="resized image"/>
But the error I receive back says:
What does this mean exactly? Does imageCFC have to be downloaded to the server in order to use the code above?
Andy
Copy link to clipboard
Copied
Well I've never used ImageCFC so I'm not really sure how it works, but that sounds like a pathing problem (i.e. your code doesn't know whetre to find image.cfc).
ImageCFC has its own forum for debugging and usage help:
http://www.opensourcecf.com/forums/threads.cfm?forumid=720D0ACD-09C9-EA19-9C27A91B9F0B7B7A
Imagemagick would probably have to be installed by the server admin.
Copy link to clipboard
Copied
So Imagemagick does not just get put as a folder under the root of our web site? It has to actually be installed on the server, correct? Can you send me an example of some code of how to re-size an image with Imagemagick?
Andy
Copy link to clipboard
Copied
I ended up using the ImageCFC code and was able to get it to work. I incorporated it into my upload file also so when an image is uploaded, it gets re-sized right away to the dimensions I want it to be. Here's the code that uploads the image into the correct folder and then also re-sizes it right away:
<cfif isdefined("form.Image1")>
<cffile action="upload" filefield="Image1" destination="#ExpandPath("BlogPhotos/")#" nameconflict="overwrite">
<cfset uploadedfile = "test_file\#file.serverfile#">
<input name="Blog_Image" type="hidden" value="#file.ServerFile#">
<!--- Imagecfc code re-sizes the image and saves it into the BlogPhotos folder at 200 pixels wide. --->
<cfset imagecfc = createObject("component","imagecfc.image")>
<cfset imgInfo = imageCFC.scaleWidth(
"",
"http://www.ironwoodelectronics.com/blog/BlogPhotos/#file.serverfile#",
"\\Maple\Ironwoodelectronics\blog\BlogPhotos\#file.serverfile#",
200)>
</cfif>
Andy
Copy link to clipboard
Copied
Nice job! Glad you got it working.