• Mar
  • 18

TTG LR Pages

Current version 1.2

Adobe Lightroom has made web photo galleries easy. Gallery indices have brought disparate galleries together into navigable collections. But still, something has been missing. While Lightroom has allowed users to disseminate their photography to the web, web photo galleries do not a website make. TTG LR Pages generates what the standard templates do not - not galleries, but pages - finally allowing Lightroom users to generate complete websites from within the Lightroom Web module.

Features

TTG LR Pages generates two pages, intended for use as a splash, or Home, page and an About page. Each page allows for one image, and up to five headings and paragraphs; the template allows for up to five menu items, plus a contact link and linkable ID plate. Four layouts are available, and each of the two pages' layouts can be chosen independently of the other. Optional MonoSlideshow integration (see below).

TTG LR Pages 1.2

Download | Sample Gallery | Forum Thread | Installation

System Requirements

TTG LR Pages is written in Lua and requires Lightroom 1.3 or greater. The Form-to-Email script requires a web server running PHP.

Notes on Usage

Force Reload Some of the Web module controls only partially live update. To ease use of this gallery, I've included a checkbox titled Force Reload. The state of this checkbox - whether checked or not - has no bearing on the gallery whatsoever. By toggling the state of the checkbox, however, you can force the page to re-render, updating the page with your changes. If some of your adjustments seem wonky, Force Reload and see whether the wonkiness disappears. Most of the time, it will. Selecting Images For Your Pages TTG LR Pages makes use of up to three images (one if you enable MonoSlideshow, below). To choose which images the gallery employs, select two images from your library - if the images come from separate locations/collections, add them to your Quick Collection - then jump to the Web module. The first image selected will be used on the Home/Splash page; the second will be used on the About page. Even if you enable MonoSlideshow to replace the Home/Splash page image, the About page will still use the second image selected. To wit, you'll need to select two images, even if only the second image is being used. Contact Form Setup In order for the form submission to reach you, the photographer, the form-to-email script needs to be configured. First, configure and export your gallery from the Lightroom Web module, as usual. Next, open the FormToEmail.php file. Locate “Step 2” on line 69, and follow the instructions you find there, setting your email address and, optionally, a continuation address to which users will be redirected after form submission. Rather than editing the PHP file for each exported gallery, users might prefer to edit the FormToEmail.php in the template archive. Then, each exported gallery will already be configured for your address.

Using TTG LR Pages with MonoSlideshow

TTG LR Pages includes options to replace the images on the home or about pages with MonoSlideshow presentations. Setting this up is a simple process, but requires TTG MonoSlideshow Gallery and a purchased copy of MonoSlideshow ($19.95). To add MonoSlideshow to your TTG LR Pages implementation, enable the "Prepare Home for MonoSlideshow" checkbox, found under the Appearance pane in the Web module. Set the desired background color and stage dimensions for the slideshow. For the time being, you'll only see an empty box where the slideshow will be. Finish setting up your gallery and export. Now, switch galleries to TTG MonoSlideshow Gallery. Configure your MonoSlideshow gallery any way you like. The Stage Dimensions should match the dimensions, width and height, you entered into the TTG LR Pages template just exported. When you're finished configuring your MonoSlideshow gallery, export it to a folder named monoslideshow. Last, copy the monoslideshow folder, containing your TTG MonoSlideshow Gallery, into the exported folder for your TTG LR Pages setup (you could save yourself this step by exporting MonoSlideshow directly from LR into your Pages folder). As long as the monoslideshow folder is located within the Pages folder, the slideshow should appear when you run the TTG LR Pages exported index.html file. If you'd later like to update or replace the MonoSlideshow presentation with a new version, just overwrite the monoslideshow folder with a new one. For the slideshow on the About page, follow the steps above, but name the slideshow folder aboutmonoslideshow.

FormToEmail Pro

If you'd like additional features from your contact form, you might want to consider purchasing FormToEmail Pro. FormToEmail Pro is a more robust version of the FormToEmail script already being used by TTG LR Pages, and adds a number of features to the script including the ability to sort form responses (the free version sorts form responses in the order they are submitted, which can get messy with complicated forms such as those employed by the Client Response Gallery), spam protection, auto responding, no branding and more. For a full run-down of features, visit the FormToEmail Pro page. FormToEmail Pro costs less than $20.

