Lightroom-News.com

With apologies for the extended delay in following on with the series, here is part 6 in our continuing series on writing your own web gallery. Please note that the code section doesn’t wrap, but still can be cut and pasted to a text or code editor. In this case I’ve sacrificed readability to usability.

In our last look at creating a HTML gallery, we showed the need for Live Update, and prior to that we introduced the method of adding CSS in Lightroom. One thing I should mention about CSS generated in Lightroom, is that it doesn’t generate in the order you put in the model section of the galleryInfo.lrweb file. In fact I have no idea what sets the order. It seems quite random to me!

Anyhow, one of the easiest additions to the page that looks nice is the ability to have the images scroll along the page. Normally this would be simply put into a CSS file that Lightroom can reference. Let’s look at this initially and then add it to the main galleryInfo.lrweb code, where it can then be manipulated in a panel.

To add a file that gets generated in Lightroom we need to reference in the manifest.lrweb file. The easiest (and currently most common) way is to create a resources folder and add that. In the folder where you have the galleryInfo.lrweb, manifest.lrweb and the grid.html file, create a folder called ‘resources’. Open the manifest.lrweb file and add the following lines:

AddResources {
	source='resources',
	destination='resources',
}

This will then generate a copy of the resources folder and everything in it. To be tidy, create 2 folders inside ‘resources’: ‘css’ and ‘js’. Copy the live_update.js file into the ‘js’ folder and then edit grid.html to point to this new location:

<script type="text/javascript" src="resources/js/live_update.js">

Now we’ll create a div that will scroll our images across the page.
Create a new file called master.css in the ‘css’ folder.
Add the following to it and save:

#scroll{overflow:auto; float:left; width:100%; white-space:nowrap;}

This file needs to be called inside grid.html so we add

<link rel="stylesheet" type="text/css" media="screen" href="resources/css/master.css" />

into the head section, under our content.css call.

Finally we call scroll as a div containing our images:

<div id="scroll">
<lr:ThumbnailGrid>
       <lr:GridPhotoCell>
			<img src="bin/images/photo/<%= image.exportFilename %>.jpg" />
		</lr:GridPhotoCell>
</lr:ThumbnailGrid>
</div>

The first and last lines are the new additions. Save all the files and then restart Lightroom. You should have something similar to the image at the top of the screen. If not, here’s a folder which can be placed in the Web Galleries folder that shows the files and the working gallery. I’ve not added the lrwebengine extension to this to make it easier to access. Here’s the file: basic_part6a.zip.

The scroll div code can be added to galleryInfo.lrweb instead. This would be useful if you wanted to control the borders of the image area, or the background colour for example. Here’s how it would look:

	["appearance.scroll.cssID"] = "#scroll",
		["appearance.scroll.white-space"] = "nowrap",
		["appearance.scroll.width"] = "100%",
		["appearance.scroll.overflow"] = "auto",
		["appearance.scroll.float"] = "left",

Adding colour control would be similar to our previous styles post. So to add color control we’d add
["appearance.scroll.background-color"] = “#000000″, to the end. To change this via panel control, in the colorPalette section, we’d add

f:color_content_column {
	f:label_and_color_row {
		color = bind "appearance.scroll.background-color",
		title = LOC "$$$/AgWPG/Templates/HTML/Panel/Labels/Colors/ScrollColor=Scroll Background",
	},
},

As a note on the title line title = LOC “$$$/AgWPG/Templates/HTML/Panel/Labels/Colors/ScrollColor=Scroll Background”, this could be title=”Scroll Background”, but we’ve added the language localisation version here. More on this in a future article. The files with these changes are in basic_part6b.zip

Previous Posts:
1. Anatomy of a HTML Gallery
2. The galleryInfo.lrweb file
3. The manifest.lrweb and html files
4. Adding styles
5. Live Update

This entry was posted on Monday, February 2, 2009 at 9:37 pm and is filed under Lightroom Tutorials, Web. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.