The Turning Gate

Adobe Lightroom Web Engines, Tutorials and Resources

TTG Stage

SimpleViewer, AutoViewer, SlideShow Pro, MonoSlideshow and more. A plethora of fantastic flash photo galleries, and all sharing a common problem: THEY’RE NAKED!

All the web’s a stage,
And your flash galleries merely players:

Dress them up!

TTG Stage provides the dressing: a page template featuring the TTG standard header and menu, auto index support, and more, accepting flash galleries as inline content.

TTG Stage currently supports Airtight Interactive’s SimpleViewer, AutoViewer and PostcardViewer, as well as MonoSlideshow, Polaroid Gallery, FlashNifties, SlideShow Pro, DIMIN Slideshow and the Lightroom Flash Gallery. TTG Stage can also display photo sets from your Flickr account.

TTG Stage

Add to Cart ( $5 ) View Cart

Forum Thread Installation

Sample Galleries

w/ Autoviewer w/ Flashnifties w/ Flickr w/ MonoSlideshow

w/ PostcardViewer w/ Simpleviewer




About Your Purchase

Upon purchasing a TTG gallery, you will receive a download URL valid for five uses. After five uses, your URL will expire and a new purchase will be necessary to keep up with updates. Gallery updates will always be available from that same URL. Thus, the URL can be used for the initial download, plus four updates. Be sure to save your URL in a safe place, as it cannot be retrieved if lost.

System Requirements

TTG Stage requires Adobe Lightroom 2.x.

Usage

TTG Stage is easy to setup. Configure the template to your liking. Set the stage width and height in the options, choose your Flash gallery from the list of supported galleries and, if you’re also using TTG XML Auto Index, select a handful of representative thumbnails from the filmstrip. They’ll be exported along with the template for use by the auto index (if you’re not using TTG XML Auto Index, feel free to delete the thumbnails folder created by the template on export).

The most important thing is to make sure you choose the correct type of gallery from the list of support Flash galleries, so that the template will know what to look for and where to find it. Your choices are listed in the format “Gallery Name (folder name)”, where the folder name is the name of the folder into which the Flash gallery should be copied so that the template can find it.

Next, create and export your Flash gallery.

To put the two pieces together, just copy your Flash gallery into a folder inside the TTG Stage folder. The gallery’s folder should be named according to the name given in parentheses above. For example, say you choose to create a SimpleViewer gallery. When setting up TTG Stage, you would select “SimpleViewer (simpleviewer)” from the list. You would then use TTG SimpleViewer Gallery or the Airtight SimpleViewer gallery that ships with LR to export your SimpleViewer gallery. Export the gallery to a folder called simpleviewer (case-sensitive), that being the name specified by TTG Stage, and copy that folder into your exported stage folder.

Run the index.html in your exported TTG Stage, and your Flash gallery will make grand entrance in its new clothes.

TTG MSS2 XMLer

TTG MSS2 XMLer is a tool to create the image array and image files necessary for the creation of Monoslideshow 2 galleries. Full instructions for use of this tool are self-contained within the web engine and will be displayed in Lightroom’s Web module on load. In addition, I have produced the follow two videos outline basic and advanced usage of the tool.

Changelog

