If you’ve been trying to create your own galleries based on the Andy Rahn (Lightroom Web Module engineer) tutorial on John Nack’s blog, I hope you’ve taken note of the new file locations that Andy mentions in his Lightroom Journal Post. You have a simple page that shows a thumbnail of all the images, but now you’d like to put a bit of shape on it.
You could simply add CSS inside the ‘index.html’ file call in your transformer.xslt, but this can be cumbersome once we scale to multiple pages. An external CSS file would be better. Obviously the Web Gallery needs to both see and copy the CSS file to the created gallery. So how do we do this?
It’s all done using an additional file called gallery.xml. Create a blank txt file and save it as ‘gallery.xml’ and paste the following into it and save it beside ‘galleryMaker.xml’.
That’s our basic gallery.xml file. To call files from it we use the
must be written
. The ‘/’ acts as a close tag.
UpdatePaddlefish has noted in the comments that IE 6 gets confused by this and details a workaround there.
To include our CSS file we call it like this:
In our file this looks like:
If we include background url’s in our CSS file, we need to include them in the gallery folder and in gallery.xml, eg
You can also save the files in subfolders to keep it tidy and call them from subfolders. eg:
would call the jpg from the images subfolder. These subfolders are relative to the current folder. On Mac it is possible to call the CSS file directly in the transformer.xslt file, but John Beardsworth pointed out this does not work for him on PC. While related to how to call a file, It’s merely a matter of pasting code, cookbook style, and I’ll just make it a post on its own. Watch this space.
Hopefully this will be helpful to those building from scratch and thanks to Andy Rahn for the original tip when I was calling files that were already online.