Lightroom ships with several templates for creating web photo galleries. You can customize these templates and save your own version. Choose between building an HTML or Flash gallery. When you are finished, export all the necessary files and place them on a server yourself or let Lightroom do it for you. Let's see how.

To start, you must first select the images you wish to include in the Web gallery.

Selecting Images

In the Library module, select a folder, collection, or keyword. If you are not in the Library module, hit the G key, and you'll be taken to the Library module's Grid view. Any image appearing in the display work area will be included in the Web gallery. I usually create a unique collection for each Web gallery. That way, I can preserve my image order, and it also makes it easier for me to update my Web gallery at a later date. You can also make your selection in the Web gallery filmstrip and then go to the menu bar and select Web→Which Photos→Use Selected Photos.

f12019.png
Figure 12-19

Select the Web Module

Now go to the Web module. If you are not there already, get there by clicking Web in the module picker or use the keyboard +Option+5 (Ctrl+Alt+5). As soon as you enter the Web module, Lightroom begins generating or updating the gallery. You'll see the status of this operation in the status bar. Figure 12-20 You can modify the order of images in the filmstrip.

f12020.png
Figure 12-20

Select a Web Template

Select a Lightroom Template from the Template Browser. You can see a preview of the layout in the Preview window. In the lower left of the Preview window, a graphic indicates whether the style is HTML or Flash (circled in each example). Here —taking into account variations in color, type, and captions—are your basic Lightroom template gallery choices:


f12021.png
Figure 12-21
  • Galleries with a single window containing thumbnail images that when clicked on, display an adjacent full-sized image. This is only available as a Flash style.

f12022.png
Figure 12-22
  • Galleries which consist of a user-controlled slideshow with no thumbnails. This is only available as a Flash style.

f12023.png
Figure 12-23

Create a Title and Description

After you select a template, go to the Site Info pane to add all the pertinent information about your gallery. The Site Info pane for HTML- and Flash-based galleries is pretty much the same, except Identity Plate settings are found in the Site Info pane for HTML and in the Appearance pane for Flash. If you click on the triangle near a text field (circled), you'll get a pop-up menu of previously used text. You can't change the size of the text or the font.

f12024.png
Figure 12-24

Control the Color

In the Color Palette pane, you can change the text colors, background, etc. You'll see a difference between the HTML and Flash versions. Flash galleries tend to be more complex, therefore there are more choices in the Flash version. To change colors in either pane, click on the color swatch. This brings up a color picker where you can make your color selection.

f12025.png
Figure 12-25

Lightroom uses sRGB as its color space for web-destined photos. You can't change this, nor would you likely want to.

Change and Control Thumbnails

Both HTML and Flash thumbnails are controlled from the Appearance pane. You cannot change the size of the HTML thumbnails, but you can control how many appear on an index page via Grid Pages. Click on the grid to reduce or expand the number of cells.

f12026.png
Figure 12-26

If you select Show Cell Numbers, each cell will contain a sequential number (circled), the visibility of which is dependent on the particular template or your color choices in the Color Palette pane. Figure 12-27

f12027.png""
Figure 12-27

In the Flash Appearance pane, you can choose where the thumbnails appear, how they are displayed, and what their size will be. Click on the triangle to the right of Layout (circled) and a pop-up menu appears with choices. Slideshow Only removes the thumbnails entirely.

f12028.png
Figure 12-28

You can set the thumbnails on the left (top), use a paginated option (center), or have them set for scrolling (bottom).

You have a choice of four thumbnail sizes from the Size pop-up menu: Extra Large, Large, Medium, and Small.

Change Large Image Sizes and Quality

You also control HTML and Flash large image sizes from the Appearance pane. There are fundamental differences between the HTML and the Flash panes. HTML large image sizes are controlled from the Image Pages Size slider by pixels to a fixed size, regardless of the size of the viewer's browser window.

f12029.png
Figure 12-29

Flash large images can be Extra Large, Large, Medium, or Small. In reality, Lightroom creates more sizes than that. In fact, it generates three sizes for each category. That way, when a viewer resizes their browser window, the thumbnails and previews adjust accordingly.

f12030.png
Figure 12-30

The JPEG quality of large images can be set for both HTML and Flash styles in the Output Settings pane. The higher the Quality number, the better the quality (less compression). Higher quality numbers also create larger file sizes and potentially a slower download speed on the viewer side.

f12031.png
Figure 12-31

Add Copyright Notice & Metadata

The Output pane for either HTML or Flash styles is also where you can add a copyright notice to the images (circled). Lightroom places the copyright information in the lower left corner of each image based on EXIF metadata. You have no control over where the information is placed, or font type, size, or style.

Add Info Text and Identity Plate

Both the HTML and Flash gallery styles give you the option to add a title or caption based on EXIF data. This is done from the Image Info pane. You can also use an Identity Plate to add custom text or graphic. I'll show you more on this in the next section.

f12032.png
Figure 12-32

In the Web module Label's pane, for both HTML and Flash Galleries, you can enter your email address. Do this knowing that by including your email address on your site you are now susceptible to web bots that automatically harvest web sites for email addresses and sell the addresses to spammers.

Preview & Create a Custom Preset

When you are finished, you can Preview your Web gallery in a browser by clicking the Preview in Browser button in the toolbar. Your gallery will eventually open in your default web browser. If you are satisfied with the results, make a User Template by selecting Web→New Template from the menu bar. Name your template and place it in the User folder or create a new folder and put it there.

f12033.png
Figure 12-33

Publish your Work Online

f12034.png
Figure 12-34

Lightroom will place your finished Web gallery directly onto a server of your choice. In the Upload Settings pane (HTML and Flash are the same) select Edit from the pop-up menu (circled).

In the Configure FTP File Transfer dialog box, fill out the appropriate address, password, etc. Pay particular attention to the fact that Lightroom saves your password in plain text, which can be readable by anyone with access to your computer. Also note that many servers require the passive mode for data transfers, but not all. I had to turn this option off in order to successfully upload a gallery to my site.

f12035.png
Figure 12-35

Click the Upload button at the bottom of the right panel, and as long as you are online, Lightroom will do the rest. You can also export the files to a location of your choice and place them manually on your site.



Return to Inside Lightroom