TTG Pages 3.0

Matthew Campagna has launched TTG Pages 3.0. TTG Pages 3.0 is a spiritual successor to TTG LR Pages featuring many improvements, as well as integrating features from TTG Auto Index and TTG Stage. It's more powerful, more flexible and easier to use than any of its predecessors. Features include:

- Creates Home page, About page, Contact page and self-populating Album Index.
- Much improved Contact form featuring flexible visual and positioning customization and input validation.
- Full integration of TTG Stage, supporting the following Flash galleries: Autoviewer, Postcardviewer, Simpleviewer, Monoslideshow 1.x and 2.x, Slideshow Pro, FlashNifties, Dimin Slideshow, Polaroid Gallery, the Lightroom Flash Gallery and Flickr.
- Pre-built site navigation menus.
- Six new site templates.
- Includes TTG MSS2 XMLer for creating Flash galleries with Monoslideshow 2.x.
- More user-friendly for novice and veteran Web module users alike!
- Longer subscription terms for updates.

The cost is $25. Those previously subscribed to TTG LR Pages have been sent discount codes for the upgrade.

More information is available at The Turning Gate.

And a live demonstration here:
http://demo.theturninggate.net/

Modifying the Lightroom Flash Gallery for Windows Servers.

A recurring question that I get is how to get the Lightroom Flash Gallery to work with Windows Servers. By default, Lightroom exports web images into a folder called "bin". This folder as it turns out, causes problems with Windows Servers. To get around this you have 2 options: Modify the gallery, or copy it and modify it. The latter is the safest way.

First you need a copy of the gallery.
Mac. Control Click (or Right Click) on the Application file: Adobe Lightroom.app.
From the menu, choose 'Show Package Content".
A window will open with a folder called 'Contents'. Open this and then open 'Plugins'.
Control Click (or Right Click) on the file: Web.lrmodule.
From the menu, choose 'Show Package Content".
A window will open with a folder called 'Contents'. Open this and then open 'Resources'.
Finally open the folder 'galleries'.
Inside is a file called 'default_flash.lrwebengine'.
This is the file you need to copy.

XP: The default location for the file you need is C:\Program Files\Adobe\Adobe Photoshop Lightroom 2\shared\webengines.
Inside is a file called 'default_flash.lrwebengine'.
This is the file you need to copy.

Vista: I don't have Vista to check, but I think it's also in a similar location inside the Lightroom Program folder.


The location this needs to be copied to is found with Lightroom open and going to the Presets tab of Lightroom Preferences (Edit>Preferences on PC, Lightroom>Preferences on Mac). From there click the 'Show Lightroom Presets Folder" button. Inside the window that opens, create a folder called 'Web Galleries" (no quotation marks), if it doesn't already exist. Open this and copy'default_flash.lrwebengine' into.

Open the default_flash.lrwebengine folder (you need to right/ctrl click on Mac and choose Show Package Contents). Inside are a number of files, but the one we need is called 'galleryInfo.lrweb'.

In the version I'm looking at (V2.4 on Mac), lines 21 and 22 read:

	title = LOC "$$$/WPG/Templates/Flash/Bluefire1=Lightroom Flash Gallery",
	id = "com.adobe.wpg.flash.bluefire1",

Change these lines (they may be different line numbers for you) to

	title = LOC "$$$/WPG/Templates/Flash/Bluefire1=Lightroom Flash Gallery MOD",
	id = "com.adobe.wpg.flash.bluefire1mod",

Then after Line 45

	[ "photoSizes.tracking" ] = false,

Add the following lines:

		["photoSizes.large.directory"] = "large", 
		["photoSizes.small.directory"] = "small", 
		["photoSizes.medium.directory"] = "medium", 
		["photoSizes.thumb.directory"] = "thumb", 

What we've done here is to give our copied gallery a new identifier for Lightroom, and a different name that will appear in the Engines panel of Web. The 4 new lines create new folders for the generated images for the gallery, and are not inside a 'bin' folder.

Save the file, and then restart Lightroom. A new gallery should appear in the Engines panel of web called 'Lightroom Flash Gallery MOD'. Use this to generate your galleries. Please bear in mind any of the Flash Web Templates will call the default gallery, so make sure the Engines panel reads Lightroom Flash Gallery MOD if you apply a Template.


And now for the fun bit:
Disclaimer: This information is provided 'as is' and may or not work for you. You agree to hold Sean McCormack/Lightroom-blog.com harmless for any damages that may occur due to use of, or inability to use, this workaround. Using this information is entirely at your own risk.

Watermarking Web Galleries with LR2/Mogrify

One feature sorely lacking in Lightroom is a good watermark on Export. Using the fabulous 3rd party plugin LR2/Mogrify from Timothy Armes solves this issue for a straight export, but unfortunately post process plugins are not available in the Web Module. So how can we do it?

