14. Web & Device Output

Introduction

By utilizing Lightroom’s Web module, you can publish your favorite photo collections as Web galleries, to the Flickr Website, and to an external drive, such as an iPhone. Lightroom comes equipped with several website structures (called styles) that you can use to create an online gallery. Using the settings available in the various Web module panels, you can customize a gallery’s appearance.

In this chapter, you learn how to choose an HTML- or Flash-based gallery style, and learn how to modify its appearance. You learn how to include website info, such as collection descriptions and contact info, and also learn how to include info about photos in the gallery’s main image view.

This chapter also teaches you how to customize a chosen gallery’s appearance by applying a specific color palette to the interface, and by choosing custom Appearance panel attributes. You learn how to choose specific image and metadata output settings for the web gallery, and also learn how to preview the site in your system’s default web browser application.

In addition, this chapter teaches you how to export a Lightroom gallery as a complete website, or upload it to a server directly from the Web module. You also learn how to save your favorite Web gallery settings as a template.

Choosing a Web Gallery Layout Style

The Layout Style panel panel enables you to choose from one of five preset gallery styles that ship with Lightroom. The Lightroom HTML gallery is the most compatible because it uses classic HTML code. The Lightroom Flash and Airtight galleries use Flash code; therefore, the end user must have the latest Flash player installed to view them. You can select the style that you would like to use by clicking its name in the Layout Style panel, or by choosing it from the panel drop-down list when the Layout Style panel is closed.

Choose the Lightroom HTML Gallery

From the Library module Grid or the Filmstrip, select the photos you would like to include in the Web gallery.

Choose Window > Web or click the Web button in the upper-right corner of the interface.

If the Toolbar is not already visible, choose View > Show Toolbar.

Choose Selected Photos from the Use menu in the Toolbar.

Choose the Lightroom HTML Gallery from the Layout Style panel list.

Choose the Lightroom Flash Gallery

From the Library module Grid or the Filmstrip, select the photos you would like to include in the Web gallery.

Choose Window > Web or click the Web button in the upper-right corner of the interface.

If the Toolbar is not already visible, choose View > Show Toolbar.

Choose Selected Photos from the Use menu in the Toolbar.

Choose the Lightroom Flash Gallery from the Layout Style panel list.

Choose the Airtight AutoViewer Gallery

From the Library module Grid or the Filmstrip, select the photos you would like to include in the Web gallery.

Click the Web button in the upper-right corner of the interface.

If the Toolbar is not already visible, choose View > Show Toolbar.

Choose Selected Photos from the Use menu in the Toolbar.

Choose the Airtight AutoViewer Gallery from the Layout Style panel list.

Choose the Airtight PostcardViewer Gallery

From the Library module Grid or the Filmstrip, select the photos you would like to include in the Web gallery.

Click the Web button in the upper-right corner of the interface.

If the Toolbar is not already visible, choose View > Show Toolbar.

Choose Selected Photos from the Use menu in the Toolbar.

Choose the Airtight Postcard-Viewer Gallery from the Layout Style panel list.

Choose the Airtight SimpleViewer Gallery

From the Library module Grid or the Filmstrip, select the photos you would like to include in the Web gallery.

Click the Web button in the upper-right corner of the interface.

If the Toolbar is not already visible, choose View > Show Toolbar.

Choose Selected Photos from the Use menu in the Toolbar.

Choose the Airtight SimpleViewer Gallery from the Layout Style panel list.

Including Site Info

The Site Info panel enables you to include website and contact info in the gallery, as well as additional information about the gallery images. It’s important to note that the Site Info panel contains different options, depending on which Web gallery style you currently have selected in the Layout Style panel. Note also that the text you enter in the Site Title info field is what appears in the browser title bar. Email links must be entered using the standard HTML code, mailto:, followed by the email address. Collection Description info is only accessible in Flash galleries by choosing View > About These Photos.

Enter Website and contact info

In the Web module (with or without Web gallery images selected in the Filmstrip), choose Window > Panels > Site Info to display the Site Info panel.

Enter the preferred website and contact information in the Site Info panel fields. When working in the Lightroom HTML and Flash galleries, the following site info fields are available: Site Title, Collection Title, Collection Description, Contact Info, and Web or Mail Link. Note that when working in the Lightroom HTML gallery, the Site Info panel also includes an Identity Plate section, plus an additional Web or Mail Link field.

