Gallery Resources

So you want a list of the available Galleries for Lightroom? Here's the ones that I'm aware of. I've added my current ones at the end.

If you have made some, please feel free to add them in the comments and I'll add them to the list.

The Turning Gate

HTML Galleries

• TTG Client Response Gallery


• TTG HTML Gallery


• TTG Panic Gallery


• TTG Rounded Gallery


• TTG Selection Gallery


• TTG Shadowbox Gallery


• TTG Slimbox Gallery


• TTG Smooth Gallery
  

Flash Galleries

• TTG AutoViewer Gallery


• TTG FlashNifties Gallery


• TTG GridNav Gallery


• TTG MonoSlideshow Gallery


• TTG Photo Stack Gallery


• TTG photoFlow Gallery


• TTG Polaroid Gallery


• TTG PostcardViewer Gallery


• TTG SimpleViewer Gallery
  

Gallery Indexes

• TTG XML Album Index


• TTG XML Auto Index


• TTG XML Shadowbox Auto Index


• TTG XML Shadowbox Index
  

Special Purpose Templates

• TTG LR Pages


• TTG Stage


• TTG XML Maker
  

Lightroom Galleries

• LRG VertiScroller


• LRG Complete - 1.1.1


• LRG FSS Select v1.1


• LRG FlashSlideStrip with PayPal - v1.2.1


• LRG One with PayPal Shopping Cart


• LRG Flash SlideStrip V2.0


• LRG FlashFlex


• LRG FlashScroller


• LRG User Comments v1.0


• LRG FlashBox v1.0

SlideShowPro

• SlideShowPro for Lightroom

Lightroom Blog

• LRB Flash Gallery Beta


• LRB Filenamer


• LRB FrogJS


• LRB Horizontal Scroll Lua


• LRB Vertical Scroll Lua

Horizontal Scroll Lua V1.0

Well, with the introduction of the new VScroll in the past few days, I've knuckled down into getting my original Horizontal Scroll gallery into Lua and with more control. While Lua Galleries are a whole new learning curve after busting through XSLT, they're very powerful. An understanding of CSS can lead to have a great deal of control in the gallery settings. Building the galleries is not overly difficult. It's very logical, but time consuming as you've no true debugger and it's a game of "will Lightroom ignore the gallery", because there's a missing comma somewhere. Enough of the gallery building talk.

HScrollLua 1.0 is a horizontal scrolling gallery. It's a single page gallery with all the image appearing on one page. No thumbnails, just the preview sized photos.
Features:

Single Page Scrolling Gallery

6 Menu items, one for contact info, the others are customisable from the Right Panel

All important colours are changeable

ID Plate can be positioned anywhere in the header (side to side control)

A border can be applied to a photo, with selectable size and colour

Free

Download

View a Sample Gallery

To install the gallery, you need to go to User/Library/Application Support/Adobe/Lightroom, (On XP got o C:\Documents and Settings\User\Application Data\Adobe\Lightroom -Note that Application Data is a hidden folder, on Vista C:\Users\User\AppData\Roaming\Adobe\Lightroom\ ) where User is the name you log in with. Look for a folder called Web Galleries within. If it's not there, create it yourself. Unzip the file into this folder and restart Lightroom.
The new Gallery will apppear in the Right Hand Panel, in the Galleries Pane.

I recommend that you create an alias/shortcut to this Lightroom folder for future use.

Vertical Scroll Gallery: Update to v0.1.2

I've been thinking that with my 3rd Party Developer badge at Lightroom Forums, I should really do some updates on the Galleries I created ages ago. So I have. It's not like I've received much in the way of support requests or anything, but I have added the most requested: separate width and height. I'm also doing it directly rather than the non.CSS way Matthew Campanga uses. I did in the past, but for some reason I got it working fine using agmSizes. As to why it worked this time, I have no clue. Matthew is a far superior gallery coder, though, but my method uses similar ideas, i.e. mapping to intermediate variables. If you want to discuss more about coding galleries, mention it in the comments. We might persuade Ian Farlow of Lightroom Forums to open a forum for us.



Gallery features:

5 editable menu links, with internal commenting to allow more,
Vertical scrolling,
Photo Border with Colour,
ID Plate support, with sizing,
Copyright Watermark support,
Almost every colour editable,
Free..

