Styling The ColdFusion 8 WriteToBrowser CFImage Output : Kinky Solutions : A Student's Perspective by Ben Nadel

Styling The ColdFusion 8 WriteToBrowser CFImage Output

Posted July 20, 2007 at 4:22 PM

The ColdFusion 8 has some amazing functionality, one feature of which is being able to write an image to the browser as an inline IMG tag:

Launch code in new window » Download code as text file »

<cfimage
action="writetobrowser"
source="./mud_monster.jpg"
/>

The problem with this is that it writes the IMG tag to the browser and doesn't give you any ability to add your own IMG attributes, including CSS or STYLE. This may or may not be a problem for people, but it would be nice to have access to the tag data.

This dilemma is actually fairly easy to overcome. The CFImage tag, in addition to creating the image object and saving to the file system, is really just writing to the page's content buffer, which is then flushed to the client along with everythign else. As such, we can intercept the content buffer write, modify it in any way we want, and then write the new IMG tag to the page's content buffer.

I have created ImageWriteToBrowserCustom(), a ColdFusion user defined function that takes your ColdFusion 8 image object and additional attribute values and writes the IMG tag for you. Here's what it might look like:

Launch code in new window » Download code as text file »

<html>
<head>
<title>ColdFusion 8 WriteToBrowser() Modification</title>
<style type="text/css">
img.frame {
border: 2px solid #660000 ;
}
</style>
</head>
<body>
<cfimage
action="read"
source="./mud_monster.jpg"
name="objImage"
/>
<cfset ImageWriteToBrowserCustom(
Image = objImage,
Alt = "Mud Monster - She So Crazy!",
Class = "frame",
Style = "border-width: 10px ;"
) />
</body>
</html>

Notice that ImageWriteToBrowserCustom() is taking the image that we read in via CFImage as well as the ALT, CLASS, and STYLE attributes. If we now look at the source code of the rendered page, we will get the following image tag (I have wrapped it for easy viewing):

Launch code in new window » Download code as text file »

<img
src="/CFFileServlet/_cf_image/_cfimg527766746223564434.PNG"
alt="Mud Monster - She So Crazy!"
class="frame"
style="border-width: 10px ;"
/>

The image itself looks like this:

The user defined function that accomplishes this is actually fairly simple and just traps the IMG tag output using ColdFusion's CFSaveContent tag:

Launch code in new window » Download code as text file »

<cffunction
name="ImageWriteToBrowserCustom"
access="public"
returntype="void"
output="true"
hint="Writes the image to the browser with additional attributes.">
<cfargument
name="Image"
type="any"
required="true"
hint="The ColdFusion image object that you are writing to browser."
/>
<cfargument
name="Alt"
type="string"
required="false"
default=""
hint="The ALT attribute value to apply to the image."
/>
<cfargument
name="Class"
type="string"
required="false"
default=""
hint="The CSS class to apply to the image."
/>
<cfargument
name="Style"
type="string"
required="false"
default=""
hint="The STYLE attribute value to apply to the image."
/>
<cfargument
name="Height"
type="string"
required="false"
default=""
hint="The HEIGHT attribute value to apply to the image."
/>
<cfargument
name="Width"
type="string"
required="false"
default=""
hint="The WIDTH attribute value to apply to the image."
/>
<cfargument
name="Border"
type="string"
required="false"
default=""
hint="The BORDER attribute value to apply to the image."
/>
<cfset var LOCAL = {} />
<!---
Write the image to the browser. This is really just
creating the image and then writing to the buffer.
All we have to do is intercept the buffer write.
--->
<cfsavecontent variable="LOCAL.Output">
<cfoutput>
<cfimage
action="writetobrowser"
source="#ARGUMENTS.Image#"
/>
</cfoutput>
</cfsavecontent>
<!---
First, delete any existing attributes that we might
be using (so that we can just add new ones).
--->
<cfset LOCAL.Output = LOCAL.Output.ReplaceAll(
"(?i) (alt|class|style|height|width|border)=""[^""]*""",
""
) />
<!---
Now that we have an image with Just the SRC
attribute, we can go about adding our attributes.
First, chop off the trailing slash.
--->
<cfset LOCAL.Output = LOCAL.Output.ReplaceFirst(
"\s*/?>\s*$",
""
) />
<!---
Loop over the arguments to see if we need to
add them to the tag.
--->
<cfloop
index="LOCAL.Key"
list="alt,class,style,height,width,border"
delimiters=",">
<cfif Len( ARGUMENTS[ LOCAL.Key ] )>
<!---
Append this argument to the output and a
key-value attribute.
--->
<cfset LOCAL.Output &= (
" " &
LOCAL.Key &
"=""" &
ARGUMENTS[ LOCAL.Key ] &
""""
) />
</cfif>
</cfloop>
<cfset WriteOutput( LOCAL.Output & " />" ) />
<cfreturn />
</cffunction>

I am sure (*hoping*) that eventually ColdFusion 8 will give us the ability to control the attributes of the rendered IMG tag, but for now, this seems like a decent solution. The one thing I don't like about it is that it requires the Output attribute of the CFFunction tag to be true; I really don't like having output in a function call, but I also didn't want to return a value since CFImage / WriteToBrowser doesn't return any values (and I wanted to keep in sync with that style.

Download Code Snippet ZIP File

Related Blog Entries

Boyan Kostadinov's cfSnippetExecutor For ColdFusion Testing

Lenny And Bo, ColdFusion Programmers (Vol. 27)

Adobe ColdFusion 8.0.1 Update - Helping Programmers To Be Signifanctly Less Girlie - Download ColdFusion 8 Update 8.0.1 Now.

Reader Comments

While I didn't do this in the demo, this could probably be made more flexible by not actually defining the argument tags, but rather looping over the arguments and created name-value attributes for anything NOT named "Image". This way, you could just about add any attribute you wanted to (ex. onclick, onload).

Posted by Ben Nadel on Jul 20, 2007 at 4:46 PM

Thats a nice idea and solution Ben. We can not make any change in this function now. but certainly in future.

Posted by Rupesh Kumar on Jul 21, 2007 at 2:58 AM

@Rupesh,

Yeah, not a huge deal, but down the road, it would definitely be cool. Especially since I think I remember saying Ben Forta saying that all the AJAX stuff produces XHTML compliant code, and I think technically, all images need height/width attributes to be "standards compliant" (maybe).... not that that really matters to me so much, but just another selling point.

Posted by Ben Nadel on Jul 21, 2007 at 10:44 AM

Don't forget that there are often many more attributes that could be used (like id="uniqueVal"). A simple solution might be to offer an attribute called xcode (or whatever) where it just adds the entire value to the resulting img tag as attribute=value pairs.

example:

xcode='alt="My IMage" id="myImage" class="imgRight"'

Just a thought.

Posted by Jeff Coughlin on Aug 18, 2007 at 3:44 AM

Yes, definitely a good idea.

Posted by Ben Nadel on Aug 18, 2007 at 4:56 PM

Post Comment | Ask Ben

Styling The ColdFusion 8 WriteToBrowser CFImage Output : Kinky Solutions : A Student's Perspective by Ben Nadel