When working with the Airtight galleries, the only field available in the Site Info panel is Site Title.

Applying Color to the Gallery

The Color Palette panel enables you to customize the appearance of the gallery interface. As it is with most of the Web module panels, the Color Palette panel options change depending on which Web gallery style you currently have selected. For color palette ideas, check out http://kuler.adobe.com, a free web-hosted application that enables you to explore, access, and share color harmonies.

Choose custom colors for various Web gallery items

In the Web module (with or without Web gallery images selected in the Filmstrip), choose Window > Panels > Color Palette to display the Color Palette panel.

To choose a different color for any item listed in the Color Palette panel, click the neighboring color swatch icon and select the color using the Color Picker.

Lightroom Flash Gallery Color Palette panel

Lightroom displays the colored gallery items in the Content area.

Lightroom HTML Gallery Color Palette panel

Airtight AutoViewer Color Palette panel

Airtight PostcardViewer Color Palette panel

Airtight SimpleViewer Color Palette panel

Choosing Gallery Appearance Attributes

You can apply additional edits to a chosen gallery interface by enabling the various options available in the Appearance panel. As it is with most of the panels in the Web module, the Appearance panel options change depending on which Web gallery style you currently have selected in the Layout Style panel.

Choose Lightroom HTML Gallery appearance attributes

In the Web module, with Web gallery images already selected in the Filmstrip and displayed in the Lightroom HTML gallery style, choose Window > Panels > Appearance to display the Appearance panel.

In the Common Settings portion of the Appearance panel, enable the Add Drop Shadow to Photos option to apply a drop shadow to every gallery image.

To include section borders in the grid, enable the Section Border option in the Common Settings portion of the Appearance panel.

To choose a different color for the section borders of the grid, click the neighboring color swatch icon and select the color using the Color Picker.

To set the grid dimensions for the gallery, click anywhere in the grid that is located in the Grid Pages section of the Appearance panel.

To display cell numbers in the grid, enable the Show Cell Numbers option in the Grid Pages section of the Appearance panel.

To include photo borders in the grid, enable the Photo Borders option in the Grid Pages portion of the Appearance panel.

To choose a different color for the photo borders, click the neighboring color swatch icon and select the color using the Color Picker.

In the Content area, click a thumbnail in the image grid. Doing so displays the image by itself on an Image Page.

In the Image Pages portion of the Appearance panel, adjust the Size slider to determine the display size for the Image Pages, or enter the value manually in the field provided.

To include photo borders in the Image Pages, enable the Photo Borders option in the Image Pages portion of the Appearance panel.

To choose a different color for the Image Page photo borders, click the neighboring color swatch icon and select the color using the Color Picker.

In the Image Pages portion of the Appearance panel, adjust the Width slider to determine the pixel width for the Image Page photo borders, or enter the value manually in the field provided.

Choose Lightroom Flash Gallery appearance attributes

In the Web module, with Web gallery images already selected in the Filmstrip and displayed in the Lightroom Flash gallery style, choose Window > Panels > Appearance to display the Appearance panel.

At the top of the Appearance panel, choose a layout option from the Layout drop-down list. Options include Scrolling, Paginated, Left, and Slideshow Only.

To include an Identity Plate at the top of the Flash gallery, enable the Identity Plate option in the Appearance panel.

In the Large Images portion of the Appearance panel, choose a size option from the Size drop-down list.

In the Thumbnail Images portion of the Appearance panel, choose a size option from the Size drop-down list.

Choose Airtight AutoViewer gallery appearance attributes

In the Web module, with Web gallery images already selected in the Filmstrip and displayed in the Airtight AutoViewer style, choose Window > Panels > Appearance to display the Appearance panel.

In the Stage Options portion of the Appearance panel, adjust the Photo Borders slider to determine the pixel width for the photo borders, or enter the value manually in the field provided.

In the Stage Options portion of the Appearance panel, adjust the Padding slider to determine the amount of space to place between gallery images, or enter the value manually in the field provided.

In the Stage Options portion of the Appearance panel, adjust the Slide Duration slider to determine the amount of time each image is displayed when playing the gallery slideshow, or enter the value manually in the field provided.

Choose Airtight PostcardViewer gallery appearance attributes

