Creating Web Gallery Templates for Lightroom

I have started looking at the process for creating your own custom HTML web galleries in Lightroom and I thought I would pass on what I have learnt so far.

1. There ain't much documentation out there.

For a flagship product like Lightroom Adobe seem to have been particularly tardy in providing the documentation as to how to create your own web galleries. The entire total of what I have found is this:

• This post in the Lightroom journal ,which updates this original post.
• This article, which majors on Flash but has a lot of useful nuggets of information.
• This pdf, which gives you some clue about the XML Specifications
• Seans Blog which is full of tips about Lightroom.
  

2. Getting Started

Check you have a Web Galleries folder (by default you don't) so you will need to create it:

• On Mac, <your home directory>/Library/Application Support/Adobe/Lightroom/Web Galleries/.

• On Windows, put the gallery in C:\Documents and Settings\username\Application Data\Adobe\Lightroom\Web Galleries.

On a PC the Application Data directory is hidden so you will need to enable "show hidden folders" before you can browse to it.

Download the demo template from here: lightroom_wpg_example.zip

Unzip the file into the web galleries folder you just created.

If you now open Lightroom and go to the Web module, you should see this available as a new option:

Now close Lightroom as it caches the web templates so you won’t see them unless you close and reopen them.

3. Create your own web Gallery

Copy the example folder in Web Galleries and give it a new name.

Now open the galleryMaker.xml file and edit the values in the <galleryInfo> section to describe your template (unless you change these values Lightroom won’t detect your new template):

Original version
<galleryInfo>
<amg ver="0.5" />
<thumbnail path="preview.jpg" />
<galleryName>Demo Template</galleryName>
<galleryDescription></galleryDescription>
<gallerVersion ver="1.0" />
<livePreview enabled="yes" />
<creator company="Adobe Systems, Inc." designer="Adobe Lightroom Engineering" />
<category>Web photo gallery</category>
<identifier>com.adobe.wpg.demo1t</identifier>
<ag:galleryType>HTML</ag:galleryType>
<ag:maximumGallerySize>20</ag:maximumGallerySize>
</galleryInfo>

My Version

<galleryInfo>
<amg ver="0.5" />
<thumbnail path="preview.jpg" />
<galleryName>PayPal Template</galleryName>
<galleryDescription></galleryDescription>
<gallerVersion ver="1.0" />
<livePreview enabled="yes" />
<creator company="www.shepherdpics.com" />
<category>Web photo gallery</category>
<identifier>com.shepherdpics.wpg.paypal</identifier>
<ag:galleryType>HTML</ag:galleryType>
<ag:maximumGallerySize>20</ag:maximumGallerySize>
</galleryInfo>

Start Lightroom and you should now see your new template in the available list.

Once again close Lightroom.Edit the GalleryMaker.xml file to Generate the output sizes you need.

For my templates I wanted both thumbnails & large images so I changed the <sizes> section from this:

<sizes>
<size height="130" name="thumb" width="130" />
</sizes>

To this:

<sizes>
<size height="130" name="thumb" width="130" />
<size height="500" name="full" width="500" />
</sizes>

Though you might want loads of options - like this:

<sizes>
<size name="thumb" width="160" height="120" />
<size name="small" width="640" height="480" />
<size name="medium" width="880" height="660" />
<size name="large" width="1024" height="768" />
<size name="video" width="400" height="300" fps="30">
</sizes>

Open Lightroom and Export the web gallery to a new directory. If you open this directory you should see contents similar to this:

In the main directory are the index.html and individual html documents for each image. The thumbnail images have been created in the images/thumb directory and the larger images are in images/full.

4.Edit the transformer.xslt file

The transformer.xslt file is an XSLT template that you use to transform the XML in source.xml into XHTML files. If you didn't understand that last sentence you are in for quite a rough ride and it might be worth looking through some tutorials on XSLT now.

Some things I have learnt about the transformer.xslt file are:

• It does not support the <xsl:include> tag so you have to put everything in the same file.
• If you have any errors in your transformer.xslt file then Lightroom will just not generate the file…no error messages, no logs nothing.
• A good XSLT tool like Stylus Studio makes developing the pages considerably easier.

Some things I have still to work out are:

• How to implement multiple index pages
• How to get resource files (css/buttons/graphics) copied to the new directory
  
• Why Adobe picked quite such a complicated way of doing things.

Next blog I will be posting my first go at integrating Paypal and Lightroom Web-Galleries. This will include example download files for you to use.

I hope this posting has been of use, please feel free to add a comment if this has helped you or if you have discovered anymore information.