September 5, 2008
The Manifest.lrweb and HTML file
Welcome to Part 3 of our introduction to creating Web Engines for Lightroom 2. We’ve looked at the galleryInfo.lrweb file, so now we need to look at the other 2 files we need to make a gallery, the manifest.lrweb file and a HTML file.
Manifest
As the name might indicate, the manifest.lrweb file tells lightroom what files we need to make the gallery. Here we map template files to real files, and keep resources to help with our gallery, such as CSS and Javascript files. Here’s a very basic manifest.lrweb file:
importTags( "lr", "com.adobe.lightroom.default" )
AddGridPages {
template='grid.html',
rows=5,
columns=3,
}
The first line allows to use the default Lightroom tagset. The next section call a basic grid page (grid.html). This is one of a number of page types we can call, such as AddPage and AddCustomCSS. We’ll come back to them. Inside the parentheses, we have the mapping and file inputs. Our index.html page will be created from grid.html, which will define shortly. This is the ‘template’ file and defined by template=’grid.html’. Next we have the default settings for the number of rows and columns in the grid.
The HTML File.
Our manifest.lrweb file is now expecting to see a file called ‘grid.html’ from which to create a basic website. Here’s a sample of a very basic file.
<html> <head> </head> <body> <lr:ThumbnailGrid> <lr:GridPhotoCell> <img src="bin/images/photo/<%= image.exportFilename %>.jpg" /> </lr:GridPhotoCell> </lr:ThumbnailGrid> </body> </html>
As you can see we have the standard html, head and body tags. In the body we have code that doesn’t really resemble HTML. That’s where we’re calling tags from the tagset we defined in the manifest. Each tag begins with lr: and ends with /lr: kind of like the head or body code in the HTML.
<lr:ThumbnailGrid></lr:ThumbnailGrid> creates a grid for the thumbnails, while <lr:GridPhotoCell></lr:GridPhotoCell> will repeat the code between the tags, until each image has been dealt with. Each image rendition gets called by the exportFilename, which is simply the filename as it currently appears in the Catalog. Other possible tags here are GridEmptyCell, GridRowStart and GridRowEnd. You can see examples of them in the default HTML gallery later in the series.
The 3 files we have looked at are enough to start a basic web gallery. We’ll build on it from here in the next post. For now create these files and place them in a folder. Name it basic.lrwebengine. On Mac this folder will become a package and you can double click on it to install it. On PC go to Edit>Preferences and under the Presets Tab, click ‘Show Lightroom Presets Folder”. In this folder, create a folder called Web Galleries and put basic.lrwebengine in it. Restart Lightroom. Select ‘basic’ from the Engine panel. You’ll see something like this:
As it’s name says, it’s very basic. We’ll start knocking some shape into it in the next post.