As you might have heard in Lightroom Podcast #9 (starting around the 25-minute mark), we’re working on a fresh, new Web Photo Gallery engine for Lightroom. For those wanting to dig under the hood and start creating or modifying galleries, Adobe engineer Andy Rahn has created an overview, which I’ve included in this post’s extended entry.

We think this new engine provides a great foundation for the future, and while we really can’t comment on upcoming products, we’d like to see the engine make its way to, ah, other applications (something something, rhymes with “Shmoatoshop”…). So, with any luck, the time you spend working with this new engine will end up being broadly applicable down the road (no promises, of course).

---

A quick introduction to Lightroom Web Module templates.
[By Andy Rahn]

Lightroom web module supports templates which allow designers to create new web photo galleries which can be previewed live inside of Lightroom. Lightroom actually supports two kinds of templates: Flash templates, and HTML templates. In this article, I’m going to focus on HTML templates.

The HTML templates are composed of a number of parts:

• A galleryMaker.xml file which describes the appearance of the side panel for the template, lists the sizes of images needed, and defines variables which are used by the template to build the output files.
• A transformer.xslt file which converts an internal XML representation of the web gallery into the resulting HTML, dynamic CSS or other output files.
• Other collateral files, such as icons or CSS files.

In this blog entry, I’ll take you through a quick tour of the capabilities of this system by example. At the bottom of this page is a link to a ZIP file containing the example template. The gallery system utilizes XSLT as the language for creating the HTML, so you should be somewhat familiar with that programming language to get the most out of the example. Several good XSLT tutorials are available on the internet: [W3Schools], [ZVON.org]

The Gallery Maker File

The gallery maker file has basically three sections in it:

• Information about the template, including its name and who created. This is stored in the galleryInfo section.
• Definitions of variables that can be used to connect information that the user types in the panels into the XSLT transform. For example, the “site title” is stored in a variable.
• A description of the right hand “Custom Settings” and “Image Settings” panels.

Here is the example file. Note: This file is contained in the ZIP file (link at the end of the article). If you want to build it yourself, you can copy and paste this into a text editor and save it with the name ‘galleryMaker.xml’ in a new empty folder called DemoTemplate. (Note: TextEdit defaults to “rich text” format. To save it so that Lightroom can read the resulting file, follow these steps: 1) Copy the text below 2) Switch to TextEdit and create a new document 3) Paste 4) Choose “Make Plain Text” from the Format menu 5) Save as…, choosing “Unicode (UTF-8)” from the “Plain Text Encoding” popup menu. )

<?xml version="1.0" encoding="utf-8"?>
<galleryMaker xmlns:ag="http://ns.adobe.com/silver/1.0">
<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>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<ag:compatabilty>
<ag:id>com.adobe.lightroom.default2</ag:id>
</ag:compatabilty>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<ag:perImage>
<description heightInLines="3" title="Caption" />
</ag:perImage>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<sizes>
<size height="130" name="thumb" width="130" />
</sizes>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<mx:Application xmlns:mx="http://www.macromedia.com/2005/mxml">
<mx:Model id="metadata">
<siteInfo>
<title ag:liveUpdateTarget="#liveUpdateSiteTitle">Site Title</title>
</siteInfo>
</mx:Model>
<mx:Model id="appearance">
<body>
<cssID>body</cssID>
<background-color>#4c4c4c</background-color>
</body>
</mx:Model>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<mx:VBox ag:layout="fill_horizontal=1,">
<mx:HBox ag:layout="fill_horizontal=1,">
<mx:Label text="Site Title" />
</mx:HBox>
<mx:HBox ag:layout="fill_horizontal=1,">
<mx:TextInput ag:layout="fill_horizontal=1,width=1," id="siteTitle" />
</mx:HBox>
</mx:VBox>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<mx:Binding destination="appearance.siteTitle.color" source="foregroundColor.selectedColor" />
<mx:Binding destination="foregroundColor.selectedColor" source="appearance.siteTitle.color" />
<mx:Binding destination="metadata.siteInfo.title" source="siteTitle.text" />
<mx:Binding destination="siteTitle.text" source="metadata.siteInfo.title" />
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
</mx:Application>
</galleryMaker>

transformer.xslt

The transformer XSLT file transforms an intermediate XML format into the HTML files for the gallery. It should be called transformer.xslt and be saved on disk next to the galleryMaker.xml file.

