September 13, 2008
Adding styles to the gallery
Continuing from our last post about creating your own Web Galleries for Lightroom, we now tackle adding Styles to our gallery.
Probably the easiest way to get a look going in your gallery is to simply add some CSS code. In the <head> section of our HTML file, simply add a <style> tagset and enter CSS info.
<style>
body{background-color:#000000;}
<:/style>
That will give you a black background. You could also place the body section in a text file and call it. Create a blank text file and call it gallery.css. Enter body{background-color:#000000;} into it and save it in the folder with the other files. Instead of the <style tag, we now need to use a link tag. In the <head> section: <link rel=”stylesheet” type=”text/css” media=”screen” href=”gallery.css” />. Now even though we done this correctly, Lightroom also needs to be told we’ve added a new file to the gallery. This is done in the manifest.lrweb file and uses a new command.
Open manifest.lrweb and enter this:
AddPage {
filename='gallery.css',
template='gallery.css',
}
This tells Lightroom to add a new page called gallery.css, using the template page gallery.css. An alternative method is to create a resources folder, place the CSS file in it, then call it from there instead. To do this use AddResources.
AddResources {
source='resources',
destination='resources',
}
You can place any files to add to the gallery there, and they will be used and exported with any created gallery. To be tidy, I move my gallery.css file into a new folder in resources called ‘css’. I need to change my link reference in the html to match so it now becomes <link rel=”stylesheet” type=”text/css” media=”screen” href=”resources/css/gallery.css” />. Obviously if you have a CSS file for your website, you can use it here to make the page match your website
The final manifest.lrweb file command we’ll look at today is AddCustomCSS. This command lets Lightroom create a custom CSS file from things we set inside galleryInfo.lrweb. Before jumping to that, let’s define our custom css file. As we’ve already used resources/css as a css folder, lets add it there.
AddCustomCSS {
filename='resources/css/custom.css',
}
This will need to be added to the HTML. In this case we’re replacing the gallery.css with our custom.css, so we call <link rel=”stylesheet” type=”text/css” media=”screen” href=”resources/css/custom.css” />. Of course we now need to add appropriate code into galleryInfo.lrweb to make it work! Open the galleryInfo.lrweb file we’ve already created. Below our photoSizes lines add:
["appearance.body.cssID"] = "body", ["appearance.body.background-color"] = "#000000",
Save the file and restart Lightroom. You’ll see the gallery now has a black background. Cool. But shouldn’t we add controls to allow us to change them in Lightroom? A color chip would be perfect.
To do this we need to add a new section to the galleryInfo.lrweb file. We’ve seen the model section, now we’re introducing the views section.
views = function( controller, f )
local LrView = import "LrView"
local bind = LrView.bind
local multibind = f.multibind
return {
}
end,
This is entered just before the final } in the galleryInfo.lrweb file. Saving and restarting Lightroom will now show empty panels. The main thing to note here is the view section has 2 arguments, controller, which is a table of model data, and f, which is our ‘view factory’, which gives us our UI. There are 4 possible sections that can be added here, and they correspond to the 4 panels you can access with your plugin:
labels This is the Site Info panel colorPalette This is the Color Palette panel appearanceConfiguration This is the Appearance panel outputSettings This is the Output Settings panel
For our example, we’ll use the colorPalette and return to the others later. In the return {} section add:
colorPalette=f:panel_content{
bindToObject = controller,
f:subdivided_sections {
f:color_content_column {
f:label_and_color_row {
bindingValue = "appearance.body.background-color",
title = "Body Colour",
},
},
},
},
(note I’ve had to drag the indenting in to make it fit the narrow column width, normally each section would be indented for ease of use).
The first line tells Lightroom we’re creating the Color Palette that will show on the left panel, the second binds it to “controller” (which is mentioned above). The next 2 lines are positional UI tools. f:subdivided_sections {} creates a thick separating lines between sections. Content rows and columns inside one of these are separated by light gray lines. Next we have a content column, in this case one specifically for the coloPalette: f:color_content_column {}. (the f: indicates we’re using the viewfactory). The last section of our indented code creates the colour chip.
f:label_and_color_row {
bindingValue = "appearance.body.background-color",
title = "Body Colour",
},
2 things are created in the f:label_and_color_row {}, first the binding value, which tells Lightroom which of the model properties the colour chip will affect, and title, which gives us the label we see beside it. Restart Lightroom (yep, this gets done a lot when developing for Lightroom). When we click on the chip, the color picker will appear and we can select a new color. The new value will be passed to appearance.body.background colour and we will have a new background color upon refresh. The value is actually written into our custom.css file. It’s key to note that we need to refresh the gallery. At the moment this needs a restart. Why? Because Lightroom needs to read the new value that has been passed to our custom.css. Of course this would be annoying to have to do for all our files, so we’ll add a Live Update mechanism to allow this to happen on the fly. And that’s a perfect thing to write about in the next section.