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.

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:

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.

if..endif syntax

We’ll start with a simple example of a ‘regular’ statement which includes a foreach and an if statement which is extremely common among PHP scripts.

Now, just for funzies, let’s make this a tiny bit more complex and mix in some HTML markup in there for good measure, just like you’d see in, say, a WordPress template where we’re jumping back and forth between HTML and PHP mode.

See the closing braces on lines 9 & 10? With a relatively small example like this you can scan back through the code to see wether they close the if or the elseif. Now imagine a much larger statement, the only way to find out what the closing brace actually closes is to either pay attention to the tab levels (providing the tab levels have been maintained properly), or to read back through the whole statement and match them up. There is an alternate syntax which makes life a little easier.

Alternate syntax

By using the alternate if..elseif syntax we can replace those closing braces with something a little more useful.

This alternate syntax is expecially useful when mixing PHP and HTML and works for if/while/for control structures.

Ternary operator

For simple evaluations you can use the ternary operator which is a slimline version of an if/else statement, for example, the following statement which pluralises a string based on an integer variable.

Alternate syntax

Using the ternary operator this can be condensed to a single line:

Have a try!

By learning and adopting these alternate syntaxes you will ensure that your code remains readable and maintainable, especially if you’re writing code to be used by other people. Give them a try!