Friday, 13 April 2007

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

12 comments:

SeanMcC said...

Including files in the directory and referencing them is done in gallery.xml
you use the filePath tag:

<filePath>filetobeincluded</filePath>

As for the pagination, it's there inside the jardine_pro gallery, just very long winded.

Chris Shepherd said...

Hi Sean,

thanks for popping by. I had already tried filepath but it just dosn't seem to be working for me. Not sure why.

As for the jardine_pro gallery I keep seeing references to this but I can't find a copy anywhere.

cheers
Chris

Chris Shepherd said...

Thanks Sean,

You have sent me on the right lines. I managed to find the jardine_pro gallery & get filepath to work!

SeanMcC said...

Hi Chris,
I just done 2 posts on this on my lIghtroom blog, one on calling the files and the other on correctly calling CSS from inside the transformer.xslt. All due to this post. Andy Rahn even left a comment..

Chris Shepherd said...

All good stuff Sean. I've just added your blog to the "limited resources" section. :)

SeanMcC said...

Andy was good enough to leave you a comment also, in the Paypal post I see. He'll probably be posting some stuff on http://blogs.adobe.com/lightroomjournal (well hopefully!)

Joe said...

Some good info here. I am creating a site will tutorials as well. check out http://www.LIGHTROOMGALLERIES.com

I have created my first template and will be going through everything in depth and posting it all on the site.

Vitor Vieira said...

Hi Chris and Sean (since you participated so much in this discution).
I need to ask, what version of lightroom are you two using?
I have the final 1.0, but I can't make the changes you sugested... Meaning: I copied contents of the lightroom_wpg_example.zip to the usual "C:\Documents and Settings\username\Application Data\Adobe\Lightroom\Web Galleries" which in my computer is Web Templates not galleries, but when I start up lightroom, there is absolutly no change... Also the original gallerymaker.xml is nowhere to be found.

Do you have some tips on how to work around this?
take care!

Chris Shepherd said...

Hi Vitor,

Well done on falling for the first "gotcha"!

"C:\Documents and Settings\username\Application Data\Adobe\Lightroom\Web Galleries" which in my computer is Web Templates not galleries
No, you need to create a new directory called "Web galleries" and unzip the files there.

Chris

Vitor Vieira said...

Gotcha! ;)

It's working now. Thanks!

Jeff said...

That gotcha got me, too! Reading the comments, I saw Vitor's post and your response ... exactly what I did wrong.

I added the new directory, and it seems to be working.

Thanks for the directions!

Mitchell said...

I don't think anyone has said this yet, but one thing to remember is the affect that flash and images have on SEO... you can get around the chokehold they have on SEO by making sure you have good title, keyword, etc tags for each pic.

Just a thought.