v2.2 ( 2010-02-08 )
Cool new full-viewport liquid layout mode!
Important bug fix regarding duplicate <body> tags.
Fixed a bug when embedding Simpleviewer-2 galleries.
Changed handling of Google Analytics. Now requires only your Web Property ID (UA-xxxxxx-x), rather than the entire block of Javascript.
Because scripts can no longer be cheated into the Google Analytics entry field as before, I’ve added a new Advanced Options control group to the Output Settings control pane. There are three input fields: Add CSS rules in , Add script to and Add script before . CSS rules are visible in preview, while the scripts are only added when the gallery is published (exported, or previewed in browser) to prevent any possible Lightroom tantrums.
Added a new #wrapper DIV to the source code that allows for new custom styling possibilities.
Gallery Description can now be edited by clicking on headings and paragraphs in the preview.
Contact menu item can now be disabled.
Some tweaks under the hood.
v2.1 ( 2009-12-08 )
Support for Simpleviewer-2.
Revised font-stack implementation; added selectable font-stacks.
Added font-weight option for Gallery Descriptions titles.
Modified some default settings.
Updated in-engine instructions.
v2.0 (2009-08-13)
New header.
SWFObject.js 2.1 implemented.
Recoded implementations for all galleries in accordance with SWFObject.js 2.1.
Removed liquid layout options due to conflict with new header.
Added support for Monoslideshow 2.
Included TTG MSS2 XMLer tool for Monoslideshow 2.
v1.2 (2009-03-22)
Flickr support.
Polaroid Gallery support.
Built instructional documentation into the Web preview.
Code rewrite: Updated to LR2 SDK syntax.
v1.14 (2009-02-08)
Improved compatibility for DIMIN Slideshow.
v1.13 (2009-01-23)
Compatibility fix for TTG and Adobe AutoViewer galleries.
Added support for DIMIN Slideshow.
v1.12 (2008-06-30)
Added support for FlashNifties Gallery.
v1.11 (2008-04-21)
Bug fix.
v1.1 (2008-04-17)
Added support for Lightroom Flash Gallery and PostcardViewer.
New liquid layout mode!
v1.0 (2008-04-11)
Initial release.

{ 44 comments… read them below or add one }

Carlos Galvan March 17, 2009 at 7:28 pm

Hello Matt,

I see you have evolved again. Your looking too professional!

I’m using Stage v 1.12 to “Stage” Flickr sets. Looking good except the description text that I have added appears fine in IE and Opera but loses the Line Breaks in Firefox. I have tried and , and but FF is stubbornly not seeing the Breaks.

What should I try next?

TIA
Carlos

Reply

theturninggate March 17, 2009 at 8:44 pm

Looking at your source code, it looks like your line-breaks are being written as </br />. They should be <br />, without the preceeding slash.

That’s a great idea putting the Flickr slideshow in there. I might have to investigate that …

Reply

Rob March 24, 2009 at 10:43 pm

Hi,
Just got the Stage. Couple of questions:

Can I create multiple galleries, for example 5, each using simpleviewer and have them be available in the stage page, i.e., via the Menu Items? Or am I limitied to just one gallery, i.e., only one simpleviewer gallery?
I thought perhaps using the menu items I could link to multiple galleries each one using the same type flash gallery. But it seems that since you have to place your Flash files in one folder in the Stage folder, this is not possible, i.e., to have simpleviewer1, simpleviewer2, simpleviewer3, etc.

Reply

theturninggate March 24, 2009 at 11:33 pm

Hi Rob,

You can create as many Stage+Gallery combinations as you like, but you’ll need a stage for each individual gallery. If you want to handle multiple galleries, TTG Auto Index is probably your best option for navigating them.

Reply

pete March 26, 2009 at 3:11 am

Hello Matt:

Thanks for all the work. This may seem like a noob question, but how do I integrate TTG Stage with TTG LR Pages?

Reply

theturninggate March 26, 2009 at 10:35 am

They just go in different locations, and you can use TTG Auto Index or a link in the menu to link the pages together. Typically, TTG LR Pages would go into the root of your website, making it the default page for visitors to land upon when they visit your URL. TTG Stage would be in its own folder. So http://www.domain.com might be the location for TTG LR Pages, while http://www.domain.com/gallery01/ would get you to the stage/gallery.

Reply

moritz May 15, 2009 at 3:56 am

hey matt,

is there any possibillity to set the flash-stage (monoslideshow) not in the center but on the left? when I turn off “stage dimensions fixed” the flash-stage glues on the very left end. can I insert a boundary?
thanks for your help, great plugin!
marvelousmo

Reply

theturninggate May 15, 2009 at 8:14 am

Hi Moritz,

