How to Create a HTML web gallery in Lightroom - Digital Photography School

How to Create a HTML web gallery in Lightroom

lightroom_html_gallery_opener.jpg

With the increasing popularity of the iPad and iPhone it’s no longer appropriate for most of us to create Flash based web galleries – they just can’t be easily viewed on these devices. If you want almost everyone to be able to see your galleries then you need to create them as HTML galleries and not Flash.

Lightroom has a range of HTML Templates you can use to create a reasonable looking gallery in a very short time.

To make your web gallery in Lightroom start by placing your images in a Collection. This makes it easier for you to work with the images and you can save the gallery so you can edit it in future if needed.

Select your Collection and switch to the Web module. From the Layout Style options, you can select Lightroom HTML gallery or, easier still, from the Template Browser panel on the left of the screen, select a gallery that is HTML based. If you look in the preview area the HTML gallery templates all have the letters HTML in their bottom left corner. Select a template to use.

lightroom_html_gallery_step1.jpg

From the toolbar (press T if it isn’t visible), choose All Filmstrip Photos if you have a Collection selected and this will add all the images to your gallery. What you see on the screen in the editing area is a live version of your web gallery. You can click on any image to view it as it will look on the web.

lightroom_html_gallery_step2.jpg

Open the Site Info panel and type a Site Title, a Collection Title and a Collection Description. If you don’t want to use all of these simply delete the placeholder text for those items you don’t want to use and the space they take up in the template will be freed for use for your images.

For the Contact Info, type your contact name if desired and then complete the Web Or Mail Link and this will be linked automatically to the contact name in the web gallery.

lightroom_html_gallery_step3.jpg

You can add an identity plate to the gallery, if desired, it will sit above the Site Title. You can link it back to your site if desired by completing the Web or Mail Link box.

lightroom_html_gallery_step4.jpg

The Color Palette options let you change the colors for the various elements in the website template.

In the Appearance panel you can set the thumbnail image grid size – it defaults to 3 x 3 and cannot be any smaller but it can be considerably larger. If you want to show cell numbers over the images you can do so – this is useful when you need to give viewers an easy way to identify images they like. Images are numbered sequentially and if you have multiple pages the images on the second page continue sequentially from the numbering from the first page.

lightroom_html_gallery_step5.jpg

You can control the size of the full size image on the Image Page by adjusting the Size slider. You can also add Photo Borders to the images in the Image Pages. Note that the Appearance panel is divided into Common Settings, Grid Pages and Image Pages allowing you to make change that effect the entire gallery, only the grid pages or only the image pages.

lightroom_html_gallery_step6.jpg

In the Image Info panel you can select to add labels to your images. These appear on the Image Page only. You can select a Title which appears above the image and a Caption which appears below the image. For each you can source the text from the image metadata and there is no reason why you can’t set the Title to be the Caption metadata and the Caption to be your Equipment metadata, for example.

lightroom_html_gallery_step7.jpg

In Output Settings select the quality of the larger size JPG images – 0 is low quality and 100 is high quality. If you want to include Metadata with the image select what to include – your choices are Copyright Only or All.

Also add a Watermark if desired. If you select to add a watermark, you’ll see it on the image page and the index pages so you can check to see that it’s what you want.

Select whether or not to sharpen the images – this sharpening is only applied as the images are output so you won’t see it on the screen. If you’re unsure what to use, enable Sharpening and set it to Standard.

lightroom_html_gallery_step8.jpg

When you’re done, click Create Saved Web Gallery – this is a new option in Lightroom 4 and it appears to the top right of the main editing area. Type a name for your web gallery and click Create. Doing this ensures that the gallery is saved and once you have done this, Lightroom will track your changes from now on.

In future you can come back to the web gallery by clicking the special collection that Lightroom creates for you.

lightroom_html_gallery_step9.jpg

