Creating a Drupal node image gallery

Technology Blog

A common requirement is to have a Flash-based image gallery associated with a particular content type, so users can upload images using a CCK image field and have them displayed as a gallery, with each node of the type having its own separate one. Here’s an example of the sort of thing, one I created for a project last year.

In this article I’ll show how to make such a gallery, using the excellent Art Flash Gallery with Drupal. It is not to be a detailed tutorial: I’ll just describe the essential steps involved. When I get time I may provide more of the specifics.

Art Flash Gallery is configured via an XML document. To display an image gallery per node, you therefore need to generate individualised XML for each. The simplest way to do this is to define a URL convention for the XML, such as, eg. “/likemind_gallery/nnn/config.xml”, where nnn is the node ID.

So you need a new module to provide the XML. This module will contain as a minimum two functions: an implementation of hook_menu to define a callback for the XML urls, and the callback itself.

So what does the callback do? Mine is very simple: it checks that the node has the field in question (the name of the field should be a configurable item, but for a simple quick implementation it can be hard-coded) then if so it loads a template file for the XML. This template is based on the sample supplied with the software, replacing hardcoded image entries with a loop through the images of the node. One thing I found: you must empty the imgPath element, as otherwise its content is prepended to the path for each image. The callback must exit after loading the template file as we don’t want its output to be themed by Drupal.

You need to supply a thumbnail for each image and the imagecache module provides the perfect solution to that problem: simply create a thumbnail definition using imagecache then prefix the file path for each image accordingly (it’ll be a string something like “/files/imagecache/thumbnail/”).

At this point you should be able to enable your module and invoke it with a sample URL or two. If all is well proceed to the next step.

The next thing we need to do is to replace the default output for the image field with the code for our gallery. The exact code you use will depend on the Flash loading mechanism you prefer. Most modern browsers are happy with a combination of OBJECT and EMBED elements but Internet Explorer 6 and earlier need to be fed some Javascript to ensure Flash works smoothly.

The essential requirement is for the code to point to the correct location for the gallery .swf file and supply a flashVars value for configXML equal to the URL for the XML feed for the node. This code will go into a field template for the field, called something like “field-field_images.tpl.php”, placed in the directory for your active theme. If you are developing in Drupal 6 you’ll need to flush the theme cache before this field template is detected.

Now if you’ve done everything right the gallery should appear in your node pages. You’ll need to customise the template XML to make it fit your needs – there are lots of useful options available and the software comes with reasonable documentation to help you understand how they work.

If I ever have the time I’ll make a production version of my own code and upload it to Drupal.org, but with my current workload that doesn’t look very likely to happen in the near future!

5 Responses to “Creating a Drupal node image gallery”

  1. Glenn McLelland

    Would love to see the example module file detailed in this post or a separate article with more details. Perhaps you could use an additional cck field to indicate what type of flash gallery you want? That way when the node is loaded you can conditionally load the xml template of choice.

  2. sell gold arizona

    I am using the image module on my Drupal site. I have a page set up with about 5 galleries and they all have pictures in them. I went to go upload some pictures into a new gallery today and I couldn’t find how to get the pictures into a specific gallery. I can get them uploaded so they have a node each, but it seems that I have forgotten how to add them to a gallery. I have the latest version of everything so updating is not an issue.

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>