Off the top of my head, I can’t remember how the the stage was centered. You could probably do it by locating the code for the stage wrapper, and changing the CSS from “margin: 0 auto;” to whatever you want those values to be. It’s the “auto” that does the centering, if that’s the method I used. It usually is.

Reply

John July 15, 2009 at 10:51 pm

Hey Matthew,

I downloaded Stages and it’s awesome. My question however has to do with the Menu Items. Right now it seems that it defaults to right aligned. Is there anyway to have it center aligned? Maybe I missed the box, but I’ve looked for it and don’t see any way to make that adjustment.

Thx

J.

Reply

theturninggate July 16, 2009 at 12:11 am

Hi John,

TTG Stage still sports the old TTG header, in which the menu cannot be realigned. When I get around to updating the engine with the new TTG header, as currently seen in TTG Highslide Gallery, LR Pages and Auto Index — then the menu alignment will have options. Like the Monoslideshow engine, it’s on my to-do list … I spent most of today working on a forthcoming update to the Highslide gallery, though, so work is being done, and I’m gradually chipping away at that list. :-)

Reply

walter July 24, 2009 at 5:21 pm

Hello Matt, I’m a bit lost. Where can I find the information to configure the “about” and email form?

Reply

theturninggate July 24, 2009 at 10:06 pm

Hi Walter,

Sounds like you’re talking about TTG LR Pages, not TTG Stage. Why don’t you email me directly and we’ll help sort you out.

Cheers,
Matt

Reply

Andrea August 6, 2009 at 7:43 pm

I use the TG Stage and I love it, I’d like to know if is possible to have more than six galleries on the menu. If I could have it and also move the menu(center and left) would be perfect!!!!

Thank you.

Reply

theturninggate August 6, 2009 at 8:01 pm

It will all be possible in the next update, when I replace the header with the new version found in TTG Highslide Gallery.

Reply

labro August 13, 2009 at 1:19 am

I am in a hurry it is updated to fit the new LR page.
A general question :
When I insert a swf in a html page I always use dreamweaver and insert>media>flash.
Normally it works fine.
However with monoslideshow2 you don’t support actually, it doesn’t work (problem reading xml,…) while their html page works.
Their html page and TTG stage uses same technique : using swfobject
code is very different from insert flash.

What is the difference between two techniques ? Is swf recommended in general ?

best regards
Marc

Reply

theturninggate August 13, 2009 at 3:35 am

@labro

It is generally better to use swfobject.js to embed Flash in your pages. There are numerous reasons for this, but it’s a complicated discussion I need not have here.

I have actually spent my day working on both TTG Stage and Monoslideshow 2, and will have a release prepared shortly. Monoslideshow 2 is going to work a little differently than my Monoslideshow 1 engine, but it is necessary. I will explain later.

I have also recorded two new video tutorials showing how to use these tools in tandem, so it should be a good release when I’m ready to post it.

Reply

Scott August 16, 2009 at 7:54 pm

TTG Stage is working great for me, thanks again for the great product! I am running into a problem trying to use monoslideshow. When I select the TTG MSS2 XMLer engine in LR to generate the code to combine with monoslideshow’s code, I get an error message inside LR which starts with “[string "manifest"]:15: unexpected symbol near ‘-’”

I know I’m probably doing something stupid on my end to cause this, if you could point me in the right direction to correct his I will be eternally grateful!

Thanks!

Scott

Reply

theturninggate August 16, 2009 at 8:38 pm

That’s one I am not familiar with. Can you send me a screen capture of the error?

Also, have you changed the manifest.lrweb file at all? Can you copy and paste the entire contents of the file into an email to me?

Reply

John August 18, 2009 at 7:27 pm

I just can not figure out how to use Stage! You make is sound so simple… yet nothing. Is there a step by step tutorial or instruction I can read?
Baffled
JJ

Reply

theturninggate August 18, 2009 at 10:58 pm

Hi John,

Watch this video, which shows how to create a gallery for Monoslideshow 2. In doing so, it also shows you how to use TTG Stage.