Did I say Free?

I did this as a Lightroom Birthday present. I'm running out the door right now to work, but I'll add a sample gallery and more detail later! back in and adding more information!

To install the gallery, you need to go to User/Library/Application Support/Adobe/Lightroom, (On XP got o C:\Documents and Settings\User\Application Data\Lightroom -Note that Application Data is a hidden folder, on Vista C:\Users\User\AppData\Roaming\Adobe\Lightroom\ ) where User is the name you log in with. Look for a folder called Web Galleries within. If it's not there, create it yourself. Unzip the file into this folder and restart Lightroom.
The new Gallery will apppear in the Right Hand Panel, in the Galleries Pane.

I recommend that you create an alias/shortcut to this Lightroom folder for future use.



Download the UPDATED 0.1.2 gallery
View a sample Gallery
Download the template for the sample gallery (and photo at the top!). To install, unzip the file. In Lightroom, in the Web module, Right click on a Preset and choose 'Import.." from the menu. Choose the unzipped file.


Notes: The ID plate should be 300px wide for best results, but there is a logo height and width control to help if it's bigger.
While I have dotted borders around the menu and the scroll area, you can hide these by making the border colour the same as the background.
You can add a photo border with selectable size and colour.
Most of the colours can be changed.
The Add Copyright Watermark tickbox does work, but you''ll need to click the Quality control to force a refresh. This is the same in the Lightroom HTML gallery.
The Scroll CSS uses a code that is not supported in all browsers. It does tend to break gracefully, by ignoring the code and allowing you to scroll the page instead.

TTG XML Album Index 1.0 released

Matthew Campagna has announced a replacement for the TTG Gallery Index over at Lightroom Galleries.

"TTG XML Album Index is a new album indexing template for the Lightroom Web module, and replaces the newly discontinued TTG Gallery Index.

Through a combination of PHP and XML, the album index is easier than ever to update with new web galleries. It’s no longer necessary to regenerate and re-upload the entire index for every update, as was the case with TTG Gallery Index. TTG XML Album Index gathers album information from a simple XML file. To add a gallery to your index, you need only provide a thumbnail image and four pieces of information — thumbnail path, gallery path, gallery title and description — to the XML file.

TTG XML Album Index is written in Lua. It requires Lightroom 1.3 or higher, and a web server running PHP. Updates require an FTP client and a text-editor. Coding experience is not necessary.

TTG XML Album Index outputs valid XHTML and CSS."

Business Card Template for SlideShowPro

Happy New Year folks, hope the holiday season is going well. Not much of a holiday for me though, I was back working again tonight. 

As I mentioned before, SlideShowPro was released recently for Lightroom. I got a copy and I have to say I really like it. I intend doing a fuller review shortly, but I've been mucking around with it in the meantime. In the process I've created a cool little template that allows me to place my own flash galleries on sites such as MySpace.com.

Here's how it looks:

You can download the Template here.

Open the Zip file. On Mac OSX, double click on the .lrtemplate to install it. For all systems, right click on User Templates in Left Panel of the Web Module and choose "Import.." from the contextual menu. Use the File Browser to go to where the file unzipped and choose it. Remember, you must have SlideShowPro installed for this to work.

Tip: Because this is an autoplay gallery, and SSP requires the gallery to be paused for export, you need to click Export/Upload and then click to another module, eg Library.

Now to get it to work on MySpace.com you need to use the following code on your page. I have it in the sidebar on my page, but it should work anywhere:

<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="200" width="300" base="." data="http://seanmcfoto.com/bc/loader.swf">
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://seanmcfoto.com/bc/loader.swf" />
<param name="flashvars" value="xmlDataPath=http://www.seanmcfoto.com/bc/images.xml" />
<param name="quality" value="high" />
<param name="base" value=".">
</object>

Replace all instances of http://seanmcfoto.com/bc/ with the location of the gallery folder on your website. If you find it hard to read then use 'View Source" in your browser to look at the code producing the gallery in the middle. The code above is surrounded by XMP tags to make it viewable.

Hopefully this will be useful to others, I know I'll be redoing the galleries on my MySpace page now.

Formatting your Text for Web

User Judith Nicholls has been frustrated with the lack of formatting in Lightrooms Web module. As I read over the posts I realised that I had posted about this very topic a long time ago. You can see the post over at Lightroom-news.com. Now a lot of the information is based on a much older version of Lightroom, but the inherent principle is the same: An unsupported method of formatting in the caption box.

