Got the image stored in the database now, sweet. Next and final step is to get it back out. It's really as simple as resizing it to what I want and cfimage'ing it to the browser.

This will resize the image to 200 pixels wide, give it a border, and write it to the browser as a jpg. But a few problems. What if it's a skinny bit of art? If it's only 150 pixels to start with and 800 pixels tall, I don't want to make it bigger. How do I set an alt tag to the img tag that. To solve some of these, I hit up my man Ben Nadel's blog, doing a search for "cfimage". I made some changes to his ImageWriteToBrowserCustom() function. In this version... The BORDER argument will add a border with Image functions, instead of styling the image. A watermark will be added if you want. The image size will be bound by the width and height given, rather than resizing to both arguments. And a little JavaScript will be added for later use.

Blah blah blah, bunch of code. There's some easy enhancements that could be made but for the purposes of this project, they weren't needed. The watermark pulls from request.watermark, would be better if that were passed in. Would be nice if there were another argument to set if the resize is done as a bounding box or absolute resizing. This code assumes the image passed in will always be larger than what ends up being printed. Adding the watermark could be split into another function to tidy this up some. Should resize the watermark to fit the image given...

But using Ben's function, we now have an alt attribute on the image tag in the generated HTML, hurrah! Now I have very consistent image generation across the few pages that need it. To put in an image with a watermark, borders, alt tag, resized as needed...

The code that's added to the image tag if arguments.Clickable is true is fun. I needed something like "click here to enlarge". So I put a larger version of the image (same tag as above with larger dimensions) in a cfwindow called myImage. Would have been slicker to use some JavaScript library that I just copy/paste into place. But I've been doing Flex for so long, I wanted this project to be all CF and all code that I fully understand.

Doing all this reminds me of the pre-CF8 days (for me that was 2-3 weeks ago). I have an image.cfc sitting in my webroot that can do all sorts of stuff to images using Java voodoo space magic. cfimage takes away the need for most voodoo space magic, but still would be nice to build up a library of image functions. One for adding a watermark. One for resizing in a bounding box. One for a few image transformations I regularly do (resize, watermark, AND border)...

CFIMAGE!! Woooo!!

I about 6 months behind on my ColdFusion, this was my first time to really use cfimage. So imagine my excitement. First, very simple form for selecting and uploading an image.

The action to be taken...

Step 1: Get the image into memory. This is done by using cffile, then cfimage to read it back out.

Step 2: Resize. A 1700 pixel wide image might get uploaded. But since it will never display 1700 pixels wide anywhere in the site, there is no need to save a 1700 pixel wide image.

At the end of this, the image is resized and sitting in variables.myImage, ready to be saved to the database. The field type in SQL Server 2k5 is "image"

Then through some CFC magic, this object ends up at a cfquery, where the image is defined as a CF_SQL_BLOB.

And there you go, the images are in the database. It looked a lot harder than it turned out to be.

Next: Getting the images out

For this art website, there are categories of art and there are pieces of art. If you're looking at some art in the Mackinac category, my options were

and of course the third is easiest to read and understand. That is to assume that any average web user ever looks at the URL. The third is called "search engine safe" (SES).

A Harbor Springs' Early Day

To accomplish this, you have to parse the URL string. In most web server environments, anything passed with and after the file name goes into the cgi.path_info variable. cflib.org has a parseSES() function, but it was wasn't exactly what I wanted. I wasn't passing name-value pairs in the URL, just values. Unless someone is hacking the URL, the category will always be first, then the art name. So I changed the parseSES() function to return the stuff passed in the URL as an array as well as the name-value pairs.

So on to the implementation! In Application.cfc, in the OnRequestStart() method, first thing is to call urlvars=parseSES(). From the length of the array of values returned in that, I know what the user's trying to do.

I went as far as querying for all the category and art details in OnRequestStart. This worked out well because then the category and art names were available when I printed the page title.

Next: Where to put images