In the Web module, with Web gallery images already selected in the Filmstrip and displayed in the Airtight PostcardViewer style, choose Window > Panels > Appearance to display the Appearance panel.

In the Postcards portion of the Appearance panel, adjust the Columns slider to determine the number of columns to include in the postcard gallery, or enter the value manually in the field provided.

In the Postcards portion of the Appearance panel, adjust the Photo Borders slider to determine the pixel width for the photo borders, or enter the value manually in the field provided.

In the Postcards portion of the Appearance panel, adjust the Padding slider to determine the amount of space to place between gallery images, or enter the value manually in the field provided.

In the Zoom Factors portion of the Appearance panel, adjust the Distant slider to determine the size of the postcard images in their zoomed-out state, or enter the value manually in the field provided.

In the Zoom Factors portion of the Appearance panel, adjust the Near slider to determine the size of the postcard images in their zoomed-in state, or enter the value manually in the field provided.

Choose Airtight SimpleViewer gallery appearance attributes

In the Web module, with Web gallery images already selected in the Filmstrip and displayed in the Airtight SimpleViewer style, choose Window > Panels > Appearance to display the Appearance panel.

In the Stage Options portion of the Appearance panel, choose a layout option from the Position drop-down list. Options include Top, Bottom, Left, and Right.

In the Stage Options portion of the Appearance panel, adjust the Rows slider to determine the number of rows to include in the gallery, or enter the value manually in the field provided.

In the Stage Options portion of the Appearance panel, adjust the Columns slider to determine the number of columns to include in the gallery, or enter the value manually in the field provided.

Including Image Info

The Image Info panel enables you to include image-related information in the main image views of the gallery. In the HTML gallery, the Title info appears above the main image and the Caption info appears below. In the Flash gallery, both the Title and Caption info appear below the image, with the Title info set in a bold typeface directly above the caption. Note that in the Airtight galleries, you can only include Captions, not Titles.

Display image captions and titles

In the Web module, with Web gallery images already selected in the Filmstrip and displayed in one of the gallery styles, choose Window > Panels > Image Info to display the Image Info panel.

In the Labels portion of the Image Info panel, enable the Title option (Lightroom HTML and Flash galleries only).

Choose an image info preset option from the Title drop-down list, or to create a custom setting, choose Edit. In the Text Template Editor dialog box that appears when choosing Edit, use the drop-down lists to choose the items that you’d like to include. Click the neighboring Insert buttons to add the text items.

If you’ve chosen to apply a custom setting, click the Done button in the bottom-right corner of the Text Template Editor dialog box.

Lightroom displays the title info above the large image in the Content Area.

In the Labels portion of the Image Info panel, enable the Caption option.

Choose an image info preset option from the Caption drop-down list, or to create a custom setting, choose Edit.

Lightroom displays the caption info below the large image in the Content Area.

Choosing Output Settings

The Output Settings panel enables you to specify the image and metadata output settings for your Web gallery. As it is with most of the Web module panels, the options in the Output Settings panel change depending on which Web gallery style you currently have selected in the Layout Style panel. The Quality slider enables you to set the amount of JPEG lossy compression that is applied to the gallery images during output. Note that you can only embed image metadata when working with the Lightroom HTML and Flash galleries.

Choose Lightroom HTML and Flash Gallery output settings

With a Lightroom HTML or Flash gallery already set up in the Web module, choose Window > Panels > Output Settings to display the Output Settings panel.

In the Large Images portion of the Output Settings panel, adjust the Quality slider to determine the display quality of the large gallery images, or enter the value manually in the field provided.

If you’d like to output specific image metadata, choose a metadata preset from the Metadata drop-down list, or else choose All.

Enable the Watermarking option to display a watermarking preset over the image. Choose a watermarking preset from the Watermarking drop-down list.

Enable the Sharpening option in the Output Settings panel.

Choose the sharpening quality from the Sharpening drop-down list. Options include Low, Standard, and High.

Choose Airtight SimpleViewer output settings

With an Airtight SimpleViewer gallery already set up in the Web module, choose Window > Panels > Output Settings to display the Output Settings panel.

In the Large Images portion of the Output Settings panel, adjust the Size slider to determine the display size for the large gallery images, or enter the value manually in the field provided.

