We use the Drupal Gallery module on many of our sites to integrate Menalto’s Gallery into Drupal. This lets us setup photo albums, along with giving us a way to use the Gallery to manage individual images for the Drupal CMS.

However, one of the problems with integrating seperate products is that occasionally there is a clash in how each product tries to handle it’s output. This becomes very apparent when using Gallery to handle single images – the code it produces for each image looks something like:

 Which to be frank is horrendous code, a perfect example of divitis – and more importantly, when combined with drupal, has very little chance of being compliant with the W3C standards for HTML. We often use Gallery along with tinymce, which means this code is likely to be generated inside <p> tags which is a definite no-no as far as the W3C specs are concerned (divs are the top level block element and cannot appear inside paragraphs).

Ideally we’d like to use the HTML5 figure definitions, but until browser acceptance of this is more widespread, we’re restricted to using a format something like:

So how can we go about generating this much nicer code? We could delve into the code that generates the image HTML – but this is handled by the Drupal & the Menalto code so would likely be a complicated solution. Alternatively, we could make use of the Drupal theming capabilities.

One of the components of Drupal theming is the node.tpl.php page.tpl.php file – as the name suggests it handles the creation and output ofeach page displayed. Within this file, the actual content to be output is contained within a PHP string variable called $content which holds the full HTML of the content to be output. Being a string, we can manipulate this in many different ways – adding new content, removing content or even completely replacing it.

Given what we’d like to acheive, we basically need to replace all <div id=”giImageBlock”> content with a span, removing the inner divs and then within those spans, replace the H4 image elements with spans. We can do that with the following code:

This needs to replace the existing print $content; within page.tpl.php. With this in place, every generated page is scanned for any Gallery code and replaced with valid code (both semantically & as per the W3C specs).

 Note: I’d originally said to replace the print $content within node.tpl.php – this can cause problems if you show more than one node on a page, i.e. via views – so replace the print $content in page.tpl.php instead.