To get started, here is a very simple transformer.xslt that simply writes the intermediate XML format out to disk. (The final version of this file is in the ZIP file attachment below, or you can copy and paste using the same steps as above.):

<?xml version="1.0"?>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
>
<xsl:output method="xml" indent="yes"/>
<xsl:param name="siteTitle" select="/photoCollection/display/metadata/siteInfo/@title" />
<xsl:template match="photoCollection">
<files>
<!-- copy source xml to a file for ease of development -->
<file name="source.xml">
<xsl:copy-of select="/" />
</file>
<!-- A ultra simple index page -->
<xsl:call-template name="index.html" />
</files>
</xsl:template>
</xsl:stylesheet>

Try it out

Now move the DemoTemplate folder into <your home directory>/Library/Adobe Lightroom/WebTemplates . The folder WebTemplates won’t exist, so you’ll have to create that. Note, that the folder name is ‘WebTemplates’ with no spacess. There may also be a folder called “WPG Templates”, which contains the web gallery preset items. You can ignore that other folder.

Now launch Lightroom Beta 3. Select one or two images and switch to the Web Module. You should see “Demo Template” as one of the options in the Gallery Template popup menu. There won’t be much to see when you switch to it, but as soon as you do your transform is invoked to create a file called “source.xml” on disk.

Let’s find that file. Open a new Finder window. Go to the temporary directory by pressing command-shift-g and typing /tmp. Switch to list view (command-2) and sort by date modified. There should be a directory with a random name near the top of the list. Open that folder; it should contain a file called “source.xml”.

With one image selected, this is my source.xml file:

<photoCollection>
<display>
<style css="body {   background-color: #4C4C4C !important; } "></style>
<metadata>
<siteInfo title="Site Title"></siteInfo>
</metadata>
<localization></localization>
</display>
<head>
<siteTitle>Tjuf Ujumf</siteTitle>
<collectionName></collectionName>
<collectionTitle></collectionTitle>
<collectionDescription></collectionDescription>
<contactInfo></contactInfo>
<slideDuration></slideDuration>
<sizes>
<size height="130" name="thumb" width="130"></size>
</sizes>
</head>
<samples>
<img filename="CRW_3141" imageID="4D4B0C47-928D-11DA-A6BF-000A95C37190">
<text>
<description></description>
</text>
<rendition height="86" path="bin/images/thumb/CRW_3141.jpg" width="130" size="thumb"></rendition>
</img>
</samples>
</photoCollection>

Crafting your site

You can use the source.xml file generated above to create an actual web template. There are a variety of tools out there for working with XSLT. One example for the Mac OS is Marc Liyanage’s TestXSLT : http://www.entropy.ch/software/macosx/ . Cooktop, found at http://www.xmlcooktop.com/ , looks like a good tool for Windows. These tools allow you to quickly run your new XSLT against the source xml in order to check for errors and inspect the HTML output.

Here is a slightly more complicated example to get you started:

<?xml version="1.0"?>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
>
<xsl:output method="xml" indent="yes"/>
<xsl:param name="siteTitle" select="/photoCollection/display/metadata/siteInfo/@title" />
<xsl:template match="photoCollection">
<files>
<!-- copy source xml to a file for ease of development -->
<file name="source.xml">
<xsl:copy-of select="/" />
</file>
<!-- A ultra simple index page -->
<xsl:call-template name="index.html" />
</files>
</xsl:template>
<!-- Generate an index page -->
<xsl:template name="index.html" >
<file name="index.html">
<html>
<head>
<title><xsl:value-of select="$siteTitle" /></title>
</head>
<body>
<ol>
<xsl:for-each select="samples/img">
<xsl:call-template name="indexImage" />
</xsl:for-each>
</ol>
</body>
</html>
</file>
</xsl:template>
<!-- Add one image to the list -->
<xsl:template name="indexImage">
<xsl:param name="path" select="rendition[@size='thumb']/@path" />
<li><img src="{$path}" /></li>
</xsl:template>
</xsl:stylesheet>

Download the demo template:lightroom_wpg_example.zip

Expand and place it in <your home directory>/Library/Adobe Lightroom/WebTemplates/ . In your experimentation, try creating multiple files and link between them. Or, add additional elements to the <sizes> list in the galleryMaker.xml file. Add text for each image. Good luck! Feel free to discuss your progress on the Adobe Lightroom beta forums.