In the Large Images portion of the Output Settings panel, adjust the Quality slider to determine the display quality of the large gallery images, or enter the value manually in the field provided.

In the Large Images portion of the Output Settings panel, adjust the Photo Borders slider to determine the pixel width for the large image photo borders, or enter the value manually in the field provided.

In the Large Images portion of the Output Settings panel, adjust the Padding slider to determine the amount of space to place between the large image and the edges of the screen, or enter the value manually in the field provided.

Enable the Allow Right-Click to Open Photos option to allow the end user to access the Open command from the contextual menu.

Choose Airtight AutoViewer and PostcardViewer output settings

With an Airtight AutoViewer or PostcardViewer gallery already set up in the Web module, choose Window > Panels > Output Settings to display the Output Settings panel.

In the Large Images portion of the Output Settings panel, adjust the Size slider to determine the display size for the large gallery images, or enter the value manually in the field provided.

In the Large Images portion of the Output Settings panel, adjust the Quality slider to determine the display quality of the large gallery images, or enter the value manually in the field provided.

Enable the Watermarking option to display a watermarking preset over the image. Choose a watermarking preset from the Watermarking drop-down list.

Enable the Sharpening option in the Output Settings panel.

Choose the sharpening quality from the Sharpening drop-down list. Options include: Low, Standard, and High.

Previewing a Web Gallery

As you choose settings for your web gallery, you can preview them in your default system web browser, such as Apple Safari, Mozilla Firefox, Google Chrome, or Microsoft Internet Explorer. To do so, choose Web > Preview in Browser, or click the Preview in Browser button, located in the lower-left corner of the interface.

Preview the Web gallery in your system’s default browser

With a Web gallery already set up in the Web module, choose Web > Preview in Browser to display the gallery in your operating system’s default browser. You can also click the Preview in Browser button, located in the lower-left corner of the interface.

Lightroom generates a temporary export of the gallery and previews the result in your default browser application.

Lightroom generates a temporary export of the site.

Preview the gallery in your default web browser application.

Exporting a Web Gallery

When you finish applying all your web gallery settings, you can export the gallery as a complete website. Doing so allows you to view the website in other browsers besides the system default. You can also manually upload the exported site to a server using a separate FTP program, such as Fetch (Mac OS X) or SmartFTP (Windows XP/Vista/7).

Export a complete version of the gallery website

With a web gallery already set up in the Web module, choose Web > Export Web Photo Gallery to save a complete version of the website to a folder on your computer. You can also click the Export button, located in the lower-right corner of the interface.

In the Save Web Gallery dialog box that appears, enter a name in the Save As field.

Choose a system location where you’d like to save the website.

Click Save.

Uploading a Web Gallery

Lightroom also enables you to upload a Web gallery directly from the Web module. To do so, you must choose a preexisting FTP preset option from the FTP Server drop-down list, or enter custom settings in the Configure FTP File Transfer dialog box. You can save custom settings as an FTP preset by choosing Save Current Settings as New Preset from the Preset drop-down list.

Upload a gallery website directly from Lightroom

With a web gallery already set up in the Web module, choose Window > Panels > Upload Settings to display the Upload Settings panel.

Choose an FTP server preset option from the FTP server drop-down list, or choose Edit to create a custom setting.

In the Configure FTP File Transfer dialog box that appears when choosing Edit, enter the server URL in the Server field.

Enter the username in the Username field.

Enter the password in the Password field.

Enter the directory path in the Server Path field, or click Browse and select a folder from the pop-up dialog box that appears.

Click OK.

Enable the Put in Subfolder option in the Output Settings panel.

Enter a unique subfolder name in the Output Settings panel.

Click the Upload button located in the lower-right corner of the interface.

Saving a Web Gallery Template

Lightroom enables you to save your favorite gallery settings as templates. Doing so enables you to reinstate your most commonly used settings with a simple click of a button. You can save templates in the User Templates folder or create new folders within the Template Browser panel. In addition, the Template Browser panel also contains a Lightroom Templates folder that contains all the templates that ship with Lightroom.

Save commonly used Web gallery settings as templates

With a Web gallery already set up in the Web module, choose Window > Panels > Template Browser to display the Template Browser panel.

Choose Web > New Template, or click the Create New Preset button (the + symbol) in the upper-right corner of the Template Browser panel.

