The Turning Gate

TTG XML Shadowbox Index

5 April 08

TTG XML Shadowbox Index is a modification of TTG XML Album Index that launches content in a shadowbox overlay, instead of loading it into your main browser window. It’s a great way to show videos, display Quicktime Panorama videos, create an index of YouTube content, launch Flash-based image galleries like SimpleViewer, or show webpages all from a single index. And adding new content is as simple as creating an entry in your XML file.

The Lowdown

XML – like fairy magic – makes good things better.

TTG XML Shadowbox Index serves the same purpose as the (now discontinued) TTG Pano Index, but allows for so much more. It creates an index, a table of contents, of mixed content. Indexes can contain individual images, image galleries, webpages, video files, YouTube videos, SWF files, MOV panoramas and more.

With TTG XML Shadowbox Index, updates are a breeze. The user creates and uploads their index once. To add items to the index, the user need only upload a thumbnail image and set a handful of attributes for the gallery in the index’s XML file. Yes, you’ll need a text-editor, but no coding experience is necessary. Read below for details.

System Requirements

TTG XML Shadowbox 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 Shadowbox Index outputs valid XHTML and CSS.

Getting Started

TTG XML Shadowbox Index isn’t difficult to use, but neither is it as straight forward as other Web module plugins. Follow these guidelines, though, and you’ll have your index together in no time.

To begin with, produce some galleries or organize whatever content you’d like to display. You’ll need to know what the URLs to reach each item are going to be.

The first and most important steps of TTG XML Shadowbox Index creation happen in the Library module, so that’s where you need to begin.

Create a new collection or use the Quick Collection. For each of your items to be indexed, select a representative image and add that image to the collection. These images will become the thumbnails in your index, so develop them however you’d like your thumbnails to show up. If you want square thumbnails, use the Develop module to crop them with a 1:1 ratio.

When you’re finished developing your thumbnails, return to the Library module and open your Metadata pane. Under metadata, fill in the following items according to these guidelines:

Title – Gallery title.

Caption – Gallery description.

Copyright – URL of the gallery the image is representing. URLs may be relative or absolute, but should point to each gallery’s index.html file.

Location (optional) – Any item-specific options you’d like to pass to Shadowbox, usually width and height dimensions for videos. A list of available options can be found here, under “Advanced Options”. See below for syntax and setup.

That done, move to the Web module and select TTG XML Shadowbox Index from the Gallery pane in the upper right. Configure the gallery however you’d like.

Under the Image Settings pane, you will find three items: Title, Caption, GalleryLink and Pass Shadowbox Options. Ensure that all four items are enabled.

One-by-one, set the drop-list for each item to “Custom Settings” and select “Edit” to specify the output.

Title should be set to output the IPTC field “Title”.

Caption should be set to output the IPTC field “Caption”.

GalleryLink should be set to output the IPTC field “Copyright”.

Pass Shadowbox Options takes custom input and requires a lengthier discussion.

Shadowbox handles different types of content differently. For individual images, the shadowbox automatically sizes to accommodate the image. For webpages, the shadowbox automatically extends to its maximum boundaries to accommodate the webpage. But for video content, the size of the shadowbox must be specified explicitly in pixels. In order to accommodate mixed content types and shadowbox dimensions per item, TTG XML Shadowbox Gallery implements several options.

By default, TTG XML Shadowbox Gallery allows Shadowbox its default behavior. The shadowbox for images will resize to fit the image; the shadowbox for webpages will stretch to fill the browser viewport; the shadowbox for videos will be wrong.

The simplest options available are the “Master Dimensions” sliders for Shadowbox Width and Height, found in the Color Palette pane. These sliders allow the user to set a master size for every shadowbox on the page, the dimensions to which every shadowbox will grow unless overridden by item-specific settings (keep reading).

Master Dimensions are best used in indexes containing no webpages (as they will irrecoverably restrain the viewport area for webpages), or galleries mostly containing videos of the same dimensions – a YouTube video gallery, for example, in which every video would be set to width 425 and height 355.

Master Dimensions can be overridden, or, if no Master Dimensions are set, shadowbox dimensions may be set individually per item using the Pass Shadowbox Options setting in the Image Settings pane.

By default, Pass Shadowbox Options is set to output shadowbox, the coded instruction that tells a hyperlink to launch its target in a shadowbox. We never want to delete or change this, but there may be times you want to add to it.

To specify options per individual image, you’ll want to enter the options for each image into a metadata field in the Library module. The Location IPTC field is a good place for this, though any IPTC field can be used.

Syntax is easy, but specific. Options need be separated by semi-colons, but no semi-colon should trail the string.

Because shadowbox is already a part of the string by default, additional options should begin with a semi-colon, ;height=480;width=640.

With options entered into your metadata, return to the Web module’s Image Settings pane, access the drop-list to the right of Pass Shadowbox Options and select “Edit”. Add a token for your IPTC field to the end of the string, as pictured.

This done, your new strings should output in a format like shadowbox;height=480;width=640 and your shadowbox will act accordingly.

With everything set, you’re ready to Export your index. Before you can use it, however, there’s something needs be done.

Open the exported album index folder and Delete the index.html file. The index.html file exists only for the Lightroom Web module preview. On the web, the index.php file is the one that will be used to run the gallery.

That done, upload the gallery to your web server and take it for a test drive.

Adding new galleries

Updating your album index with new galleries is easy. Each gallery listed in your album index is powered by a piece of code in the galleries.xml file that looks like this:

<album>
<thumbnail>thumbnails/thumbnail.jpg</thumbnail>
<title>Gallery Name</title>
<description>Gallery Description</description>
<url>/galleryURL/</url>
<rel>shadowbox</rel>
</album>

To add a gallery, you need but add a new instance of the code above, filling in your individual album details.

Use Lightroom to generate a new album index containing only the gallery or galleries you’d like to add to your existing index. You don’t need to waste your time configuring the gallery appearance, so just setup your metadata as described above in Getting Started, develop your thumbnail(s) and hit export.

In the newly exported index, we’re interested in two things only: the thumbnails and the galleries.xml file.

Using your FTP client, upload the new thumbnails to your web server; add them to the thumbnails folder of your pre-existing album index.

Next, open the newly exported galleries.xml file in your text-editor. Copy all of the album settings from the file, then append them to the contents of the existing galleries.xml residing on your website.

Flexibility

TTG XML Shadowbox Index can be used to index content of any kind – images, Flash applications, videos, webpages, etc. On top of everything else, it’s a great way to launch Flash-based images galleries, like SimpleViewer, AutoViewer, etc. that usually come without branding or a menu to take users back to the index. Launch them in a shadowbox atop your index and users always have a way to get back.

Changelog

v1.0 (2008-04-05)

Initial release.

Acknowledgements

TTG XML Shadowbox Index would not be possible without the excellent PHP written by my good friend Zach Bardon. In addition to his scripting prowess, Zach is also an excellent musician. Give him a listen.

Make a Donation

If you enjoy my work and would like to pay for it, I accept donations via PayPal. Donations are wholly unnecessary, but would be greatly appreciated. Thank you!

Send this article to a friend »

« Next Article | ... ... | Previous Article »