Well for my recently launched music photography website Muso Foto, I wanted nice (i.e. not the normal Lightroom one) watermarks on my images. Nothing intrusive, but something that doesn't take from the image.

Here's the steps I took:

1. Create the web gallery as you like. Leave the Add Copyright Watermark off. Also create a nice logo using the Identity Plate. Set the Quality high (like 95 or so).

2. Export the gallery to a folder (shortcut Cmd/Cntrl J).

3. In Library navigate to the folder you created via Import. Locate the folder with the large images. With LRB Portfolio, this is called 'large'. In the default HTML, this may be something like 'bin/images/large'.

4. Import this folder in to Lightroom via 'Add to Catalog'.

5. Select all the images in the folder.

6. Click Export.

7. Using Files to Disk, I set up the export as below: Jpg, sRGB, quality 80, subfolder of original folder.

8. In the Post Process Actions section, I click on Graphical Watermark and Inner Border.

9. For the Watermark, I navigate into the Gallery folder exported earlier and find 'logo.png'-the exported Identity Plate. I do this to keep the watermark and logo consistent. It helps create a 'brand'. With a little calculation, I work out a size I'm happy with and enter it.

10. I also want a semi transparent bar across the bottom which encompasses the logo. With the logo being 24px high, I opt for a 25px high Inner border on the bottom. I select Black as the colour and reduce the transparency to 50%.

11. With all this set up, I hit export.

12. From there I move the images from the subfolder up a level and overwrite the original gallery images-this is in Finder/Explorer.

13. In Lightroom I remove the still selected images from the Library with the delete key and choose 'Remove from Library' as my dialog option. After all I don't want to delete the image files I worked hard to create!

14. Finally I upload the Gallery.


Notes: Lightroom renames '-' to '_' and forces the filenames to lower case when exporting for Web Galleries. For this reason I use the actual gallery images, which will retain their correct names for the HTML files. This is the only reason why I simply don't export the files directly from Lightroom, overwriting the original gallery files.

Web Galleries and Web Templates

As there seems to be some confusion between what constitutes a Web Gallery and a Web Template, I thought I'd put some words down about it. The heart of the design of a web gallery in Lightroom 2 is the 'Engine'. This is where all the code is that allows you to make design choices like colour, image size, what metadata is shown etc. Lightroom ships with 5 of these: 2 Adobe Engines (the HTML and Flash Galleries) and 3 from Airtight Interactive (SimpleViewer, AutoViewer and PostcardViewer). These appear in the Engines panel at the top of the Right Panel. The remainder of the Right Panel is where you can change the setting that the Engine provides.

Templates on the other hand are snapshots of the settings used in a gallery. Each Gallery engine has default settings that the gallery will revert to if it's loaded again (by selecting anther gallery and then switching back, for example). To allow you to keep the colours you've set, along with any other changes you make, you can save them by creating a Template. These are to be found in the Template Browser under the Preview Panel over in the Left Panel. To create a Template, Click the '+' beside Template Browser and give your template a name and a folder location.
To select and use a template, click on the name in the Template Browser.

You can have numerous Templates for any one Gallery. Anyone can create a Template. Creating a Gallery is a bit harder, but it is explained in the Lightroom SDK. Lightroom Blog has a number of Galleries available, as does The Turning Gate. You can also get SlideShowPro and stuff from Lightroom Galleries.

LRB Portfolio 2.12 update now available

I've updated LRB Portfolio to 2.12. As with all other versions, this is available at your download link. To update, redownload the file.
This is a bugfix release with the following fixes:

• Fixed a Firefox issue where it puts borders around the menu images when images were selected.
• Deleted an erroneous file called " head.html", which was being read as "head.html" on PC.
• Fixed a bug which broke the new charset options

For more info about LRB Portfolio, check out the LRB Portfolio Website.

Take it to a vote: new feature ideas for LRB Portfolio.

Folks,
If you are an LRB Portfolio user, you may know that I've a ton of new features in the current beta version. It's looking pretty good, if I say so myself.

So while I'm changing things, I want feedback on some potential features:


I'm thinking of tying the height of the about, contact and home pages to the image+border height. This is happening by default, but if I do this, I can add a scrolling control to the page allowing you to add a lot more text, which can be scrolled through.

Add an avatar image to the About page to allow you to add a photo of yourself. I'd simply have a logo called ava.jpg that you replace your image with.

Add a single blank page with the same features of About, so you can choose the image, the name of the page etc.

Change the Menu Font-Variant to a list and leave it on normal by default. I'm seeing too many galleries with this left set!

I'm also considering a new section to the site: A featured website page. I've been peeking at a few sites to see what you're up to, so I wonder if other users would like to see them too!



Finally, before you start jamming up the comments with other requests, here's the so far list on LRB Portfolio 1.2beta