Changelog

v1.2 (2008-04-03)
Now generates a Contact page with contact form.
Added separate sliders for controlling copy width on Home, About and Contact pages.
v1.11 (2008-03-28)
Further separated MonoSlideshow options for Home and About pages. It's now possible to put different slideshows on each page, each with it's own independent settings and locations. Home page slideshow should be placed in the ??monoslideshow?? folder; About page slideshow should be placed in the ??aboutmonoslideshow?? folder.
Anything labeled "Splash" before is now labeled "Home".
v1.1 (2008-03-22)
Added footer options.
MonoSlideshow now available on About page.
Revamped Remove Live_Update.js control scheme.
v1.0 (2008-03-18)
Initial release.

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 »

Comment »

stuart
19 March 08 / permalink

thanks so much for all your great templates – look forward to trying this out.
Adobe should be grateful for all your hard work – you’re making Lightroom so much better!

Geoff
20 March 08 / permalink

LR Pages is a great advance. Many thanks. Is there any chance of getting the MonoSlideShow option on the About page?

Matthew
20 March 08 / permalink

I can do that. Coming soon!

Geoff
23 March 08 / permalink

Thanks for 1.1 update. Great help.

Bill (Satin Images)
25 March 08 / permalink

Hi Matt,

The TTG LR Page has been what I’ve been waiting for to finish the front end of my Lightroom Galleries with a “Professional” opening. I ran into a hitch while working with it that I can’t figure out. When I try and link to the about page I get an error which is “?0:0 attempt to index a nil value”. This occured after I was well into modifying the menu options and two pages and I’ve been unable to resolve it. I also recently updated LR to 1.4 but don’t remember if it was before or after. I’ve gone so far as to completely delete the TTG zip and extracted folders from the Lightroom Galleries folder (Vista 64) and redownloading and extracting them, with no resolution. The error occurs when I click on the about menu option. Clicking on the header takes me to “home” and the contact info work fine. In addition to the error it throws the entire page of code starting with:
<% —[[ Include the page header]] %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en”>
<head>
<meta http-equiv=“content-type” content=“text/html; charset=utf-8” />
<title>$model.metadata.htmlTitle.value</title>

Any ideas?

Regards,

Bill

Bill (Satin Images)
25 March 08 / permalink

Matt,

The actual error line is:
<div id=“gallery” style=“width: <%= math.floor( getImage(2).renditions.photos.width + model.nonCSS.galleryWidthAdjustment ) %>px;”>

Regards,

Bill

Matthew
25 March 08 / permalink

Hi Bill,

Are you attempting to use Template presets made with a prior version of the gallery? If so, delete the presets and rebuild from scratch. Another user had the same problem and that fixed it for him. Let me know whether that works.

Don Vine
26 March 08 / permalink

Matt,

What I would REALLY like to see in the pages template is the ability to place the link thumbnails from the Album Index template onto the stage area of the Page.

Or even the output of the flash portion of ANY gallery on the stage.

Then what you would have is a very consistent look when you moved from one show to another… no jumping of the menu bar and header as you jumped from page to page.

No idea whether this could be done or not.

Geoff
28 March 08 / permalink

Matthew
I am able to get the same MSS showing on both Splash and About pages. However, I can’t get a MSS to show on just the About page. In LR under Appearance you can’t access stage dimensions or Background color unless you have ticked “Prepare Splash for MSS”. If you tick this as well as “Prepare About . . “ the MSS shows on both pages.

So, is it possible to run MSS only on the About page? Is it possible to have a different MSS running on each page?

Kind regards, Geoff

Matthew
28 March 08 / permalink

Doh! The controls were an oversight.

I can make it possible to run different slideshows on each page. I just need to put some more work into it. Will fix for the next release, and soon.

Bill (Satin Images)
7 April 08 / permalink

Hey Matt,

