Customizing a Web Gallery: Photoshop Lightroom 2 Adventure

by Mikkel Aaland

This excerpt is from Photoshop Lightroom 2 Adventure. Completely up-to-date for Lightroom 2, this beautifully illustrated and eminently practical book offers a complete tour of Adobe's integrated digital photography workflow application. Augmented by photos and case studies from a demanding road test in Tasmania, award-winning photographer Mikkel Aaland explains how Lightroom allows you to import, select, develop and showcase large volumes of digital images.

buy button

To start, you must first select the images you want to include in your Web gallery. Start with a small subset of images; otherwise, Lightroom slows down considerably as it generates a gallery based on an entire collection. Apply the settings to all the images when you are done.

Selecting Images

In the Library module, select a folder, collection, or keyword, as shown in Figure 12-21. If you are not in the Library module, press the G key, and you're taken to the Library module's grid view. If your Web gallery Use setting is set to All Filmstrip Photos, images appearing in the grid display work area are 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 choice in the Web gallery Collections pane or in the Web gallery filmstrip, and then, in the toolbar Use pop-up menu, choose Selected Photos. (You can also use this pop-up menu to select All Filmstrip Photos or Flagged Photos.)

Figure 12-21

Select the Web Module

Now—if you are not there already—go to the Web module. 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 shown in Figure 12-22. You can modify the order of images in the filmstrip.

Figure 12-22

Select a Web Template or Plug-in

Select a Lightroom template from the Template Browser or select a plug-in from the Engine pane in the right panel. You can see a preview of the template or plug-in 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 and plug-in gallery choices:

  • Galleries with separate windows of thumbnail images that lead to windows of full-size images. This basic style can be either HTML or Flash, as shown in Figure 12-23.
  • Galleries with a single window containing thumbnail images that, when clicked on, display an adjacent full-size image or enlarge, as they do with the Airtight Postcard Viewer plug-in. This is available only as a Flash style, as shown in Figure 12-24.
  • Galleries that consist of a user-controlled slide show with no thumbnails. This is available only as a Flash style, as shown in Figure 12-25.

Figure 12-23

Figure 12-24

Figure 12-25

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, as shown in Figure 12-26. The Site Info pane for HTML-based and Flash-based galleries is pretty much the same, except that identity plate settings are 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 get a pop-up menu of previously used text. You can't change the size of the text or the font.

Figure 12-26

Control the Color

In the Color Palette pane, shown in Figure 12-27, you can change the text colors, background, and so on. 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.

Figure 12-27

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 shown in Figure 12-28 to reduce or expand the number of cells.

Figure 12-28

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

Figure 12-29

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

Figure 12-30

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

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 by pixels to a fixed size, using the Image Pages Size slider shown in Figure 12-31, regardless of the size of the viewer's browser window.

Figure 12-31

Flash large images can be Extra Large, Large, Medium, or Small, as shown in Figure 12-32. In reality, Lightroom creates more sizes than that—in fact, it generates three sizes for each category. That way, when viewers resize their browser window, the thumbnails and previews adjust accordingly.

Figure 12-32

You can set the JPEG quality of large images for both HTML and Flash styles in the Output Settings pane, as shown in Figure 12-31. 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.

Add Copyright Notice and Metadata

The Output pane for either HTML or Flash styles is also where you can add a copyright notice to the images (circled in Figure 12-33). Lightroom places the copyright information, which is based on EXIF metadata, in the lower-left corner of each image. You have no control over where the information is placed, or over font type, size, or style. (Some plug-ins, such as the Airtight Postcard Viewer, don't offer copyright notices.)

Figure 12-33

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, shown in Figure 12-34. You can also use an identity plate to add custom text or graphic. I show you more on this in the next section.

Figure 12-34

Preview and Create a Custom Preset

When you are finished, you can preview your Web gallery in a browser by clicking the Preview in Browser button at the bottom of the left panel. Your gallery eventually opens in your default Web browser, as shown in Figure 12-35. If you are satisfied with the results, make a user template by selecting Web→New Template from the menu bar. Name your template, and if you want, create a user subfolder. After you select Create, the template appears under User Templates in the left panel.

Figure 12-35

Publish Your Work Online

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 Figure 12-36). In the Configure FTP File Transfer dialog box, fill out the appropriate address, password, and so on, as shown in Figure 12-37. Select Browse to make sure that your configuration is online and working. 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 to successfully upload a gallery to my site.

Figure 12-36

Figure 12-37

Click the Upload button at the bottom of the right panel, and as long as you are online, Lightroom will do the rest. Click on the Export button to export the files to a location of your choice and then place them manually on your site, or view them locally, or burn them to a DVD.

If you enjoyed this excerpt, buy a copy of Photoshop Lightroom 2 Adventure.