1.2 Changed charset to UTF-16 to allow for further languages
Fixed Content Area font size issues by adding a Content Font Size control
Added images choice to Menu: You can now use an image instead of text in the menu
Added provisional code to allow Google Analytics code to be pasted:WARNING, each gallery loading will open the Google Analytics code in a browser window. This is how Lightroom deals with external resources and cannot be prevented. If you don't like this, then leave the Insert Analytics Code box unticked.
Added IE8 conditional code (this is Google beta code and I may drop this)
Added an image choice to the mail page
Change the Page title on the mail page to whatever is in the Page Title
Addition of the Dynamic Drive scroll script and making the internal script options available in the Output Settings panel.
Added the ability to name the gallery1.html page to anything you like (as long as it ends in .html or .htm). The engine will automatically generate the page with the new name and find it correctly (go me, I didn't think this could be done).

It's pretty feature laden.... almost a 2.0 feature laden release. But if I do jump a version, it'll still be the same link for current users when it becomes available.

LRB QuickSlide

LRB QuickSlide is a basic Flash slideshow gallery for Lightroom. It generates a 620X400 flash SWF in a blank index page that you can then add to another page. Handy for quick galleries and things like Myspace pages etc. Based on some of the code from the not yet released LRB Flash Gallery, there is very little to change in this gallery bar the Flash background colour and the page background colour.

To add the code from this gallery simply copy everything between (and including) <object> and </object> to the new page. Keep the gallery structure intact and you'll be away.

This is free, but includes a link page to my shop page. I will put a donationware version of this online soon, minus the logo and link.
Also on the page is a little icon of slides. Clicking this will stop the slideshow running. Clicking of the left side of the image will go back one photo and on the right will go forward one. The slideshow loops, as will any clicking.

Maybe when I learn to use Flashvars, I'll be able to add things like slideshow timings and borders, but it the meantime, this is it!

Note: Because Lightroom uses Explorer as the plugin preview browser on PC, it cannot load other plugins like Flash, therefore this does not Preview on PC. Sorry, but I have to use HTML to map to XML here for the gallery, and I can't do it any other way (as in, it's not in my skill set). If you comment that you can't preview it on PC, I won't approve the comment, because I've already mentioned it. (Cue loads of comments on PC vs Mac that won't get by either). When you export an SWF in Flash, it allows either local or network access, so you have to preview online. I'm not trying to alienate users here! Really!

Download | Sample Gallery | Installation Instructions

Update: Using XML to create the Speed slider as suggested by John Beardsworth, I've now updated to version 1.01 which has a speed slider from 2-10 secs. Also I moved the slideshow icon to prevent it hiding the watermark. Download 1.01

Creating your own web gallery..

While I did start with the first post on creating a web gallery here, I've decided that Lightroom-News.com is better place for it.
So here's the links to get you going:

Introduction

The galleryInfo.lrweb file

The manifest.lrweb and HTML file

Head down into 1.01

Since the release of LRB Portfolio, you might think I had a break after the development time? Well no actually. It was straight into 1.01 bug fixing and feature requests. The main bug was the menu going over too far in IE, but that's now fixed. There was also some instant update issues with some of the menu items. I replaced the variable to solve that. Images Per Gallery had a px after it. Now removed.
As to features, I've a basic Flash music player added. I also made a little music loop in Reason to demo it. Because it's Flash, it won't preview on PC in Lua galleries. That's an IE limitation due to the way it handles plugins like flash. It does show with Preview in Browser though.
Other feature requests done are: Option to remove the Home page link. Done, but you have to start on the home page.
Page Title: you can have a different title on the title bar, rather than Site title, which is used on the main page.
Logo Top Gap: Those worried that the gallery was too far down now have the option of setting this height from 0-200px (default is still 100px).
.
In Site Info I've added headers to each section for clarity.
My latest is in the hands of testers and the file will be updated when all the new bugs introduced with the features are sorted out. Previous purchasers will be able to redownload. Those that used up the quota can email in for a refill.
I don't have a time on this, because I don't know what they might find!


Update 4/9/08: I'm putting the music player on hold to get out a dot releases with more important fixes and cleanup. The music code requires the use of a) flash and b) frames, neither of which are previewing for me in XP. I've mentioned the Flash issue above, but the frames issue is a little more subtle and requires more thought..
Testers will get a drop shortly and hopefully give the okay.. Sorry it has to be this way, or you'd only be complaining more if it was broken!

LRG Complete 3.0 out of Beta

Joe Capra has announced the release of LRG Complete 3.0 final. The website gallery with Digital Delivery via Paypal is out of beta.
"We are happy to announce the release of LRG Complete 3 as a final version! Well final in that its not Beta anymore. I will no longer support any previous versions of the LRG Complete template so EVERYONE should upgrade to this new version. Please delete any previous versions of this template from your Lightroom installation and install the current version. Your user presets should remain the same and can be applied to this new version, however, there are some new settings in this new version so you will need to save a new preset to include the new settings."

Go to Lightroom Galleries to read about it.

Anatomy of a Lightroom HTML Gallery

