• May
  • 15

One size does not fit all

Independent sizing of Landscape and Portrait photographs in Lightroom web-galleries

In presenting a photograph, the photographer typically prefers that the viewer take in the entirety of the photo at once. That’s an easy thing to guarantee when hanging your photograph on the wall. But when automating web-galleries, photographers are often forced to compromise, short-changing their horizontally aligned photographs by choosing a smaller long-side dimension in order to ensure their vertically aligned photographs will fit on the screen without need of a scrollbar.

With Adobe Lightroom, however, photographers can have it both ways. It just takes an extra step to go outside the box.

In this article, I’ll cover how to set dimensions independently for photos aligned horizontally and vertically, ensuring your landscapes are as wide as you want them, with your verticals still fitting on a single screen. This article is geared toward using my TTG Slimbox Gallery, though it will work with any gallery that doesn’t scale images, or have image sizes hard coded into the page HTML. Throughout this article, I will be assuming a certain level of familiarity with Adobe Lightroom.

We begin in the Library module, preparing images for presentation. This includes setting your metadata, captions and titles as you like them. For the purposes of this article, however, the most important thing is to set your filenames so they’ll be easy to work with later on.

You can batch rename your images by selecting them all (Command-A on Mac, Ctrl-A on Windows) at pressing the F2 key. Single-word names and sequential numbering work well, but multiple word names are fine too. Wherever you have spaces, though, be sure to use an underscore (_) instead of a space. This is important because the Web module exports files with underscores instead of spaces, and we’re going to be replacing those files later – and our filenames need to identical.

With files prepped and named, move to the Web module. Select TTG Slimbox Gallery (or whatever gallery you like to use) from the Galleries panel in the upper right. Setup the gallery according to your preferences and export to a directory on your desktop.

Under normal circumstances, this is where we’d stop. Now we step outside the box. We’re going to manually export the images again.

Return to the Library module. Select the photos again, then go to the File menu and select Export. The export dialog is divided into several sections.

Under “Export Location”, choose a place to put the new images. You can dump them directly into the web-gallery images folder if you want to, or save them to a separate location and copy them later.

Under “File Naming”, ensure that the output files will match the file names of the images now in your web gallery. This is important, or the web gallery won’t recognize the new images!

Under “File Settings”, choose JPEG and set the quality to 75 or 80 (or perhaps less) to ease loadtimes on visitors.

Under “Image Settings”, enable the check box for “Constrain Maximum Size”, set Units to pixels, and enter your desired dimensions for Width and Height.

Because you’ll be using these images in a web gallery, set the Color Space to sRGB and the Resolution to 72 pixels per inch. Tick the Add Copyright Watermark if you want to.

EXPORT!

Once that’s done, move the newly exported files into the web-gallery (if you didn’t save them there), overwriting the files generated by the gallery.

A secondary benefit of using this method is that your manually exported images retain metadata. Images exported in a gallery via the Web module have their metadata (EXIF and IPTC) stripped!

And now you have your gallery, metadata included, and having set individual dimensions for your horizontal and vertical oriented photos – no more short-changing your landscapes, and no more scrollbars on your portraits! I hope you’ve found this tutorial useful. :)

Send this article to a friend »

« Next Article | ... ... | Previous Article »

Comment »

Carlos Tico
3 October 07 / permalink / feed

I am not that expert in web programming, so I apologize if this is nosense. Now that we have the metadata included, understanding that this also includes keywords, would it be that difficult to add a keyword search tool based on a data file with all meta strored together?

3 October 07 / permalink / feed

I’d guess yes, very difficult indeed. I’m not quite sure how to make a website get at the EXIF/IPTC data to use it.

13 October 07 / permalink / feed

Is it possible to add a few picture to the gallery this way without regenerate all files in the WEB module?

13 October 07 / permalink / feed

You’d have to copy the images into the existing image folder, and then copy the new HTML into the gallery page. There’s nothing automated about it, but if you don’t mind working with a bit of HTML, you could do it.

2 November 07 / permalink / feed

There are things that are simple to some, but genius to others. I definitely fall into the later category with this tip. I have often tortured myself over getting the full width of landscape photos vs not having to scroll portrait shots…..great work (again!)

1 December 07 / permalink / feed

don’t you have to modify the size on the XML file??
stefano

1 December 07 / permalink / feed

The slimbox gallery doesn’t have an XML file. Several of the flash galleries also do not require image dimensions in the XML file, as they simply scale the images to best fit within the size of the viewport.

Tom
18 July 08 / permalink / feed

Hi Matthew,

What would you consider to be a good resolution to export images from LR at for use in a slimbox gallery and piclens full screen?

Many Thanks,
Tom.

19 July 08 / permalink / feed

Exporting them at 72 ppi is usually a good idea. For dimensions, you can probably get away with 1000px or 1500px wide, but your image file sizes will be pretty huge. You might want to use Shadowbox instead of Slimbox as well, because if a visitor’s screen is too small for an image that large, Shadowbox allows you to set options for whether the image will scale down to fit their screen, can be dragged around the view port with the mouse, etc.

Tom
19 July 08 / permalink / feed

Thanks Matthew,

I need to stick with Slimbox for clients as I need the client response functionality, I’ll test around 1000px on the long edge and see how I get on.

Name:

Email:

URL:

Comments support Textile formatting & Gravatars.

my personal information