Sorry it’s taken me so long to respond back… Been out of town on business. What I overlooked was using more than one image… I had planned on having the same single image on both the splash and about page. On a hunch, I added a second image and it was fixed.

I had only planned on using multiple images in the galleries themselves. Not a big deal as I can choose two images that will work just fine.

I love the layout and will use these two pages as a spring board into my galleries themselves.

Regards,

Bill

Darrell
22 April 08 / permalink

When I click on a check box to activate an added menu item (ie.. for a gallery page)in the template, how do I get it to create the new page? All I get is an error page message.

Also how do I create a gallery page to have multiple galleries indexed on the page?

Matthew
22 April 08 / permalink

Hi Darrell,

TTG LR Pages produces a home page, about page and contact page and that’s it. You can’t create additional pages by adding a menu item, but have to generate additional pages externally and make sure your menu links go to the right place.

For a gallery index, you should check out TTG XML Auto Index or one of my other indexing options.

Darrell
24 April 08 / permalink

Thanks I will look into the auto index.

You have some great stuff here.

Chris Conroy
2 May 08 / permalink

Matthew, first let me say, Thank You, for your diligence and hard work assembling all of the wonderful software, information, podcasts etc.. I developed my site, short of the flash intro, entirely in lightroom with the assistance of TTG and Monoslideshow. It’s not entirely complete but I launched it today and wanted to express my appreciation and admiration for how well you’ve put all of this together. I will be making a donation.

A couple questions, of course. As a photographer I really want the images to be large and predominant. But I’m concerned about load times and image optimization.

A) How and where would I embed a ‘loading’ bar as Pages is finding/loading the Monoslideshow.

B) I’m in love with the Ken Burns effect, but how much does it add to the load time?

C) What is the optimum file size/MSS window size relationship so that the images are optimized and sharp and work best with the KenBurns effect. Right now I have them the same and I have to say the images aren’t as sharp as they are without K.B.. Is there a formula?
Best, Chris

Matthew
2 May 08 / permalink

Hi Chris,

These questions would probably be better posted on the MSS forum.

To embed a loading bar, you’d need to be familiar with Flash. The MSS manual explains how to embed MSS into another Flash project, and I imagine that’s how it would have to be done. As for creating a loading bar, you can probably find some freebies via search engines, or turn up applications that specialize in loading bar creation, like Vertical Moon Lock’n Load.

I don’t think the Ken Burns effect adds to the load time at all. The Ken Burns instructions are contained within the monoslideshow.swf file, and that gets loaded whether you use the effects or not.

For question C, the answer I’m going to give you is not directly the answer you’re asking for, but I’m not sure that answer exists. The Ken Burns effect will cause your images to fill the viewport, and will upscale them to do so if they are too small. With that in mind, the width of your images should be equal to or greater than the width of the viewport. The effect is best used with photos matching the orientation of your viewport. In most cases, you should try to limit the Ken Burns effects to your landscape oriented images, as they will usually fill the width better than portraits, which would be cut off top and bottom.

But, of course, a still image will usually appear sharper than a moving image, so you need to keep that in mind too. Flash is intended for animation, but you’re not dealing with HD-TV.

Like I said, though, you might want to repeat your questions on the MSS forums. You’re likely to get better answers than I can give.

Brian
3 May 08 / permalink

Hi Matt,

LRPages is a really good idea, but I have come across a problem with entering paragraph text in the various pages. As it is at the moment I find that one can’t enter a list of items – e.g. a list of one’s equipment or lenses etc. One can get a new line by Alt + Enter but it then puts a /n or something and continues on the one line.

Is there any way of doing this? Or can you in an update add a table/list facility to one of the paragraph entries in the About page?

My second question is to do with php in FormtoMail and in general. My webhost has a separate area for php. Do I have to place all the pages etc in that zone or just the php files? I presume that to get the page I would then use index/php?? I am a complete newbie at this php stuff so your help would be much appreciated.

Thanks once more
Brian

Chris Conroy
3 May 08 / permalink

