Staging HTML Content

TTG CE2 Stage may be used to create pages with various HTML-based features, including still images, before-and-after processing/retouch image comparison, Galleria or Photoswipe slideshows, or content “hooked in” using our PHPlugins extensibility features.

To setup, open the Appearance control pane and locate the Staging control group. Set Media Presentation: HTML Media, then select your desired HTML Presentation. Options for your chosen presentation type will appear in the area below this choices.

Staging HTML

Mind Your Widths

In the Appearance control pane, Media Area / 'The Grid' control group be aware of your Content Width.

In the Appearance control pane, Staging control group be aware of your Stage Width, Stage Border and Stage Padding.

Content Width should be equal to or greater than Stage Width + ( Stage Border * 2 ) + ( Stage Padding * 2 ).

As usual, your Content Width should also be equal to or less than your Container Width; if Container Width is 'auto' then your Content Width should be 'fixed' and any numerical width will do.

You need not concern yourself with height so much; the content and/or Stage Height will automatically force the content to be of appropriate height.

No Content / PHPlugin

No Embedded Content

Selecting the “No Content / PHPlugin” presentation allows the grid to be included on the page without content. Being empty, content may then be “hooked in” to the grid using PHPlugins. This would be a good choice if, for example, you wanted to embed a map from Google Maps, an image (such as an advertising banner) not in your Lightroom library, a Quicktime pano video, or some other content altogether.

Galleria Slideshow

Galleria Slideshow

This option allows the embedding of a Galleria slideshow. In this presentation method, TTG CE2 Stage acts as a full-fledged image gallery plugin. Galleria slideshows support only small collections of images, but work fantastically on mobile devices such as the iPhone or iPad, with full-screen capability when double-tapped.

See a demonstration of the Galleria Slideshow presentation.

Photoswipe Slideshow

Staged Photoswipe Slideshow

The Photoswipe slideshow presentation allows TTG CE2 Stage to act as a full-fledged image gallery, without the need to embed external content. The slideshow supports larger collections than the Galleria slideshow, loading images as needed rather than preloading all images at once. Works on mobile devices such as the iPhone and iPad, but being a very modern gallery type does not support some older browsers, notably IE7 or Firefox 3. As I write this, Internet Explorer 9 and Firefox 10 are current browser versions, so some users may not be bothered by this lack of backward compatibility. However, if this bothers you, you should use the Galleria slideshow or one of the Flash gallery embed methods instead.

See a demonstration of the Photoswipe slideshow presentation.

Retouch Comparison

Retouch Comparison Presentation

The Retouch Comparison presentation type allows you to compare two images within a single frame. One image will be displayed; click that image and it will fade into the second image. Click again, and the second image will fade back into view. A common use for this presentation type would be to compare two renditions of the same image, such as an image before processing and the same image after processing and retouching. Alternatively, you may choose to show off one color rendition vs. a black-and-white rendition.

To see this presentation type in action, check out our demonstration.

To prepare this presentation type, you will want to have two renditions of the image in your filmstrip. The 'After' rendition should be first in the filmstrip, and the 'Before' rendition should be second. Set the toolbar to “Use: Selected Photos”.

Use: Selected Photos

If you're not sure where to find the toolbar, press 'T' several times on your keyboard to toggle the toolbar on/off. It should then be easy to locate.

Your two images should be cropped to the same dimensions.

It is also important to setup the grid to house your selected image(s). In the example above, we use the following the following settings for our grid:

Grid settings for a Retouch Comparison presentation

To give the impression that my image is framed, I am using a fixed-width container of 960 pixels.

I have set 10 pixels of padding on both the top and bottom of my container; to mimic this on the sides, I will reduce the width of my content by 10 pixels on the left and right ( 20 pixels total ). I have also set a 1-pixel border all around my container; to accommodate this, I will further reduce the width of my content by 1 pixel on the left and right ( 2 pixels total ).

My Content Width is therefore to be 938 pixels. That's my Container Width ( 960 ) minus my padding ( 20 ) and borders ( 2 ).

In the Output Settings control pane, I then set the Large Width of my images equal to my Content Width, so also 938:

Large Width for retouch comparison presentation.

With these values properly set, my Before and After image renditions should be perfectly aligned; my images will have 10 pixels of white matting surrounding, and a 1-pixel black border to offset the image from the background. I can save my setup as a template using the Template Browser, then reuse it later. You may wish to create separate templates for landscape and portrait orientation photos.

Still Image

Allows you to embed a single, still image into the grid. A great option for a no frills page meant to convey information rather than show off a pile of photography. If you're building extra pages to accompany TTG CE2 Pages, this is also a good way to go.

See a demonstration of a still image page here.