Adding external files to your HTML gallery

April 14, 2007 @ 3:57PM

Adding external files to your HTML gallery

By Sean McCormack ...

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’.

0.5

That’s our basic gallery.xml file. To call files from it we use the tag. Please note one very important thing about XML/XSLT: You must close all tags. Even
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:

mycssfile.css

In our file this looks like:

0.5
mycssfile.css

If we include background url’s in our CSS file, we need to include them in the gallery folder and in gallery.xml, eg

0.5
mycssfile.css
background.jpg

You can also save the files in subfolders to keep it tidy and call them from subfolders. eg:

images/background.jpg

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.

Comments

Anonymous

4 years ago

Hi, Sean, thanks for digging into this on your own!>One note about XML in HTML. I was a little naive, assuming that the browsers out there would “do the right thing”. Oops! Never assume the browsers will do the right thing!>For example, you suggest writing as . That’s perfectly valid XML. Unfortunately, I think Internet Explorer 6.0 will be confused by some tags that are in this all-in-one form.>For example, the tag. If you were to write the page won’t open in internet explorer 6. IE6 gets confused by the all-in-one form .>So in my transformer, I’d have to write it like this:>>>Unfortunately, the XSLT engine knows that that can be simplified to the all-in-one form! So to prevent the XSLT engine from doing that, I have to insert a comment in the final output, like this:>>padding for ie>>Somewhere in here is where I realized that the idealized dream of XML -> HTML via XSLT is actually more of a nightmare. I’m sorry about that :-\

Anonymous

4 years ago

I’d seen this in the templates Andy, and was curious as to it, cheers for the clarification. There’s so much inside them, that it’s hard to know what’s in for what reason!

Maybe we’ll all find a better way