Objective Bias

I've been working with Sava CMS lately and ran into an issue with how content images are displayed. First, let me be clear that I'm NOT talking about images that are uploaed via the integrated FCKEditor that Sava uses for content editing. Sava also lets you attach an image to a content node via an upload field when you're adding/editing content:

Sava automatically generates small, medium, and large versions of the image (sizes are configurable in the Site Settings). What would be the benefit of uploading an image here instead of directy adding the image within the WYSIWYG editor, you ask? Well, sometimes you really want to lock down the design of the site and just make it easy for content editors to just upload images for which will show up in pre-defined areas of the site template. Basically, this allows you to integrate the assiociated image into the site template where you can apply whatever styling you want instead of relying on the user to be able to apply consistent styling to the image across all the pages of the site using FCKEditor (which can be tricky for non-tech savvy users).

By default, Sava displays the medium version of the image when you view the page (or the small image on listing pages). When you view the source of the page, though, this is how the image is displayed:

<img src="/tasks/render/medium/?fileID=[file ID here]" class="imgMed" alt="[page title here]" />

So, it gets the image file by calling the index.cfm template in the "tasks/render/medium/" directory and passing in the fileID. What this essentially does is call a fileManager component which uses cfcontent to render the image, whether it was stored in the file system or directly in the database (the storage method is also configurable in the Site Settings). I decided that I wasn't too crazy about this. Being a front-end developer as well, I'm very particular about how images are presented. I'd prefer for the image itself to be linked to (not a template that serves the image), and I also prefer there to be height and width attributes.

So what I did to get around this is write my own image display method and placed it in my local contentRenderer.cfc component. Each Sava install can manage multiple sites and each site is equipped with one of these components. They extend a base contentRenderer component which is in the core Sava files and can come in really handy because you can add custom content display code to it without having to hack into the core files. Here is the method that I wrote:

 <cffunction name="dspContentImage" access="public" returntype="string" output="false"> <cfargument name="size" type="string" default="" hint="specify small or medium for those image versions" /> <cfargument name="siteID" type="string" default="#request.siteID#" /> <cfargument name="fileID" type="string" default="#request.contentBean.getFileid()#" /> <cfargument name="alt" type="string" default="#request.contentBean.getTitle()#" /> <cfargument name="baseDir" type="string" default="/savaWRM" /> <cfset var sep = "" /> <cfset var imagePath = "" /> <cfset var image = "" /> <cfset var strRet = "" /> <!--- Get the file extension for the image from the database ---> <cfset var ext = "#application.serviceFactory.getBean('fileManager').readMeta(arguments.fileID)['fileExt']#"> <!--- Check to see if there is an image file associated with this node ---> <cfif len(arguments.fileID)> <!--- Set up the underscore for the file name if the small or medium image is called ---> <cfif listContainsNoCase("small,medium",arguments.size)> <cfset sep = "_" /> <cfelse> <cfset arguments.size = "" /> </cfif> <cfset imagePath = "/tasks/sites/#arguments.siteID#/cache/file/#arguments.fileID##sep##arguments.size#.#ext#" /> <cfset image = imageRead(arguments.baseDir & imagePath) /> <cfset strRet = "<img src=""#imagePath#"" height=""#ImageGetHeight(image)#"" width=""#ImageGetWidth(image)#"" alt=""#arguments.alt#"" />" /> </cfif> <cfreturn strRet /> </cffunction>     

The only argument that needs to be passed in is "small" or "medium" for those versions of the image (by default, it will display the "large" version or the original version if it was smaller than the limit set in the site settings). Uploaded images are stored in the "/tasks/sites/[siteID]/cache/file" directory and are named for their file ID. The small and medium image versions have "_small" or "_medium" appended to the file name. After getting the file extension for the image from the database (and determining whether the small or medium versions was requested), the image is read in using the ImageRead() function. Then I use the ImageGetWidth() and ImageGetHeight() functions to get the values for the the height and width attributes for the image tag. By default, I use the page title for the alt tag of the image. So knowing the values for the path, file extension, width, height, and alt values, the image tag is then set up and returned.

So now, in my site template, I can do:

<cfoutput> #renderer.dspContentImage("medium")# </cfoutput>

...and I'll get a "normal" image tag:

<img src="/tasks/sites/mysite/cache/file/7234B4CD-56B6-4AF9-A513932FCC5A4240_medium.jpg" height="165" width="150" alt="Page Title" />

A couple of things to keep in mind: 1) this method as written will only work is your site is configured to store image in the file system, not the database. 2) since this method uses image functions, it will only work on CF8 or above (it was also tested on Railo 3 and should also work on Open BD). To improve performance, I'd also suggest you use this function in conjuction with Sava's CacheOMatic tag in your site template:

<cf_CacheOMatic key="#request.contentBean.getFileid()#" expiration="#createTimeSpan(0,1,0,0)#"> #renderer.dspContentImage("medium")# </cf_CacheOMatic>

Hopefully, this will help others working with Sava CMS. If you have any questions, ask away.