July 21, 2006

Next-gen Web galleries: XSLT, Flash, & CSS for all

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.

Posted by John Nack at 11:29 AM on July 21, 2006

Comments

  • Sherwood Stockwell — 2:55 PM on September 14, 2006

    Andy or John,
    Has this thread been dropped or moved elsewhere? I just have started to experiment with this and would like to know if there is some other better place to discuss this matter?
    My intitial question is that although the folder being made in the ~/Library/Adobe Lightroom/Webtemplates is plural, it seems that only one (sub)folder with a gallerymaker.xml and transform.xslt file is recognized in Lightroom’s Web Module.
    I can’t see how Lightroom chooses to look in one folder more than another as far as how it chooses which folder to add to the Gallery Template list.
    For instance I followed the instructions here and an item showed up called Demo Template. Then I Copied the folder Demo Template and renamed it Demo Template 2. I then Edited the Gallerymaker file in the Demo Template 2 and changed the size variable to 260. Additionally I edited the galleryname variable to “Demo Template 2”. I saved this copy of Gallerymaker.xml in the new Demo Template 2 folder.
    Exiting Lightroom and restarting it, I now see the Gallery Template “Demo Template 2” in the Drop Down list, along with the Flash and HTML Templates, but “Demo Template” ( the original one) does not show up even though it is there in a seperate folder in the ~/Library/Adobe Lightroom/Webtemplates folder.
    Curious. I am basically wondering how to take advantage of having a number of different custom templates?
    Where I am still trying to figure out the details here, it is very cool to see how this can work and I am really exctied to think that Lightroom will have this kind of open ended ness and ability to tweak things under the hood.
    Thanks,
    Sherwood

  • joe — 2:39 PM on April 11, 2007

    I am creating a site http://www.lightroomgalleries.com which will have instructions for making custom web galleries as well as providing some template galleries for people to download. Check the site often for updates
    [Cool–I look forward to seeing (and sharing) more soon. –J.]

  • joe — 7:41 PM on April 23, 2007

    Hi guys,
    I am having problems with my template not working on a mac. Works create on a pc. It would be great if someone can download it (at http://www.lightroomgalleries.com )and have a look at the code for me to see if you can spot the problem. Your help is MUCH appreciated!
    Thanks!
    Joe

  • Gio — 5:26 AM on April 24, 2007

    John
    Note that that site has almost no useful content and is stuffed full of Google ads. Its creator has spammed Luminous Landscape, dpReview, and last night put 15 copy and pasted posts on Adobe’s LR forum using the name “Joe C”. If I were you, I’d delete his posts.
    Gio

  • Joe — 10:59 AM on April 24, 2007

    Gio, i dont understand why you are going through so much effort to put down the site. If you don’t like it then dont go there. I am still writing the tutorials for the site and they will be up shortly. I have a fulltime job and can’t dedicate as much time as i would like to. I put in as much time as i can in order to get the tutorials up. There were a couple issues with the template that needed to be fixed first as well. If you download the template you will notice all the comments and instructions throughout. The template files are well documented and someone could create their own template just based on the comments in the files. YES there are google ads, which many sites have. I hate them myself but they help pay for site hosting. I also just started this site up so be patient.
    [Thanks for your efforts, Joe. Hang in there. –J.]

  • Gio — 3:37 AM on April 25, 2007

    I’ll tell you why, Joe – I object to people taking the p*ss. And that’s what a lot of us think you have been doing by spamming every Web-related thread in Adobe’s Lightroom forum. You didn’t reply with advice or help. Oh no, you just copied and pasted announcements of your site – 15 in just a few minutes. Long-dead threads too. All showed up as new messages to those of us who read the forum in our browsers, wasting our time, and every one triggered a separate email to those who subscribe to those threads. You did precisely the same as Luminous Landscape, and also spammed dpReview – and at that time your site didn’t even have your template, just your ads (which Jeff Schewe spotted – I block them). You were banned from LL because of this, weren’t you? And then you registered under another pseudonym and posted again. Already warned that your behaviour quacked like a spammer, walked like a spammer etc, you then make your 15 posts at Adobe’s forum. Deny it if it isn’t true. Make my day.
    For my part, “so much effort” has been to post once in each forum where you have misbehaved, and correct your postings’ impression that your site contains useful content.
    You have shown such a failure to understand “netiquette” that it’s no wonder you do not understand why people put your site down! You should learn from respected LR posters who obviously have their own LR-related sites and books to promote. They’re often answering questions, helping other users, putting content online, perhaps posting an occasional announcement. Many of these good posters don’t even put their url in their signature – it’s hidden in their profile. They gain respect – and hits – based on good track records.
    If you stop spamming, and put up more content, I will happily accept your good faith.
    Apart from my advice about your behaviour, I’ll caution you that you will hit more inconsistencies between the XML rendering engines on the two platforms, and you are going to find template design a real nightmare without access to a Mac as well as a PC. Take this advice to heart, too.
    Gio

  • steve — 5:08 AM on December 29, 2007

    Hi, I’m trying to add the option to minimize metadata to copyright info only but I can’t guess the correct id value (mx:ComboBox id=”metadata”) or the correct popup item values. This option is available in “Output Settings” under default lightroom templates. Thanks.

  • Alex — 1:12 AM on June 29, 2008

    In opera – there’s some designer bugs, when I try to watch that CSS gallery.
    If I’ll be using flash – everything will be OK.
    In that case – I think better to use flash.

  • cathy — 4:47 PM on July 06, 2008

    i need help saving a web template that i created and modified using the “smooth gallery flash gallery” and i want to be able to save the custom settings as a template. can anyone tell me how to do that?

Copyright © 2019 Adobe Systems Incorporated. All rights reserved.
Terms of Use | Privacy Policy and Cookies (Updated)