Let's see how to apply this to the current Caption box.

First go to Image info in the HTML Gallery in Web.

Click on "Custom Settings" beside Caption and choose Edit

Begin by entering the following text: <ag:formatted></ag:formatted> into the text box of the Text Template Editor.
Any proper XML (not pure HTML) entered between these tags will be rendered. Use <strong></strong> for bold text and <em></em> for italic text. To create a new line use <br />. You need to use this from of br because of the way XML works.
Here's a template I've created:

And here's how it looks:

Hopefully this will help in the quest for tidy Metadata in Web. Like I mentioned, this is unsupported and may vanish from Lightroom at any time, but it is working for now.

Simple Scroll Gallery

I make no claim to be a Matthew Campagna or Joe Capra, but I did do a lot of playing around to see what made the galleries tick, during the Public Beta. Eventually I made a few of my own. They were pretty much hard coded to my website though. Someone recently was wondering about a simple scroll gallery for Lightroom. I had one and decided to modify it for everyones use.

So here's my UPDATED!Simple Scroll Gallery.

To install the gallery, you need to go to User/Library/Application Support/Adobe/Lightroom, (On XP got o C:\Documents and Settings\User\Application Data\Lightroom -Note that Application Data is a hidden folder, on Vista C:\Users\User\AppData\Roaming\Adobe\Lightroom\ ) where User is the name you log in with. Look for a folder called Web Galleries within. If it's not there, create it yourself. Unzip the file into this folder and restart Lightroom.
The new Gallery will apppear in the Right Hand Panel, in the Galleries Pane.

The controls on the Gallery are very simple:
You can change the Site Title and Collection Description in Site Info. In Output settings you control Jpeg Quality, Preview Size, Background Colour, Copyright Watermark and ID Plate.
I've also uploaded a Sample Gallery for you to view.

Update: While it seemed to be working earlier, the background colour control is broken. Colour doesn't stick.

Update on the Update: Version 0.1.3 is now up at the link. I've added a Color Palette with controls for the BG color of the page, the image bar and the area where the collection description is listed, along with control of the text colour of the collection description.

Paypal in Lightroom Galleries

Chirs Shepherd has a new blog post on adding Paypal to you Lightroom galleries. I've only just glanced over it but it looks really good:
http://www.shepherdpics.com/Blog/2007/04/creating-ecommerce-site-using-adobe.html

Calling a CSS file: the XSLT way.

I said in my last post that I would show how to call CSS in our gallery. Normally when we call a CSS file we would use the standard call tag:

<link xmlns="http://www.w3.org/1999/xhtml" type="text/css" href="mycss.css" />

As per my last post, note the trailing '/' which closes the link tag.

