Ever used CFIMAGE with the “writeToBrowser” action? A nifty way to display an image you've read into memory, or maybe made with ImageNew. However, you may have found yourself looking at the source code and going ARG! when you spotted that empty alt tag.
<cfset myImage = ImageNew("", 100, 100, "rgb", "##000033") />
<cfset sText.font = "Lucida Sans Regular" />
<cfset sText.style = "bold" />
<cfset sText.size = 14 />
<cfset ImageSetDrawingColor(myImage, "white") />
<cfset ImageDrawText(myImage, "Hello World!!", 5, 50, sText) />
<cfimage action="writeToBrowser" source="#myImage#" />
Get's us:
When you view the source, you see something like:
<img src="/CFFileServlet/_cf_image/_cfimg-9138836666536180171.PNG" alt="" />
Not very good for accessibility at all. And what if you want to add a style class or ID to that image for CSS or JS purposes? If you just look in the “official” docs, you might feel like too bad, so sad because they don't even mention it at all!
Fortunately, that isn't true, thanks to a feature of this particular tag. Similar to what you'll find with the various form tags, CFIMAGE will basically pass any “extra” parameters to stick on the tag to the resulting img src. So if you need to do an alt, a title, a style, whatever, just tack it on to your tag. I.E. So with the same image, and using a different CFIMAGE tag:
<cfimage action="writeToBrowser" source="#myImage#" alt="I'ma saying Hello World!" title="I'ma saying Hello World!" style="border: 5px red solid" />
We get:
And the view source shows us something like:
<img src="/CFFileServlet/_cf_image/_cfimg-7816565574866006559.PNG" style="border: 5px red solid" alt="I'ma saying Hello World!" title="I'ma saying Hello World!" />
Nice, eh? 🙂