Lightroom HTML galleries used to be written in a mix of XSLT and XML. The simpler coding in Lua makes it a pleasure to create HTML galleries with. You can write Flash galleries in Lua, but because IE doesn't allow plugin loading on PC Lightroom, you can't see them in the preview window. Hence 3rd party Flash galleries use the old method for cross platform compatibility.

Lua galleries were introduced in Version 1.3 and have matured somewhat with V2.0. The new syntax is much tidier and more compact. In fact Matthew Campagna shaved 500 lines off one of his galleries for version 2, and my new website in a gallery LRB Portfolio managed close to that also.

So what comprises a Lua Gallery? Well the absolute minimum a gallery can contain is 3 files: galleryInfo.lrweb, manifest.lrweb and a HTML file. Let's look at them in a little more detail:

galleryInfo.lrweb: This is the heart of the gallery and the file Lightroom uses to define the internals of the gallery and the contents of the panels in the Right panel. In this file you define the control variables, the checkboxes, the sliders and all the other controls of the gallery. You can create custom style sheet through the code here (however, it's not truly a Cascading Style Sheet as it doesn't output in your assigned order).

manifest.lrweb: This file tells Lightroom what files to include with the gallery, along with the HTML pages used. You can include image files, CSS files, Javascript files and others with this file.

HTML file: This is the base file for the gallery. It makes calls to variables defined in galleryInfo.lrweb and the custom.css file that is created from it.

The mix of all three is what builds the gallery. You can add your own CSS files and site HTML to the HTML and easily integrate it into your current site design. We'll be looking at this in more detail in future posts.

In the next post, we start looking at galleryInfo.lrweb in more detail.

Gallery Resources

So you want a list of the available Galleries for Lightroom? Here's the ones that I'm aware of. I've added my current ones at the end.

If you have made some, please feel free to add them in the comments and I'll add them to the list.

The Turning Gate

HTML Galleries

• TTG Client Response Gallery


• TTG HTML Gallery


• TTG Panic Gallery


• TTG Rounded Gallery


• TTG Selection Gallery


• TTG Shadowbox Gallery


• TTG Slimbox Gallery


• TTG Smooth Gallery
  

Flash Galleries

• TTG AutoViewer Gallery


• TTG FlashNifties Gallery


• TTG GridNav Gallery


• TTG MonoSlideshow Gallery


• TTG Photo Stack Gallery


• TTG photoFlow Gallery


• TTG Polaroid Gallery


• TTG PostcardViewer Gallery


• TTG SimpleViewer Gallery
  

Gallery Indexes

• TTG XML Album Index


• TTG XML Auto Index


• TTG XML Shadowbox Auto Index


• TTG XML Shadowbox Index
  

Special Purpose Templates

• TTG LR Pages


• TTG Stage


• TTG XML Maker
  

Lightroom Galleries

• LRG VertiScroller


• LRG Complete - 1.1.1


• LRG FSS Select v1.1


• LRG FlashSlideStrip with PayPal - v1.2.1


• LRG One with PayPal Shopping Cart


• LRG Flash SlideStrip V2.0


• LRG FlashFlex


• LRG FlashScroller


• LRG User Comments v1.0


• LRG FlashBox v1.0

SlideShowPro

• SlideShowPro for Lightroom

Lightroom Blog

• LRB Flash Gallery Beta


• LRB Filenamer


• LRB FrogJS


• LRB Horizontal Scroll Lua


• LRB Vertical Scroll Lua

Horizontal Scroll Lua V1.0

Well, with the introduction of the new VScroll in the past few days, I've knuckled down into getting my original Horizontal Scroll gallery into Lua and with more control. While Lua Galleries are a whole new learning curve after busting through XSLT, they're very powerful. An understanding of CSS can lead to have a great deal of control in the gallery settings. Building the galleries is not overly difficult. It's very logical, but time consuming as you've no true debugger and it's a game of "will Lightroom ignore the gallery", because there's a missing comma somewhere. Enough of the gallery building talk.

HScrollLua 1.0 is a horizontal scrolling gallery. It's a single page gallery with all the image appearing on one page. No thumbnails, just the preview sized photos.
Features:

Single Page Scrolling Gallery

6 Menu items, one for contact info, the others are customisable from the Right Panel

All important colours are changeable

ID Plate can be positioned anywhere in the header (side to side control)

A border can be applied to a photo, with selectable size and colour

Free

Download

View a Sample Gallery

To install the gallery, you need to go to User/Library/Application Support/Adobe/Lightroom, (On XP got o C:\Documents and Settings\User\Application Data\Adobe\Lightroom -Note that Application Data is a hidden folder, on Vista C:\Users\User\AppData\Roaming\Adobe\Lightroom\ ) where User is the name you log in with. Look for a folder called Web Galleries within. If it's not there, create it yourself. Unzip the file into this folder and restart Lightroom.
The new Gallery will apppear in the Right Hand Panel, in the Galleries Pane.

