Recently I needed to pull images dynamically from a network drive, and be able to use JQuery lightbox with them. So I came up with a small function to assist me.
I wanted to use cfimage to accomplish this, but all I really wanted was the temporary filename ColdFusion generates to display the file to the screen. That way I could use it with regular HTML tags.
First, I performed a cfimage “Read” on the network drive location where the image was stored.
1 | <cfimage action="read" source="#APPLICATION.uploadPath#\#uploaded_photo#" name="newPhotoName" /> |
“APPLICATION.uploadPath” is a variable I use to store the actual file path where the images are stored.
“uploaded_photo” is the database field that contains the filename.
“newPhotoName” will now be assigned to something we really can’t make sense of. It will look something like this, “coldfusion.image.Image@29ff90bf”. So what do we do with it?
Lets pass this string into our function.
1 | <cfset newPhotoName = getCustomImg(newPhotoName) /> |
1 2 3 4 5 6 7 8 9 10 | <cffunction name="getCustomImg" access="public" returntype="string" output="false"> <cfargument name="image" type="string" required="true" /> <cfset var cfFileURL= "" /> <cfsavecontent variable="cfFileURL"> <cfimage action="writetobrowser" source="#ARGUMENTS.image#" /> </cfsavecontent> <cfset cfFileURL = replace(cfFileURL, '<img src="', '') /> <cfset cfFileURL = replace(cfFileURL, '" alt="" />', '') /> <cfreturn trim(cfFileURL) /> </cffunction> |
OK, so what does this function do?
What I’m really after here is the full URL path to the temporary ColdFusion image. So I do a “cfsavecontent” to capture the output as variable I can parse later.
Inside of my “cfsavecontent“, I use the “cfimage” tag with the action “writetobrowser“. This will actually give me the HTML markup for the image to display to the browser. You’ll wind up with something like this:
1 | <img src="http://www.your-url.com/CFFileServlet/_cf_image/_cfimg-4341467501479857784.PNG" alt="" /> |
Next, our function is going to strip out all of the HTML we don’t want.
1 2 | <cfset cfFileURL = replace(cfFileURL, '<img src="', '') /> <cfset cfFileURL = replace(cfFileURL, '" alt="" />', '') /> |
Now we have a fully usable image path we can use however we like. “http://www.your-url.com/CFFileServlet/_cf_image/_cfimg-4341467501479857784.PNG”
Finally, just use your variable in your HTML markup.
1 | <a href="#newPhotoName#" rel="lightbox"><img src="#newPhotoName#"/></a> |
Hope this helps!