This seems to work fine as a call inside transformer.xslt on mac but causes issues on PC. Therefore we need a correct way to call our file that works on both. Here's some sample code from the 'RollOver' gallery I've working (not completed yet-I still can't get the first image preloaded!). This part shows the initial calls defining the Paths and the then head section, where I use <xsl:call-template name="addCSSLink"> to call the code to add the CSS link.


<!-- Generate an index page -->
<xsl:template name="index.html" >
<xsl:param name="pathToRoot" select="''"/>
<xsl:param name="pathToContent" select="'content/'"/>

<file name="index.html">
<html>
<head>
<title><xsl:value-of select="$siteTitle" /></title>
<style type="text/css">
</style>
<script language="JavaScript" type="text/JavaScript" src="rollover.js">
</script>
<xsl:call-template name="addCSSLink">
<xsl:with-param name="pathToRoot" select="$pathToRoot"/>
<xsl:with-param name="pathToContent" select="$pathToContent"/>
</xsl:call-template>

</head>

The <script language="JavaScript" type="text/JavaScript" src="rollover.js"></script> is just there to call the javascript for this particular gallery and not needed for the CSS call. I've left it in for completeness in relation to the gallery I'm doing this call on.

The xsl:template that is being called to make this happen is below:

<xsl:template name="addCSSLink">
<xsl:param name="pathToRoot"/>
<xsl:param name="pathToContent"/>
<xsl:param name="size"/>
<xsl:param name="masterCSS" select="concat( $pathToRoot, 'scrollextra.css' )"/>
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" type="text/css" href="{$masterCSS}"/>
</xsl:template>

You place this code below the </xsl:template> of the 'index.html' template call and above the </xsl:stylesheet> at the end of the file. The call to 'scrollextra.css' is simply the filename of the CSS I'm using in this gallery.
Again hope this helps.

Adding external files to your HTML gallery

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

<gallery>
<amgVersion>0.5</amgVersion>

</gallery>

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

<filePath>mycssfile.css</filePath>

In our file this looks like:

<gallery>
<amgVersion>0.5</amgVersion>
<filePath>mycssfile.css</filePath>

</gallery>


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


<gallery>
<amgVersion>0.5</amgVersion>
<filePath>mycssfile.css</filePath>
<filePath>background.jpg</filePath>
</gallery>


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


<filePath>images/background.jpg</filePath>

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.

Menu links in Flash Gallery

I've added a post to Lightroom News on adding a series of links in the menu bar.
It's called Adding a navigation menu to Lightroom Flash Gallery. Go check it out.

RollOver

It's only fledgling but you can download and play with (and decode for your own use) my version of a javascript rollover gallery for Lightroom.
While this works in and of itself and is based on the Scroll Extra gallery below, it has a number of things added and equally so, missing.
CSS: I've updated to the correct CSS file calling technique. In Scroll Extra I literally just made a call to the file using the standard call. This one line of code is now replaced by about 15 lines of XSLT instead. While the first one worked fine on Mac, johnbeardy reported it broken on Windows. This bit solves that.

Missing: I cannot make the XSLT call the first image to display when the gallery loads.
Here's my code for calling the thumbnail with the link that allows the javascript call:


<!-- Add one image with link to the list -->
<xsl:template name="indexImage">
<xsl:param name="path" select="rendition[@size='thumb']/@path" />
<xsl:param name="previewFull" select="rendition[@size='image']/@path" />
<a href="#" onMouseOver="MM_swapImage('enlarge','','{$previewFull}',0)">< img xmlns="http://www.w3.org/1999/xhtml" src="{$path}" alt="" name="a1"/>< /a>
</xsl:template>


The previewFull tag calls the full image into the main viewer when you mouse over the thumbnail.
Much as I try the same code for previewFull does not call the first image for display on loading. I know it's something stupid that I'm doing or missing.

A few notes on the above code. path and previewFull call rendition, size and path. These make sense to view, but have no relation to anything in the galleryMaker.xml or tranformer.xml file. So where are they referencing? Well as it turns out, they are referencing the source.xml file that you can create by removing the comments around that section of code in transformer.xslt.
Examining a sample source.xml file I can see the following:
<samples totalGallerySize="9" firstSampleIndex="1">
<img orientation="DA" imageID="F32FE884-9B67-4252-A47B-74A8A5C106F7" filename="2006_08_11_045">
<text>
<description></description>
</text>
<rendition height="600" path="bin/images/image/2006_08_11_045.jpg" width="400" size="image"></rendition>
<rendition height="60" path="bin/images/thumb/2006_08_11_045.jpg" width="40" size="thumb"></rendition>
</img>

I can see that this image has 2 renditions: 600X400 called image and 60X40 called thumb. Also the path of each rendition is included.
So our "rendition[@size='thumb']/@path" calls the image located at the 'path' that is sized thumb.
Also each img call is inside the <samples> folder which is where the <xsl:for-each select="samples/img"> comes from


Things I'd like to do in XSLT: create cropped square thumbs ala php, Embed paypal links. I should also try adding radio buttons to let people rate the image as an experiment in creating feedback from images.

Scroll Extra

Still messing around with XSLT/XML and HTML galleries in Lightroom.
Here's an extension gallery that uses Andy Rahns info in this blog post. Read the original article and use the new locations mentioned also. What I've added is a scrolling mechanism in CSS and made it a little prettier using snippets of code from around the net. Scrolling uses overflow in CSS, while using LI to control the look of the nav bar buttons comes from a variation on the Listmatic site.

I've created a single page scrolling gallery mostly to avoid grid coding/preview pages and pagination (areas I need to study more first). It uses ID plate/Watermarking and Jpeg Quality. I have the JPG quality at 70, but moving the slider appears to do nothing. These last features are cut and paste code from the Lightroom HTML gallery, used in a 'cookbook' form, so I may have missed something essential.

Things of note:
The background files to the page, the ID Plate and the Nav buttons are included in the gallery.xml file using the 'filePath' command. As is the CSS file.
You can, if you want to, hard code links to files on the internet, but on a Mac Lightroom will open them in a browser when you first run the web gallery. John Beardsworth says this doesn't happen on PC.

The nav bar in the gallery can have its links edited in transformer.xslt. I plan to work on code to do this inside Lightroom at some stage.
I've been up all night messing with this so I should crash before work ;)

Bluefire Blog: Editing your Flash Gallery style.xml

The Bluefire Blog has great advice on customising the output from your flash gallery by editing the style.xml located in the resources/styles folder inside your gallery. From the first post on this:
"The controls within the Web tab allow you to customize the Lightroom Flash Gallery templates in a lot of ways. However, you can customize them much further by editing the XML files that are generated when you export a gallery. This requires almost no knowledge of Flash or HTML, and can be done with almost any text editor.
"

More Webtemplate stuff.

Alright, as George Jardine would say, welcome to or new post on customising your web template.
If you're happy with the Jardine Pro template but really would like to have better HTML linking to other galleries or to parts of your site, follow this thread!
Custom Web Templates live in a folder called Web Galleries in the USERNAME/Library/Adobe Lightroom folder on Mac. This is in C:\DOCUMENTS and SETTINGS\USERNAME\Application Data\Adobe Lightroom on PC (C being to root drive and USERNAME being what you log in as. At first you'll need to create this folder. Then download the the Jardine Pro template from Georges iDisk. It's there under Example Lightroom Web Gallery. As per my last post:
"Copy the files contained in the zip file to this new folder. Open the new folder. Search for a file called galleryMaker.xml in jardine_pro. Open it in a text editor. On Line 7 change Title=Jardine Pro to Title=YourName and on line 14 change com.adobe.wpg.templates.jardinePro to com.adobe.wpg.templates.yourName. Save the file. "
If you already followed the last post, you should create a different name to distinguish the 2 inside Lightroom.
Okay, now we want to add our site HTML to the template. This is done by editing the "transformer.xslt" file. This is a well commented file and we can find where to put our html easily. On line 179 we can see a comment saying Begin Stage. This is where the thumbnails get displayed and seems like a good place to add our links. So away we go:

<a href="../index.html">Home</a> | <a href="../contact.html">Contact</a> .... etc etc

You will also need to add this code after line 960 because the "transformer.xslt" file creates the detail page as well as the index page for the gallery.
Save the file and open Lightroom. Select a few images and then go to Web. Your new gallery template should appear in the drop down menu in Gallery Style. Try it out.
You can add any HTML you want in the transformer.xslt file. I've just done a very quick start here to get you going. If you are looking for an HTML editor that's free and easy I recommend Taco HTML for Mac users out there. Anyone who wants to interject with a good PC one, feel free.

Changing Typography in Web Galleries

Currently there is no way in the program to change fonts in your galleries. It's not too hard but takes a little time to do this outside the program. Basically we need our own editable template. Fortunately George Jardine has provided his Jardine Pro gallery on his iDisk. Click the link and download Example Lightroom Web Gallery/jardine_pro.zip.
You need to create a folder called Web Galleries. On Mac create it in username/Library/Adobe Lightroom/, On PC create it in C:\Documents and Settings\username\Application Data\Adobe\Lightroom\ where username is the name you log in with.
Copy the files contained in the zip file to this new folder. Open the new folder. Search for a file called galleryMaker.xml in jardine_pro. Open it in a text editor. On Line 7 change Title=Jardine Pro to Title=YourName and on line 14 change com.adobe.wpg.templates.jardinePro to com.adobe.wpg.templates.yourName. Save the file.
You can rename the jardine pro folder to something more usable like yourName. Inside the folder there is a master.css file located in resources/css. Open it in a text editor. On line 8 we have the font family set to Arial etc. Change the font family here to whatever you want to use. Bear in mind to choose fonts that have a chance of appearing on your viewers machine or the browser will replace it with a font of its choice. Save the master.css file.
Restart Lightroom and open Web. On the top right drop down menu your new template name should appear. Select it and enjoy.