Most galleries are easier overall to create than Monoslideshow 2.

Reply

Nick August 19, 2009 at 9:25 am

Hi Matt

Is it possible to increase the dimensions of the stage in Auto Stage? My screen is 30″ and I would like to maximise the use of it. At the moment the stage size is limited to what is available on the slider and id the simpleviewer images are larger than the stage I get the scroll bars. How can I increase the max size of the stage?

Nick

Reply

theturninggate August 19, 2009 at 11:42 am

I would have to increase the range of the sliders in the release.

Something you should consider, however, is that all of your visitors may not also have 30-inch, high resolutions screens. If you make your gallery so large, it might not fit within their displays. The web isn’t about your computer, but about everyone else’s.

Reply

John August 24, 2009 at 10:55 pm

@theturninggate
Sorry, but I think I a few steps behind you! How do I get Stage to show up in LR2.4? I am going to try to use it with Nifties. I got Nifties to do what I want, but can not find any way to get Stage involved.

Reply

theturninggate August 25, 2009 at 12:18 pm

@John
If you’re having trouble getting the template to appear in your Engines list, please refer to the installation instructions linked above.

Otherwise, select it from the Engines list, configure it to your liking and set the gallery type for FlashNifties, then export. You will need to export Stage and your Flash gallery separately, then merge the folders as instructed on your desktop (copy the properly named Flash folder inside the exported Stage folder).

Reply

John August 26, 2009 at 12:38 am

Hi there, I am having the same problem. Is there a solution that could help. Appreciate the advice.
John

Scott :
TTG Stage is working great for me, thanks again for the great product! I am running into a problem trying to use monoslideshow. When I select the TTG MSS2 XMLer engine in LR to generate the code to combine with monoslideshow’s code, I get an error message inside LR which starts with “[string "manifest"]:15: unexpected symbol near ‘-’”
I know I’m probably doing something stupid on my end to cause this, if you could point me in the right direction to correct his I will be eternally grateful!
Thanks!
Scott

Reply

theturninggate August 26, 2009 at 1:54 am

You’re not doing anything wrong or stupid. It’s a bug. I have it fixed, but haven’t gotten to update the distributable yet. I will hopefully get to do that tomorrow.

Reply

theturninggate August 26, 2009 at 2:49 pm

I’ve just replaced the distributable for TTG Stage with a new version fixing the TTG MSS2 XMLer bug. This is the only change. You can access the new version via your download URL, but I would hate for you to waste one of your limited downloads on this fix — the bug was my own fault, and you’re not getting anything else. Therefore, if you are experiencing this bug, please email me with proof of purchase and I will send you the new version.

Reply

ChristophvL August 30, 2009 at 3:49 am

Matthew, thank you so much – you saved me hours of artful search&replace (I still used your Monoslideshow 1.3 template and changed the “content” section manually into the required format). And finally, your video desribed how I can get all the kenBurnsStartRectangle tags and so on right there for me to fill in the coordinates. Wonderful!
One question: Whatever I do, I cannot get Lightroom to remember the “Sharpening” setting – it always defaults to off. Is there a way (even if by editing one of those magic files) to switch it permanently on?
Christoph

Reply

theturninggate August 30, 2009 at 10:09 am

I believe that’s a bug in Lightroom. Unfortunately, there is no way you can set it via code.

Reply

Andrea September 3, 2009 at 9:22 am

I got the new TTG Stage and I like the option to put id plate in menu bar, but I’d like to set idplate as hyperlink, is it possible? I tryed and I couldn’t figure it out.
Thank Matthew for your great work.

Reply

theturninggate September 3, 2009 at 11:22 am

@Andrea
It’s not possible to set the identity plate as a hyperlink in the menu. It can only be hyperlinked in the header.

Reply

James Taylor September 15, 2009 at 1:39 pm

Hello,

I just picked up TTG Stage to “dress up” my Slideshow Pro plugin for Lightroom. However, the window in TTG Stage is not large enough to get the entire slideshow in it (the thumbnails are half cut off). I must be missing a setting?

