Remove the Info pane from TTG Panic Gallery

published April 2008

I may be tootin’ my own horn here, but I think TTG Panic Gallery is pretty spiffy. Not perfect, but spiffy. For smallish galleries, it offers a slick and stylish presentation. It’s intended for galleries of perhaps twenty images or so, and displays the collection description as a frontispiece to the images, making it particularly well-suited to short photo essays. This frontispiece – hereafter also referred to as the Info pane – may not always be a desirable inclusion, however, and I’ll here explain its presence and how one might remove it from an exported gallery.

TTG Panic Gallery

This tutorial assumes you are using TTG Panic Gallery 1.23 or later. If that’s not the case, please upgrade your template installation before continuing.

An Inclusion of Necessity

The purpose of the frontispiece is more complex than one might first suppose.

The obvious purpose of the Info pane is for the photographer to present information about the photos which are included in the gallery. That’s simple enough.

The behind-the-scenes purpose of the Info pane is not so simple. Each image in the gallery is contained within its own pane, an HTML div with a unique identifier. For an identifier, the panes use the only piece of information always guaranteed to be unique, the image filename. And, because the images will always be changing for each gallery, these identifiers are constantly changing.

Hand-coding an individual gallery with set content, that’s no problem. But, when creating a dynamic template for images that will be changing from use-to-use, from user-to-user, it presents a challenge.

You see, the Javascript that powers the gallery requires a point of reference, a set anchor point, a home pane for the gallery. The identifier for this anchor point needs to be in the actual Javascript file and cannot, therefore, be included as a Lua variable as can be used in HTML files used by the Lightroom Web module.

TTG Panic Gallery uses the frontispiece, the Info pane, as that anchor point. This allows the gallery to function while every other pane in the gallery remains dynamic, capable of accepting unique identifiers for each pane, while that one anchor pane keeps the whole in place.

For this reason, the Info pane can be removed, but must be removed post-export, rather than pre-export. This will require a text-editor, a willingness to get your hands dirty with code and some simple mathematics.

Still with me?

Premeditated Pruning

Knowing that we’ll want to remove the frontispiece ahead of time, setup your gallery as usual, then, in the Web module’s Output Settings pane, subtract one from the Columns slider to compensate for the fact that we’ll soon be removing the Info pane’s [i] icon from the strip. This will ensure your thumbnails remain centered after this removal. No other in-module changes should be necessary.

Take note of the number of images in your gallery; we’ll need this number later. The easiest way to do this is to check the filmstrip:


Export your gallery.

Pruning the Info Pane

Now that we have a gallery, let’s get down to business. Dig into your exported gallery folder and open index.html in your text-editor. Therein, you will find two sections of code that have been surrounded by “Delete me” comments, in this fashion:

<!-- Delete me --><div class="section" id="home-pane">
<table style="width:100%;height:100%;"><tr><td valign="middle"><p id="metadata.collectionDescription.value" class="collectionDescription">A magpie on Yangjaecheon.</p></td></tr></table>
</div><!-- /Delete me -->

One section is the actual Info pane, while the other is the thumbnail icon for the Info pane. Locate both sections and delete everything between and including the “Delete me” and “/Delete me” comments.

Now, find the code for the HTML div id=”content”. The code will look something like this:

<div id="scroller">
<div id="content" style="width: 6408px;">

The width of the content div will vary according to the number of images in your gallery. With the Info pane now deleted, this div is too wide and needs to be trimmed down. We do this by dividing the width by the number of images plus one, with the extra one being the Info pane. The equation boils down to this:

x = width / (#images + 1)

We then take the result, and multiple it by the number of images:

new width = x * #images

Replace the width of the content div with this new value.

Now, locate and open the cfcoda.js file in the resources/js/ folder. On line 8, replace “home-pane” with the identifier of the pane you’d like to show first in your gallery. You can fetch this piece of information from your index.html file.

Looking back at index.html, I find the code for the first image, which begins something like this:

<div id="scroller">
<div id="content" style="width: 5874px;">
<div class="section" id="20080412KyungHeeDae025-pane">

Notice that the width of my content div has changed according to the math above. Now, looking at div class=”section” id=”20080412KyungHeeDae025-pane”, it’s the id value that I’m after. In other words, “20080412KyungHeeDae025-pane”. Take this information, and transplant it to line 8 of cfcode.js.

Finally, jump back to the index.html file. Perform a Find & Replace All function, replacing all instances of home-pane with the new anchor pane value. Keeping to my example, I would Find & Replace All instances of home-pane with 20080412KyungHeeDae025-pane.

Save your changes to both index.html and cfcoda.js.

Your gallery should now be ready to go!