Mathew,
Thanks for the response.
Glad to hear that KenB is not weighing down the load times. I optimized the images by sizing them to match the viewport exactly (adding dead space with the same background color around the verticals which seems to work well) and when they complete the pan they ‘snap’ in to sharpness, just not as sharp while panning…
I was hoping that perhaps there was a formula of percentages: KB 5% pan requires images 5% larger than viewport. I’ll experiment and let you know what I find.

I will dig in to the MSS manual in regards to embedding a loading icon, but the unpredictability of the load times paired with the sluggish and unpredictable response to navigation input is proving a little frustrating. And it seems to vary. The images don’t seem to cache, because even returning to a previously viewed image I’m still staring at the load icon and watching it jump around… I am loading 1000×649px images so understandably slow-er, but I’ve perused many sites loading similar image sizes much faster.

So if you have ideas for expediting load times I’d appreciate it.

Best,

Chris http://www.chrisconroyphotography.com

Matthew
3 May 08 / permalink

@Brian:

Lightroom isn’t very HTML-friendly, and so it’s difficult/impossible to format text via the options panes in the Web module. These things must be done in code. I can’t facilitate a list without knowing how many list items to include, and I’m not very interested in cluttering the panels with a plethora of controls for lists, because I imagine I would need a lot of them,, with controls to toggle each list item on/off, fill in the text, etc.

I have two suggestions for you. 1) List your gear in a paragraph, separated by commas, or 2) Edit the about.html file post-export to add the list manually. Even with little or no experience writing code, lists are dead simple. Documentation.

As for your PHP issue, I’m not sure exactly, but I would imagine you can just move the FormToEmail.php file to the required location, then open the contact.html file and find the reference to that file; update the URL for the form so that it continues to point to FormToEmail.php in its new location.

@Chris:

No ideas for faster loads except smaller images. MSS is a great product, but could probably use some updating. I hope Monokai finds time to work on it again.

Brian
3 May 08 / permalink

Thanks Matt – I’ll try your suggestions and report back in due course!

Chris Conroy
10 May 08 / permalink

Mathew, Just to follow up. I had errant .html suffixes on my album folders. The browser would figure it out eventually, but once repaired, speed/reliability improved enormously. My bad…

Can I delete the ‘live_update.js’ file after exporting and achieve the same lighter load times as ticking the box on export?

I have the ‘show MSS logo’ deselected yet I get an MSS logo on opening of each gallery… Ideas? Thanks yet again.

Best, Chris

Matthew
10 May 08 / permalink

Chris,

You can delete the live_update.js file, sure. The script call will still be in the HTML, though, unless you want to remove that manually.

As for the logo, it’s a variable passed via the HTML. The LR Pages MSS uses it’s own HTML for MSS, separate from the HTML generated by TTG MonoSlideshow Gallery, and so disabling the logo in TTG MonoSlideshow Gallery will have no effect on MSS being used with TTG LR Pages. You should be able to hide it by switching the showlogo variable to false in the exported HTML.

Cheers,
Matt

Linda Quinn
23 May 08 / permalink

Thanks so much for providing a template for a complete gallery website through Lightroom. I do have a question for you. I have a site I made for a friend, and I want to add a link in paragraph text on the ABOUT page. I successfully added the link code to the text, but I need to change the link color for just the link inside the P tag, leaving the menubar link color as is. I tried added it to the STYLE section in the head, but it doesn’t work. Any suggestions. Thanks

Matthew
23 May 08 / permalink

@Linda,

Lightroom appends !important to every line of gallery.css, which prevents the CSS instructions being overwritten by instructions further in the cascade. You should be able to assign separate instructions by applying !important to your inline CSS styling, and maybe using a class for the link, like this:

a.paragraph { color: #ededed !important; }

Matt
3 June 08 / permalink

Hi again, please ignore my last email! I fixed it reading through above as it seemed to be the same issue Bill (Satin Images) was having – trying to find additional images to display on the “about” and “contact” pages. All cool!

Eric
17 June 08 / permalink

Hi, first of thank you very much for all the nice stuff. I have a problem with TTG LR Pages and german “Umlauten” like ä, ö, ü and so one. Is there a chance to fix this?

Example here: http://knipsograf.kilu.de/about.html

Kind regards Eric

Matthew
17 June 08 / permalink

Hi Eric,

I wouldn’t even know where to begin with special characters for non-English languages. You might try posting on Lightroom Forums, and if someone knows a solution I can try to get it into an update.

John Kjellberg
19 June 08 / permalink

Hi, I had problems with FormToEmail and Swedish characters (åäö). I ended up using FormToEmailPro with gobbledegook turned off on line 342. I also changed charset to utf-8 on line 1253 to make the “thank you” page readable even by Mr Åke Söderblom.

Matthew, what you give us is really nice. Hope you’re getting many donations. Donation ware is so nice.

John

Matthew
19 June 08 / permalink

Thanks, John, for the compliments and the information. I’m sure that will be helpful to many users.

Colin
20 June 08 / permalink

How do I install Pages? I tried the Web Galleries and Web Templates folder and now I’m starting to feel challenged… Please help.

Matthew
20 June 08 / permalink

Just follow the instructions on the Installation page. And make sure you’re running the latest version of LR.

Choke
16 July 08 / permalink

Hi

I must say that I really love your web-layout and I will use it for my new Photo site.
I have one small question, I guess I have missed something. I would like to change the size of the picutre on “about” page, a little bit like you have on your example. Have not yet decided if I will use the monoslider, just for a start I will be happy with static pictures. So how do I change the size of the picture, have found hove to change the paragraph size.

Thanks for any help
Choke

Matthew
17 July 08 / permalink

Choke,

The image size sliders are located under the Output Settings pane.

Choke
18 July 08 / permalink

Matthew,

Thanks for your help.
Once again thanks for you work.

Best regards
Choke

Tom
21 July 08 / permalink

Hi Matthew,

I’m having some problems with the Monoslideshow on the home page in TTG LR Pages. Previously the monoslideshow was working fine on both the home and about page. Today I decided to implement a new gallery on both the home and about page. The gallery is the same as before but now uses a ken burns effect.

This works on the about page, but the home page gallery is broken, there is no ken burns effect and the gallery is very slow and jerky, and the load times are awful.

I created both galleries in exactly the same way, using the same procedure as before, export to a monoslideshow and aboutslideshow directories and upload with Transmit. Strange!

Thanks again for your work,
Regards,
Tom.

Matthew
21 July 08 / permalink

@Tom:

I have, in the past, found that MonoSlideshow sometimes exhibits strange behavior when you’ve changed a previously existing gallery over to a new one. I found it had to do with my browser cache, and MSS having cached itself and its resources there. Try clearing your browser cache and then force a page reload (hit Ctrl-F5 repeatedly on Windows; Cmd-R repeatedly on Mac).

If that doesn’t work, get back to me with a gallery URL so that I can take a look.

David
22 July 08 / permalink

Matthew,

First off, thanks for a great website. I really appreciate everything you are doing here.

I am having problems getting the contact page with formtoemail working correctly. Everything is uploaded okay, I run therough the form on my test website, it says it has sent the mail and returns me to my index page. I never receive the email though. My host is Yahoo business services. In their settings sections it says that I can only send php mail from a address in my domain, and the errorlog file gives the error “from address not in member domain”. I have followed their instructions and entered in a correct address, but it still doesn’t work.

There is also the following comment on their help page….

“You will also need to indicate the path to the Yahoo! mail program, Sendmail. The path to Sendmail is /usr/sbin/sendmail.”

I have no idea what to do with this comment, or if I even need it. I have searched high and low on the web for an answer but to no avail. Do you have any ideas, or has anyone else got this working with Yahoo Business Hosting?

Keep up the good work!

Sincerely,

DavidM

Matthew
23 July 08 / permalink

It sounds as if Yahoo Business Hosting may be incompatible with generic FormToEmail scripts like this one. PHP support on these types of services is often wonky. I think you’d be better served using a more standard hosting provider. I’ve had good experiences using SiteGround.

Name:

Email:

URL:

Comments support Textile formatting & Gravatars.

my personal information