I recommend that you create an alias/shortcut to this Lightroom folder for future use.

Vertical Scroll Gallery: Update to v0.1.2

I've been thinking that with my 3rd Party Developer badge at Lightroom Forums, I should really do some updates on the Galleries I created ages ago. So I have. It's not like I've received much in the way of support requests or anything, but I have added the most requested: separate width and height. I'm also doing it directly rather than the non.CSS way Matthew Campanga uses. I did in the past, but for some reason I got it working fine using agmSizes. As to why it worked this time, I have no clue. Matthew is a far superior gallery coder, though, but my method uses similar ideas, i.e. mapping to intermediate variables. If you want to discuss more about coding galleries, mention it in the comments. We might persuade Ian Farlow of Lightroom Forums to open a forum for us.



Gallery features:

5 editable menu links, with internal commenting to allow more,
Vertical scrolling,
Photo Border with Colour,
ID Plate support, with sizing,
Copyright Watermark support,
Almost every colour editable,
Free..

Did I say Free?

I did this as a Lightroom Birthday present. I'm running out the door right now to work, but I'll add a sample gallery and more detail later! back in and adding more information!

To install the gallery, you need to go to User/Library/Application Support/Adobe/Lightroom, (On XP got o C:\Documents and Settings\User\Application Data\Lightroom -Note that Application Data is a hidden folder, on Vista C:\Users\User\AppData\Roaming\Adobe\Lightroom\ ) where User is the name you log in with. Look for a folder called Web Galleries within. If it's not there, create it yourself. Unzip the file into this folder and restart Lightroom.
The new Gallery will apppear in the Right Hand Panel, in the Galleries Pane.

I recommend that you create an alias/shortcut to this Lightroom folder for future use.



Download the UPDATED 0.1.2 gallery
View a sample Gallery
Download the template for the sample gallery (and photo at the top!). To install, unzip the file. In Lightroom, in the Web module, Right click on a Preset and choose 'Import.." from the menu. Choose the unzipped file.


Notes: The ID plate should be 300px wide for best results, but there is a logo height and width control to help if it's bigger.
While I have dotted borders around the menu and the scroll area, you can hide these by making the border colour the same as the background.
You can add a photo border with selectable size and colour.
Most of the colours can be changed.
The Add Copyright Watermark tickbox does work, but you''ll need to click the Quality control to force a refresh. This is the same in the Lightroom HTML gallery.
The Scroll CSS uses a code that is not supported in all browsers. It does tend to break gracefully, by ignoring the code and allowing you to scroll the page instead.

TTG XML Album Index 1.0 released

Matthew Campagna has announced a replacement for the TTG Gallery Index over at Lightroom Galleries.

"TTG XML Album Index is a new album indexing template for the Lightroom Web module, and replaces the newly discontinued TTG Gallery Index.

Through a combination of PHP and XML, the album index is easier than ever to update with new web galleries. It’s no longer necessary to regenerate and re-upload the entire index for every update, as was the case with TTG Gallery Index. TTG XML Album Index gathers album information from a simple XML file. To add a gallery to your index, you need only provide a thumbnail image and four pieces of information — thumbnail path, gallery path, gallery title and description — to the XML file.

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

Business Card Template for SlideShowPro

Happy New Year folks, hope the holiday season is going well. Not much of a holiday for me though, I was back working again tonight. 

As I mentioned before, SlideShowPro was released recently for Lightroom. I got a copy and I have to say I really like it. I intend doing a fuller review shortly, but I've been mucking around with it in the meantime. In the process I've created a cool little template that allows me to place my own flash galleries on sites such as MySpace.com.

Here's how it looks:

You can download the Template here.

Open the Zip file. On Mac OSX, double click on the .lrtemplate to install it. For all systems, right click on User Templates in Left Panel of the Web Module and choose "Import.." from the contextual menu. Use the File Browser to go to where the file unzipped and choose it. Remember, you must have SlideShowPro installed for this to work.

Tip: Because this is an autoplay gallery, and SSP requires the gallery to be paused for export, you need to click Export/Upload and then click to another module, eg Library.

Now to get it to work on MySpace.com you need to use the following code on your page. I have it in the sidebar on my page, but it should work anywhere:

<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="200" width="300" base="." data="http://seanmcfoto.com/bc/loader.swf">
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://seanmcfoto.com/bc/loader.swf" />
<param name="flashvars" value="xmlDataPath=http://www.seanmcfoto.com/bc/images.xml" />
<param name="quality" value="high" />
<param name="base" value=".">
</object>

Replace all instances of http://seanmcfoto.com/bc/ with the location of the gallery folder on your website. If you find it hard to read then use 'View Source" in your browser to look at the code producing the gallery in the middle. The code above is surrounded by XMP tags to make it viewable.

Hopefully this will be useful to others, I know I'll be redoing the galleries on my MySpace page now.