If you want to upload your gallery to the web later on, click Export to export it to disk. Otherwise you can upload it direct to your website by selecting the Upload Settings panel and configure your FTP server. For this, you’ll need your server details, user name and password. You’ll also need the server path although you can click Browse to browse your server to find it if desired. Type a subfolder in which to place the gallery – you’ll need to do this if you plan to have multiple galleries in the server folder you are using. Each gallery needs to be placed in a different subfolder or it will overwrite the previously uploaded gallery.

lightroom_html_gallery_step10.jpg

When you have everything configured click Upload to render the gallery images, create the necessary html code and upload it all automatically to your server.

lightroom_html_gallery_step11.jpg

The HTML galleries in Lightroom aren’t the best looking galleries in town but having a gallery accessible to almost any device is definitely and incentive to use them in place of Flash galleries.

Read more from our Post Production category.

Helen Bradley is a Lifestyle journalist who divides her time between the real and digital worlds, picking the best from both. She writes and produces video instruction for Photoshop and digital photography for magazines and online providers world wide. She has also written four books on photo crafts and blogs at Projectwoman.com.

  • http://sambhavjain.in Sambhav

    [eimg link='http://www.flickr.com/photos/samgog/7372260516/' title='DSC_0457' url='http://farm6.staticflickr.com/5452/7372260516_3549e646de.jpg']

  • http://www.michellearmour.com Michelle

    Great article as usual, thank you Helen, just what I needed

  • http://www.sunpower.mn.cp-33.webhostbox.net/index.php?option=com_phocaguestbook&view=phocaguestbook&id=1&Itemid=82&t=780 Tyler

    My programmer is trying to persuade me to move to .net from
    PHP. I have always disliked the idea because of the expenses.
    But he’s tryiong none the less. I’ve been using Movable-type on numerous websites for about a year and am concerned about switching to another platform.
    I have heard excellent things about blogengine.
    net. Is there a way I can import all my wordpress posts into it?
    Any kind of help would be really appreciated!

Some older comments

  • Tyler

    May 24, 2013 08:28 am

    My programmer is trying to persuade me to move to .net from
    PHP. I have always disliked the idea because of the expenses.
    But he's tryiong none the less. I've been using Movable-type on numerous websites for about a year and am concerned about switching to another platform.
    I have heard excellent things about blogengine.
    net. Is there a way I can import all my wordpress posts into it?
    Any kind of help would be really appreciated!

  • Michelle

    July 27, 2012 08:56 am

    Great article as usual, thank you Helen, just what I needed

  • Sambhav

    June 15, 2012 10:41 am

    [eimg link='http://www.flickr.com/photos/samgog/7372260516/' title='DSC_0457' url='http://farm6.staticflickr.com/5452/7372260516_3549e646de.jpg']

Receive a FREE SAMPLE of our Portrait Photography Ebook

  • Guaranteed for 2 full months
  • Pay by PayPal or CreditCard
  • Instant Digital Download

Receive a FREE SAMPLE of our Portrait Photography Ebook

  • Guaranteed for 2 full months
  • Pay by PayPal or CreditCard
  • Instant Digital Download

Receive a FREE SAMPLE of our Portrait Photography Ebook

  • Guaranteed for 2 full months
  • Pay by PayPal or CreditCard
  • Instant Digital Download

Sign up to the free DPS PHOTOGRAPHY COURSE

  • Guaranteed for 2 full months
  • Pay by PayPal or CreditCard
  • Instant Digital Download

GET DAILY free tips, news and reviews via our RSS Feed

Sign up to the free

DPS PHOTOGRAPHY COURSE

  • Guaranteed for 2 full months
  • Pay by PayPal or CreditCard
  • Instant Digital Download

GET DAILY free tips, news and reviews via our RSS Feed

Sign up to the free

DPS PHOTOGRAPHY COURSE

  • Guaranteed for 2 full months
  • Pay by PayPal or CreditCard
  • Instant Digital Download
DPS NEWSLETTER
DPS NEWSLETTER
DPS NEWSLETTER

DPS offers a free weekly newsletter with: 
1. new photography tutorials and tips
2. latest photography assignments
3. photo competitions and prizes

Enter your email below to subscribe.
Email:
 
 
Get DAILY free tips, news and reviews via our RSS feed