Mac – Leopard
Lightroom 2.4

Thanks,

James

Reply

theturninggate September 15, 2009 at 2:15 pm

Hi James,

You can resize the stage using the Stage Width and Stage Height controls in the Appearance pane.

Cheers,
Matt

Reply

James Taylor September 15, 2009 at 2:35 pm

Thanks Matt!

I thought I tried that yesterday without any luck, but it is working today!

JT

Reply

Joe October 21, 2009 at 1:58 pm

Just upgraded to v2 from v1.2. Is it no longer possible to put the Gallery Description in the header with the new version like v1.2 or am I just missing it?

Reply

theturninggate October 21, 2009 at 3:30 pm

It is no longer possible. The header is now much more flexible, though, allowing for a greater variety of layouts utilizing the identity plate and menu.

Reply

Todd Davis December 31, 2009 at 7:00 pm

HI,

Great products… but help I cant seem to find the files for the form to e-mail implementation. I have both the postcard and the stage applications and have followed the instructions to open the package… but the file does not appear to be in the resources folder. Any thoughts you may have would be greatly appreciated.

Cheers,

Todd

Reply

theturninggate December 31, 2009 at 7:11 pm

It’s not there. Those products have no form-to-email functionality, and therefore no script.

Reply

Remco February 15, 2010 at 12:01 pm

Hi,

I am using TTG Stage 2.2 and I seem to be missing an option. Under Menu Settings for TTG Stage there is no “Font-Weight” option. My website uses bold font for the menu settings (TTG Pages has this option). If I export TTG Stage then my top level menu is going to look different compared to my other pages. Is this font-weight option listed somewhere else or can I resolve this issue another way?

Thanks,

Remco

Reply

theturninggate February 15, 2010 at 5:13 pm

TTG Stage is lagging behind TTG Pages in implemented features. I will need to catch it up in an update sometime soon.

Reply

labro February 18, 2010 at 6:48 am

are chai latte, creative,dark city,… templates available for ttg stage in order to have same look for it than ttg page ?
in the meantime i am making print screens of chai latte settings

marc

Reply

theturninggate February 18, 2010 at 8:09 pm

Presently, there are no presets available for TTG Stage. See this tutorial on lrtemplates.

Reply

labro February 18, 2010 at 9:51 am

To avoid vertical scroll bar on my 10 inches 600px resolution asus eeepc with chai latte, i need to reduce spacing between stage from 20 to 15px (menu>margin-bottom:15px) and, what i have just discovered in your css, remove your 20px margin bottom in the body because 60px header+20px menu+20px spacing+720×480ssp=580px so this margin toggles on the scroll bar.
I tested with success in dreamweaver. I’d like to put in your css input filed of ttg stage and in a near future in ttg page chai latte. Like that i can use same template for all my albums without using dreamweaver.

Here is the modified code :
#menu {
border-top-width: 0px !important;
border-bottom-width: 2px !important;
margin-top: 0;
margin-right: auto;
margin-bottom: 15px;
margin-left: auto;
}

body {
background-color: #D5D3C3 !important;
text-align: center !important;
padding: 0.00 !important;
color: #777777 !important;
font-family: Corbel, ‘Lucida Grande’, ‘Lucida Sans Unicode’, ‘Lucida Sans’, ‘DejaVu Sans’, ‘Bitstream Vera Sans’, ‘Liberation Sans’, Verdana, ‘Verdana Ref’, sans-serif !important;
margin: 0 !important;
font-size: 10px !important;
}

Do i copy all these lines in the “add css rule in head” or only the modiified lines ?
How can i be sure my lines will overwrite yours because there will be two definitions in gallery.css

marc

Reply

theturninggate February 18, 2010 at 8:11 pm

You should perhaps do some research on the CSS cascade, and which items take precedence over others depending up order and location in the cascade. Pasting them into the head of the HTML file, within <style> tags should do it.

Reply

Leave a Comment