Formatting your Text for Web

User Judith Nicholls has been frustrated with the lack of formatting in Lightrooms Web module. As I read over the posts I realised that I had posted about this very topic a long time ago. You can see the post over at Lightroom-news.com. Now a lot of the information is based on a much older version of Lightroom, but the inherent principle is the same: An unsupported method of formatting in the caption box.

Let's see how to apply this to the current Caption box.

First go to Image info in the HTML Gallery in Web.

Click on "Custom Settings" beside Caption and choose Edit

Begin by entering the following text: <ag:formatted></ag:formatted> into the text box of the Text Template Editor.
Any proper XML (not pure HTML) entered between these tags will be rendered. Use <strong></strong> for bold text and <em></em> for italic text. To create a new line use <br />. You need to use this from of br because of the way XML works.
Here's a template I've created:

And here's how it looks:

Hopefully this will help in the quest for tidy Metadata in Web. Like I mentioned, this is unsupported and may vanish from Lightroom at any time, but it is working for now.

Simple Scroll Gallery

I make no claim to be a Matthew Campagna or Joe Capra, but I did do a lot of playing around to see what made the galleries tick, during the Public Beta. Eventually I made a few of my own. They were pretty much hard coded to my website though. Someone recently was wondering about a simple scroll gallery for Lightroom. I had one and decided to modify it for everyones use.

So here's my UPDATED!Simple Scroll Gallery.

To install the gallery, you need to go to User/Library/Application Support/Adobe/Lightroom, (On XP got o C:\Documents and Settings\User\Application Data\Lightroom -Note that Application Data is a hidden folder, on Vista C:\Users\User\AppData\Roaming\Adobe\Lightroom\ ) where User is the name you log in with. Look for a folder called Web Galleries within. If it's not there, create it yourself. Unzip the file into this folder and restart Lightroom.
The new Gallery will apppear in the Right Hand Panel, in the Galleries Pane.

The controls on the Gallery are very simple:
You can change the Site Title and Collection Description in Site Info. In Output settings you control Jpeg Quality, Preview Size, Background Colour, Copyright Watermark and ID Plate.
I've also uploaded a Sample Gallery for you to view.

Update: While it seemed to be working earlier, the background colour control is broken. Colour doesn't stick.

Update on the Update: Version 0.1.3 is now up at the link. I've added a Color Palette with controls for the BG color of the page, the image bar and the area where the collection description is listed, along with control of the text colour of the collection description.

Paypal in Lightroom Galleries

Chirs Shepherd has a new blog post on adding Paypal to you Lightroom galleries. I've only just glanced over it but it looks really good:
http://www.shepherdpics.com/Blog/2007/04/creating-ecommerce-site-using-adobe.html

Calling a CSS file: the XSLT way.

I said in my last post that I would show how to call CSS in our gallery. Normally when we call a CSS file we would use the standard call tag:

<link xmlns="http://www.w3.org/1999/xhtml" type="text/css" href="mycss.css" />

As per my last post, note the trailing '/' which closes the link tag.

