TTG HTML Gallery

TTG HTML Gallery

TTG HTML Gallery is a Web module template for Adobe Lightroom. Generated galleries are laid out using valid XHTML and CSS, and offer a bevy of customizations, providing an alternative to the table-based and relatively inflexible default HTML template boxed with Lightroom.

  • Compatible with Lightroom 2.x and 3.x.
  • No additional licensing fees.
  • Supports gallery pagination.
  • onImage Navigation (see below) for navigating between images.
  • CoolIris support.
  • Displays up to 10,000 images.
  • Made of valid XHTML and CSS.
  • Seamless integration with TTG Pages.
  • Supports use with TTG Auto Index.

System Requirements

TTG HTML Gallery is written in Lua and requires Adobe Lightroom 2.x or higher.

Hosting Requirements

We recommend hosts running Linux OS and Apache web server. Need hosting?


By installing any purchased or downloaded web engine, plugin or template from The Turning Gate (TTG), You, the user, agree to the End User License Agreement. Make a point to read this document, as it contains important information regarding your purchase and your rights as a user, for which you are responsible.

Read the web engine installation instructions.

onImage Navigation

 Showing active navigation regions for images in TTG HTML Gallery.

onImage Navigation is an image overlay navigation system, comprised only of HTML and CSS, that allows the user to browse the gallery and return to the index by hovering their mouse over regions of the on-screen image. It has been tested successfully in Firefox, Safari, Opera, and Internet Explorer 6 and 7.

The above image shows the areas of interaction. Clicking inside the left 40% of the image, indicated in yellow, will take the user to the previous image. Clicking in the right 40% of the image, indicated in red, will take the user to the next image. And clicking in the upper center region, indicated in blue, will allow the user to return to the image index. On hover, icons will appear to indicate the region’s function.

By clicking in the lower center region, empty in the above image, the user can left or right-click the image to interact with it in the usual fashion. For example, the user could bring up the right-click menu and save the image to their hard drive.

These areas resize dynamically to accommodate images of any size or orientation.

Applying Colors and Ratings

In order to apply color labels and numerical ratings to thumbnails, class names must be set for each image. By default, the gallery pulls these class names from the Headline IPTC field. This can be changed via the Image Info panel, however.

Images may each be assigned a single rating and/or color. To apply a color, simply enter the name of the color into the Headline IPTC field. Accepted colors are transparent, red, yellow, green, blue and purple.

To assign a numerical rating, type out the word for the number of stars/circles you’d like to apply. Accepted values are zero, one, two, three, four and five.

In order to assign both a color and a numerical rating, enter one of each, separated by a space. For example, to label an image red with a rating of five, you would enter red five into the Headline IPTC field.

Of course, you may elect to leave the Headline IPTC field empty, in which case neither a color label or numerical rating will be applied to the image.