In the New Template dialog box that appears, enter a name in the Template Name field.

Choose a folder to save the template in from the Folder drop-down list (the default is User Templates).

Click Create.

Lightroom adds the new template to the Template Browser list.

Publishing Photos to Flickr

The Publish Services panel enables you to create photo collections and upload them to the Flickr online photo sharing service. You can choose your preferred publish settings in the Lightroom Publishing Manager dialog box and then upload and manage your Flickr photo collections all directly from Lightroom.

Upload collections of photos to the Flickr photostream

Choose Window > Library or click the Library button in the upper-right corner of the interface.

Choose Window > Panels > Publish Services to display the Publish Services panel.

In the Publish Services panel, click the Set Up button on the right side of the Flickr bar.

In the Lightroom Publishing Manager dialog box, choose the preferred publishing settings.

In the Flickr Account section of the Lightroom Publishing Manager dialog box, click the Log in button.

In the authorization dialog box that appears, click the Authorize button.

If you’re not already logged in at Flickr.com, Lightroom launches your system’s default Web browser and displays the Flickr log-in page. Proceed to log in to Flickr.

Flickr displays the Lightroom request page. Click the Next button.

Flickr displays the Lightroom authorization page. Click OK, I’ll Authorize It.

Flickr displays the Lightroom authorization confirmation page. Choose File > Close Window or click the Close Window button.

Return to Lightroom and click the Done button.

In the Lightroom Publishing Manager dialog box, click Save.

Drag and drop photos from the Library Grid or Filmstrip to the Flickr Photostream collection in the Publish Services panel.

Click the Flickr Photostream bar in the Publish Services panel to display the collected photos in the Library Content area.

Click the Publish button to upload the photos to Flickr.

Right-click or Control-click (Mac) the Photostream in the Publish Services panel and choose Show in Flickr. Lightroom opens your default Web browser and displays the published photostream at Flickr.com.

Lightroom displays the published photostream at Flickr.com.

Viewing and Adding Comments

Lightroom not only enables you to upload photos to a Flickr photostream, but also enables you to view and add comments to them. Simply select a thumbnail from the Published Photos display in the Library Content area and view or add comments using the controls available in the Comments panel.

View and add comments to photos published to Flickr

Choose Window > Library or click the Library button in the upper-right corner of the interface.

Choose Window > Panels > Publish Services to display the Publish Services panel.

Click the Flickr Photostream bar in the Publish Services panel to display the published photos in the Library Content area.

Select a thumbnail from the Published Photos section of the Content area.

Choose Window > Panels > Comments to display the Comments panel.

View comments posted to the photo in the Comments panel. Click the Comment field to add or reply to a comment.

Publishing Photos to an iPhone

The Publish Services panel also enables you to create collections of photos that you can publish (i.e. export) to an external drive, such as an iPhone. To do so, you must set up a folder on your disk that you can sync with the iPhone through the iTunes application.

Save collections of photos to an iPhone

Choose Window > Library or click the Library button in the upper-right corner of the interface.

Choose Window > Panels > Publish Services to display the Publish Services panel.

In the Publish Services panel, click the Set Up button on the right side of the Hard Drive bar.

In the Export Location section of the Lightroom Publishing Manager dialog box, choose Specific Folder from the Export To drop-down list.

Click the Choose button in the Export Location section of the Lightroom Publishing Manager dialog box.

In the dialog box that appears, browse to the preferred disk location and click the New Folder button.

Enter a name for the folder (such as iPhone) in the New Folder dialog box.

Click Create.

Click Choose.

Disable the Put in Subfolder option in the Export Location section of the Lightroom Publishing Manager dialog box.

In the Lightroom Publishing Manager dialog box, choose the preferred publishing settings.

Click Save.

Drag and drop photos from the Library Grid or Filmstrip to the Hard Drive iPhone collection in the Publish Services panel.

Click the iPhone collection in the Publish Services panel to display the collected photos in the Library Content area.

Click the Publish button to export the photos to the iPhone folder.

Connect the iPhone to the computer. The iTunes application should launch automatically. Enable the Sync Photos From option.

Choose the folder location from the Sync Photos From drop-down list.

Enable the Selected Folders option.

Place a check next to the iPhone folder.

Click Apply.

Proceed to manage the exported photos directly from your iPhone.