Smarter images in Jadu CMS

I’ve recently been looking at ways to enhance certain content types that we deliver through Jadu CMS, my focus at the moment has been through the use of images within content, whether that be News, Events, Documents or Homepages. This started with a re-alignment of the news section on the University of Leeds’ corporate website.

Multiple image sizes

We’ve traditionally been hampered by the fact that Jadu doesn’t yet have the ability to generate multiple image sizes from a single base image so if I wanted to have a large document level image, and a smaller thumbnail within a list view, I’d either have to resize with CSS which results in degraded image quality in some browsers, or have the editors upload multiple versions of each image to the CMS and figure some way to switch between these programatically. Neither of these options were desirable, so we built an image helper that, instead of inserting the ! element directly into the front end script, we pass the image name to the helper, along with the desired attributes such as a specific height and/or width, the helper then resizes the native image, and caches it for future use.

print imageGenerator($imageURL,array(
    'alt'=> getImageProperty($imageURL,'altText'),
Take the UoL Press Releases news section, for example, we can now elegantly deliver multiple image sizes depending on our needs, without either the bandwidth overhead of resizing large images, or the administration headache of managing multiple images within the CMS, and the image helper can be used anywhere in our front end templates.

we can now elegantly deliver multiple image sizes depending on our needs, without either the bandwidth overhead of resizing large images, or the administration headache of managing multiple images within the CMS

Image attribution

The next issue I’ve been looking into recently is that of image attribution, again, Jadu doesn’t currently have any options within the multimedia gallery module to attach attribution data to multimedia items. If the UoL wants to use a Creative Commons licensed image, there’s no way, other than adding the attribution data into the body content. I figured there was a better way to do this.

The Multimedia Module within Jadu is the central place to manage all types of multimedia content, for this example I’ll focus on images. One of the core concepts of a CMS is that an image only needs to exist once, but can then be included in any other piece of content. The multimedia manager is a relatively recent addition to Jadu CMS, and as such, provides the bare minimum of features required so I needed to find a way to link attribution data to an image without modifying the core CMS code.

Enter machine tags

As we can apply tags to each image, this was a perfect place to use machine tags – a piece of text which contains machine-readable semantic information – to include the relevant licensing information. Machine tags are composed of three parts; a namespace, a predicate, and a value. For example:

license:creativecommons="© 2009 Greg Grossmeier, used under a Creative
Commons Attribution-ShareAlike license:"
Initially, I hit a brick wall in that the ‘tag’ column within the JaduMultimediaTags table was limited to varchar(50), a sensible default for most english word based tags but kills the chance of using machine tags which are typically longer. Frustrated, I moaned a bit on Twitter, and within minutes had an email from @ap49 at Jadu asking what they could do to help, and later that night they’d modified the Jadu trunk to change the tag column to varchar(255) which is much more useful, for me at least!

So, armed with our enlarged tag column, I set about writing a function which would parse an images’ tags for our license machine tag, extract the relevant components, and spit out some meaningful markup to the browser which we could style as needed. You can get the Image License function from GitHub, in case it’s of use to anyone.

For the University of Leeds’ corporate site, I wanted to include a small copyright, or creative commons symbol in the corner of the image, which would then expand to show the license detail when hovered over. I chose to use CSS for the hover animations rather than javascript and I’m quite pleased with the result. Modern browsers get a nicely animated transition and older browsers simply display the information on hover. The license function can be extended to provide the data in different formats depending on the content’s needs. For a homage widget like the one below, a subtle copyright icon works well, for images, illustrations or figures within a document we may prefer to list all of the attribution data at the foot of the document in a list of references.

Here’s the attribution implemented on our document image component:

Low impact development

Working in this way, we’re able to extend the functionality of the CMS without modifying the core product (which would complicate our upgrade cycle) because we’re making the assumption that these features will eventually be provided natively within the CMS. These functions enhance how we manage and use images, yet are lightweight enough to be stripped out and replaced by native functions if and when they become available.

comments powered by Disqus