This seems to work fine as a call inside transformer.xslt on mac but causes issues on PC. Therefore we need a correct way to call our file that works on both. Here's some sample code from the 'RollOver' gallery I've working (not completed yet-I still can't get the first image preloaded!). This part shows the initial calls defining the Paths and the then head section, where I use <xsl:call-template name="addCSSLink"> to call the code to add the CSS link.


<!-- Generate an index page -->
<xsl:template name="index.html" >
<xsl:param name="pathToRoot" select="''"/>
<xsl:param name="pathToContent" select="'content/'"/>

<file name="index.html">
<html>
<head>
<title><xsl:value-of select="$siteTitle" /></title>
<style type="text/css">
</style>
<script language="JavaScript" type="text/JavaScript" src="rollover.js">
</script>
<xsl:call-template name="addCSSLink">
<xsl:with-param name="pathToRoot" select="$pathToRoot"/>
<xsl:with-param name="pathToContent" select="$pathToContent"/>
</xsl:call-template>

</head>

The <script language="JavaScript" type="text/JavaScript" src="rollover.js"></script> is just there to call the javascript for this particular gallery and not needed for the CSS call. I've left it in for completeness in relation to the gallery I'm doing this call on.

The xsl:template that is being called to make this happen is below:

<xsl:template name="addCSSLink">
<xsl:param name="pathToRoot"/>
<xsl:param name="pathToContent"/>
<xsl:param name="size"/>
<xsl:param name="masterCSS" select="concat( $pathToRoot, 'scrollextra.css' )"/>
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" type="text/css" href="{$masterCSS}"/>
</xsl:template>

You place this code below the </xsl:template> of the 'index.html' template call and above the </xsl:stylesheet> at the end of the file. The call to 'scrollextra.css' is simply the filename of the CSS I'm using in this gallery.
Again hope this helps.

Adding external files to your HTML gallery

If you've been trying to create your own galleries based on the Andy Rahn (Lightroom Web Module engineer) tutorial on John Nack's blog, I hope you've taken note of the new file locations that Andy mentions in his Lightroom Journal Post. You have a simple page that shows a thumbnail of all the images, but now you'd like to put a bit of shape on it.

You could simply add CSS inside the 'index.html' file call in your transformer.xslt, but this can be cumbersome once we scale to multiple pages. An external CSS file would be better. Obviously the Web Gallery needs to both see and copy the CSS file to the created gallery. So how do we do this?

It's all done using an additional file called gallery.xml. Create a blank txt file and save it as 'gallery.xml' and paste the following into it and save it beside 'galleryMaker.xml'.

<gallery>
<amgVersion>0.5</amgVersion>

</gallery>

That's our basic gallery.xml file. To call files from it we use the <filePath> tag. Please note one very important thing about XML/XSLT: You must close all tags. Even <br> must be written <br />. The '/' acts as a close tag.
UpdatePaddlefish has noted in the comments that IE 6 gets confused by this and details a workaround there.

To include our CSS file we call it like this:

<filePath>mycssfile.css</filePath>

In our file this looks like:

<gallery>
<amgVersion>0.5</amgVersion>
<filePath>mycssfile.css</filePath>

</gallery>


If we include background url's in our CSS file, we need to include them in the gallery folder and in gallery.xml, eg


<gallery>
<amgVersion>0.5</amgVersion>
<filePath>mycssfile.css</filePath>
<filePath>background.jpg</filePath>
</gallery>


You can also save the files in subfolders to keep it tidy and call them from subfolders. eg:


<filePath>images/background.jpg</filePath>

would call the jpg from the images subfolder. These subfolders are relative to the current folder. On Mac it is possible to call the CSS file directly in the transformer.xslt file, but John Beardsworth pointed out this does not work for him on PC. While related to how to call a file, It's merely a matter of pasting code, cookbook style, and I'll just make it a post on its own. Watch this space.
Hopefully this will be helpful to those building from scratch and thanks to Andy Rahn for the original tip when I was calling files that were already online.

Menu links in Flash Gallery

I've added a post to Lightroom News on adding a series of links in the menu bar.
It's called Adding a navigation menu to Lightroom Flash Gallery. Go check it out.

RollOver

It's only fledgling but you can download and play with (and decode for your own use) my version of a javascript rollover gallery for Lightroom.
While this works in and of itself and is based on the Scroll Extra gallery below, it has a number of things added and equally so, missing.
CSS: I've updated to the correct CSS file calling technique. In Scroll Extra I literally just made a call to the file using the standard call. This one line of code is now replaced by about 15 lines of XSLT instead. While the first one worked fine on Mac, johnbeardy reported it broken on Windows. This bit solves that.

Missing: I cannot make the XSLT call the first image to display when the gallery loads.
Here's my code for calling the thumbnail with the link that allows the javascript call:


<!-- Add one image with link to the list -->
<xsl:template name="indexImage">
<xsl:param name="path" select="rendition[@size='thumb']/@path" />
<xsl:param name="previewFull" select="rendition[@size='image']/@path" />
<a href="#" onMouseOver="MM_swapImage('enlarge','','{$previewFull}',0)">< img xmlns="http://www.w3.org/1999/xhtml" src="{$path}" alt="" name="a1"/>< /a>
</xsl:template>


The previewFull tag calls the full image into the main viewer when you mouse over the thumbnail.
Much as I try the same code for previewFull does not call the first image for display on loading. I know it's something stupid that I'm doing or missing.

A few notes on the above code. path and previewFull call rendition, size and path. These make sense to view, but have no relation to anything in the galleryMaker.xml or tranformer.xml file. So where are they referencing? Well as it turns out, they are referencing the source.xml file that you can create by removing the comments around that section of code in transformer.xslt.
Examining a sample source.xml file I can see the following:
<samples totalGallerySize="9" firstSampleIndex="1">
<img orientation="DA" imageID="F32FE884-9B67-4252-A47B-74A8A5C106F7" filename="2006_08_11_045">
<text>
<description></description>
</text>
<rendition height="600" path="bin/images/image/2006_08_11_045.jpg" width="400" size="image"></rendition>
<rendition height="60" path="bin/images/thumb/2006_08_11_045.jpg" width="40" size="thumb"></rendition>
</img>

I can see that this image has 2 renditions: 600X400 called image and 60X40 called thumb. Also the path of each rendition is included.
So our "rendition[@size='thumb']/@path" calls the image located at the 'path' that is sized thumb.
Also each img call is inside the <samples> folder which is where the <xsl:for-each select="samples/img"> comes from


Things I'd like to do in XSLT: create cropped square thumbs ala php, Embed paypal links. I should also try adding radio buttons to let people rate the image as an experiment in creating feedback from images.

Scroll Extra

Still messing around with XSLT/XML and HTML galleries in Lightroom.
Here's an extension gallery that uses Andy Rahns info in this blog post. Read the original article and use the new locations mentioned also. What I've added is a scrolling mechanism in CSS and made it a little prettier using snippets of code from around the net. Scrolling uses overflow in CSS, while using LI to control the look of the nav bar buttons comes from a variation on the Listmatic site.

I've created a single page scrolling gallery mostly to avoid grid coding/preview pages and pagination (areas I need to study more first). It uses ID plate/Watermarking and Jpeg Quality. I have the JPG quality at 70, but moving the slider appears to do nothing. These last features are cut and paste code from the Lightroom HTML gallery, used in a 'cookbook' form, so I may have missed something essential.

Things of note:
The background files to the page, the ID Plate and the Nav buttons are included in the gallery.xml file using the 'filePath' command. As is the CSS file.
You can, if you want to, hard code links to files on the internet, but on a Mac Lightroom will open them in a browser when you first run the web gallery. John Beardsworth says this doesn't happen on PC.

The nav bar in the gallery can have its links edited in transformer.xslt. I plan to work on code to do this inside Lightroom at some stage.
I've been up all night messing with this so I should crash before work ;)

Bluefire Blog: Editing your Flash Gallery style.xml

The Bluefire Blog has great advice on customising the output from your flash gallery by editing the style.xml located in the resources/styles folder inside your gallery. From the first post on this:
"The controls within the Web tab allow you to customize the Lightroom Flash Gallery templates in a lot of ways. However, you can customize them much further by editing the XML files that are generated when you export a gallery. This requires almost no knowledge of Flash or HTML, and can be done with almost any text editor.
"

More Webtemplate stuff.

Alright, as George Jardine would say, welcome to or new post on customising your web template.
If you're happy with the Jardine Pro template but really would like to have better HTML linking to other galleries or to parts of your site, follow this thread!
Custom Web Templates live in a folder called Web Galleries in the USERNAME/Library/Adobe Lightroom folder on Mac. This is in C:\DOCUMENTS and SETTINGS\USERNAME\Application Data\Adobe Lightroom on PC (C being to root drive and USERNAME being what you log in as. At first you'll need to create this folder. Then download the the Jardine Pro template from Georges iDisk. It's there under Example Lightroom Web Gallery. As per my last post:
"Copy the files contained in the zip file to this new folder. Open the new folder. Search for a file called galleryMaker.xml in jardine_pro. Open it in a text editor. On Line 7 change Title=Jardine Pro to Title=YourName and on line 14 change com.adobe.wpg.templates.jardinePro to com.adobe.wpg.templates.yourName. Save the file. "
If you already followed the last post, you should create a different name to distinguish the 2 inside Lightroom.
Okay, now we want to add our site HTML to the template. This is done by editing the "transformer.xslt" file. This is a well commented file and we can find where to put our html easily. On line 179 we can see a comment saying Begin Stage. This is where the thumbnails get displayed and seems like a good place to add our links. So away we go:

<a href="../index.html">Home</a> | <a href="../contact.html">Contact</a> .... etc etc

You will also need to add this code after line 960 because the "transformer.xslt" file creates the detail page as well as the index page for the gallery.
Save the file and open Lightroom. Select a few images and then go to Web. Your new gallery template should appear in the drop down menu in Gallery Style. Try it out.
You can add any HTML you want in the transformer.xslt file. I've just done a very quick start here to get you going. If you are looking for an HTML editor that's free and easy I recommend Taco HTML for Mac users out there. Anyone who wants to interject with a good PC one, feel free.

Changing Typography in Web Galleries

Currently there is no way in the program to change fonts in your galleries. It's not too hard but takes a little time to do this outside the program. Basically we need our own editable template. Fortunately George Jardine has provided his Jardine Pro gallery on his iDisk. Click the link and download Example Lightroom Web Gallery/jardine_pro.zip.
You need to create a folder called Web Galleries. On Mac create it in username/Library/Adobe Lightroom/, On PC create it in C:\Documents and Settings\username\Application Data\Adobe\Lightroom\ where username is the name you log in with.
Copy the files contained in the zip file to this new folder. Open the new folder. Search for a file called galleryMaker.xml in jardine_pro. Open it in a text editor. On Line 7 change Title=Jardine Pro to Title=YourName and on line 14 change com.adobe.wpg.templates.jardinePro to com.adobe.wpg.templates.yourName. Save the file.
You can rename the jardine pro folder to something more usable like yourName. Inside the folder there is a master.css file located in resources/css. Open it in a text editor. On line 8 we have the font family set to Arial etc. Change the font family here to whatever you want to use. Bear in mind to choose fonts that have a chance of appearing on your viewers machine or the browser will replace it with a font of its choice. Save the master.css file.
Restart Lightroom and open Web. On the top right drop down menu your new template name should appear. Select it and enjoy.