The Turning Gate

TTG Lightroom Galleries

This area of The Turning Gate is dedicated to Adobe Lightroom, primarily focusing on Lightroom’s Web module.

Lightroom’s Web module allows users to create web photo galleries of their images “with little effort and no programming, and preview the results in Lightroom before [publishing] them to [a] site” (Lightroom product page).

I have produced a number of web photo gallery templates, tutorials and articles for Lightroom‘s Web module, all freely available here. The list of available contents is located in the right-hand column of this page.

Because the volume of content may be at first overwhelming to new visitors, I’ll here try to provide some context to get you started.

Purveyors of Templates

Lightroom ships with two first-party web templates, the Lightroom HTML Gallery and Lightroom Flash Gallery. From version 1.3, Lightroom has also included templates for three galleries by Airtight Interactive. That’s five templates.

But, thanks to third-party developers, Lightroom users have a wealth of additional web photo gallery options available.

My own TTG templates – TTG is for The Turning Gate – are listed to the right. Other options include the LRG templates by Joe Capra (LightroomGalleries.com), the LRB templates by Sean McCormack (Lightroom-Blog.com) and Todd Dominey’s SlideShowPro for Lightroom.

Regardless of which third-party templates you use, installation is a simple matter of copying the web engine to the appropriate folder on your hard disk. Be sure to read the template installation instructions.

Making Sense of TTG Templates

Though galleries may share some aspects in common, each varies in presentation and purpose. When choosing galleries, it’s important to consider for what purposes the galleries are to be used and how you’d like the galleries to fit into your overall scheme of things.

TTG galleries are divided into four types:

HTML Galleries

The HTML templates are coded in Lua, and render gallery pages in static XHTML, CSS and Javascript. The galleries are highly customizable and contain standard header, footer and site menu options in an effort to create cohesive family of products. Beyond these standards, the galleries come into their own with template-specific options for a number of purposes.

Flash Galleries

The Flash templates bring some of the web’s best Flash photo galleries to the Lightroom Web module. The Flash components were already out there for the taking (I’m not a Flash developer). TTG Flash templates eliminate the tedium of having to manually construct the galleries. The templates are coded in XML and XSLT, and integrate various third-party SWF components to create the final output for the gallery.

Gallery Indexes

Lightroom produces standalone galleries. The gallery indexing templates can then be used to create an album index, a table of contents binding your separate galleries together into a single, navigable website or portfolio.

Special Purpose Templates

These templates are intended for various purposes not outlined by the above three categories. Each of these templates is a thing unto itself.

HTML and Flash galleries serve to generate individual collections of images. Gallery indexes allow you to create a table of contents for those images. And special purpose templates perform various other functions.

Creating a Website

Template Formulas

TTG templates can be deployed modularly to an existing website, or several templates can be used in conjunction to create an entire website from scratch. I’ve setup a demonstration site created entirely using TTG templates. Template combinations are nearly limitless, but a combination of templates giving you something similar to my demo might be:

TTG LR Pages

Used to generate Home, About and Contact Form pages for your site.

TTG MonoSlideshow Gallery

Used to create a slideshow to be used on your TTG LR Pages pages, as shown on the demonstration site.

TTG XML Auto Index

Used to create the gallery index for your image collections (example).

TTG Shadowbox Gallery

Used to produce your individual image galleries for display.

And so, a reasonable formula for a site would be:
( TTG LR Pages + TTG MonoSlideshow Gallery ) + TTG XML Auto Index + [ an HTML template ].

An alternative formula might be:
( TTG LR Pages + TTG MonoSlideshow Gallery ) + TTG XML Shadowbox Auto Index + [ a Flash gallery ].

Yet another alternative:
( TTG LR Pages + TTG MonoSlideshow Gallery ) + TTG XML Auto Index + ( TTG Stage + [a Flash gallery ] ).

With your galleries selected, you should have a rough plan for laying out your site and you’re ready for logistics.

File Structure

In setting up your site, it would be helpful to have an FTP client on-hand. Files could be sent up to your web server using Lightroom’s FTP functions, but it’s much easier to organize a site when you’re looking at the folder structure. For Mac, I recommend Panic’s Transmit. Windows users might try FileZilla.

The image below shows the file structure for a completed website.

Tier 1 represents the website’s root. The root is what you get when you go to your domain name. For this example, we’ll call our site www.myphotography.com. Users traveling to www.myphotography.com would automatically be directed to the index.html file, which is our Home page. Also located here is our About page, about.html. Both the Home and About pages are produced using TTG LR Pages (see section 2).

Also located in Tier 1, we find the monoslideshow folder, containing the slideshow on the Home page. The folders photos and resources contain the files used by the Home and About pages and are generated automatically by TTG LR Pages. Finally, Tier 1 contains the folder for our gallery index, here titled TTGXMLAutoIndex. When creating your site, you’ll probably want to name this folder something more plain, like galleryindex.

Tier 2 shows the contents of our gallery index. The files and resources folder located here are those created by TTG XML Auto Index, and are necessary for the index to display and function properly. Users visiting the URL www.myphotography.com/TTGXMLAutoIndex/ will be directed to the index.php file, which dynamically generates and displays our index in the browser.

The additional folders seen in this image — TTGHTMLGallery, TTGPanicGallery, TTGShadowboxGallery and TTGSlimboxGallery — are folders each containing an individual gallery. These galleries need to be located within the gallery index folder in order to be detected by TTG XML Auto Index.

At Tier 3, we see the contents of one such gallery. File structure interactions with Tier 3 should be minimal, perhaps nonexistent, as the auto index will, in most cases, automate inclusion of Tier 3 contents in our website.

Planning the Site Menu

Many of the TTG templates include an optional site menu, the controls for which are pictured left.

Now that we understand our file structure, planning the site menu is simple. The menu should contain links for each of the following areas:

• Home
• Gallery Index
• About
• Contact

The menu items do not need to be in that order, but that’s how I like to do it. The Contact link has its own dedicated section in the Site Info pane of the Web module. The other menu items need to be created in the Menu Items section of the pane, pictured here.

For each template, the Menu Items section is the same. You can choose to enter relative or absolute URLs. For the sake of simplicity and uniformity, this tutorial uses absolute URLs. Each menu item should be pointed to the appropriate location, as shown in the image. Remember that if URLs do not specify a file, visitors will automatically be directed to the index file in that location, meaning the following URLs amount to the same:

• www.myphotography.com
• www.myphotography.com/index.html

These URLs are also the same:

• www.myphotography.com/TTGXMLAutoIndex/
• www.myphotography.com/TTGXMLAutoIndex/index.php

To reach the About page, however — because it’s not an index page — there’s only one option:

• www.myphotography.com/about.html

Using absolute URLs, the Menu Items for each gallery template should be filled in identically.

Coda

And them’s the basics. I hope this has given you some ideas from which to strike out on your own. For additional inspiration, you might check out the comments on this post to see how other TTG users have deployed templates on their sites. And, once you have your own site up and running, feel free to add your URL to the list.