User Tools

Site Tools


dynamic_mastheads

Dynamic Masthead

Lightroom allows the creation of a single identity plate for an image gallery. Typically, the identity plate is used in the gallery masthead as a form of branding.

For some applications and some users, this will be sufficient. But with a little bit of effort, we can do much, much better.

The problem with Lightroom's implementation of the identity plate is that it's meant to be a “one size fits all” solution. Increasingly, though, we find that one size does not fit all.

For example, a wide masthead image is ill-suited to an iPhone's narrow display. And a standard resolution image file looks a mess on Apple's Retina displays. In this tutorial, we will use PHPlugins to call on different masthead graphics – identity plates – for different situations. We call this a “dynamic masthead”.

Preparing Image files

To fully implement the dynamic masthead, we will need standard and high-resolution versions of our masthead graphic for up to three contexts: Desktop, Tablet and Phone.

In the context of Desktop, our standard-resolution masthead images may be of any size.

In the context of Tablet, our standard-resolution masthead images should be not more than 600-pixels wide.

In the context of Phone, our standard-resolution masthead images should be not more than 300-pixels wide.

We then need high-resolution masthead images for each of these contexts, which are 2x the size of the standard-resolution image.

So that's six images in total. If an image is suitable for more than one context, then we can use fewer images. For example, my logo for The Turning Gate, at the top of this page, is 450-pixels wide and therefore suitable for both Desktop and Tablet contexts.

When creating my masthead image, I find it easiest to work on a Photoshop canvas viewed at 50% scale. I am then designing my logo at the size at which it will be viewed. But at 100% scale, it will be my high-resolution version. I then resize the image to 50% to save the standard-resolution. This prevents me ever having to upscale my image, so that I don't lose image fidelity.

As an example, let us consider my logo for CampagnaPictures.com.

Here is the standard resolution masthead image, CampagnaPictures-1x.png, 746-by-45-pixels:

For tablets, I create a smaller version, CampagnaPictures-tablet-1x.png, 590-by-36-pixels:

And for mobile, I create a narrow version that stacks and centers the two words, CampagnaPictures-mobile-1x.png, 300-by-74-pixels.

I've chosen to go vertical with the mobile graphic because the wide form-factor of the original masthead just doesn't makes sense on a phone's narrow display.

For each of the above, there is also a high-resolution rendition:

  • CampagnaPictures-2x.png, 1592-by-90-pixels
  • CampagnaPictures-tablet-2x.png, 1180-by-72-pixels
  • CampagnaPictures-mobile-2x.png, 600-by-148-pixels

All of these, I dump into a folder on my web server, /phplugins/images/.

The Code

If you have not already done so, go through the Custom CSS tutorial to create a custom stylesheet for use with PHPlugins. Now the code. And I will break it up and go slowly for the sake of explanation.

In all of the examples below, replace my image file names – CampagnaPictures-1x.png, etc. – with your own. And be sure to update the height properties when you see them. There's a lot of code below, but this is really very easy. Literally, you can get through this entire tutorial using copy-and-paste, then replace only the image file names and height values with your own.

First, we lay some groundwork:

html #masthead .mantle {
	padding: 32px 24px 24px;
	}

This just sets some padding for our masthead. You may change the values if you'd like.

Next, we add our identity plate. Just one for now, as Lightroom would do it:

html .logo {
	background-image: url(/phplugins/images/CampagnaPictures-1x.png);
	height: 45px;
	}

So this is our standard identity plate for the Desktop context. The background-image targets our image file, and the height is the height of that image file. It's very important to include the correct height here.

Now, we setup conditions for Apple's Retina displays. This will replace the identity plate above with the high-resolution version, only when necessary:

@media 
screen and (-moz-min-device-pixel-ratio: 2), 
screen and (-o-min-device-pixel-ratio: 2/1), 
screen and (-webkit-min-device-pixel-ratio: 2), 
screen and (min-device-pixel-ratio: 2) 
{
	html .logo {
		background-image: url(/phplugins/images/CampagnaPictures-2x.png);
		background-size: contain;
		}
	}

Here, the background-size property piggybacks on the height property from above, scaling the high-resolution to 50% so that it looks sharp and beautiful on Retina displays.

So that's the entire Desktop context. Now let's do tablets:

@media 
screen and (max-width: 992px) 
{
	html #masthead .mantle {
		padding: 24px 20px; /* optionally adjust padding around the masthead */
		}

	html .logo {
		background-image: url(/phplugins/images/CampagnaPictures-tablet-1x.png);
		height: 72px; /* height of standard-res image for tablets */
		}
	}

@media 
screen and (max-width: 992px) and (-moz-min-device-pixel-ratio: 2), 
screen and (max-width: 992px) and (-o-min-device-pixel-ratio: 2/1), 
screen and (max-width: 992px) and (-webkit-min-device-pixel-ratio: 2), 
screen and (max-width: 992px) and (min-device-pixel-ratio: 2) 
{
	html .logo {
		background-image: url(/phplugins/images/CampagnaPictures-tablet-2x.png);
		background-size: contain;
		}
	}

And more of the same, now for mobile:

@media 
screen and (max-width: 600px) 
{
	html #masthead .mantle {
		padding: 24px 20px; /* optionally adjust padding around masthead */
		}

	html .logo {
		background-image: url(/phplugins/images/CampagnaPictures-mobile-1x.png);
		background-position: center center; /* center align the masthead on Phones */
		height: 74px; /* height of standard-res image for phones */
		}
	}

@media 
screen and (max-width: 600px) and (-moz-min-device-pixel-ratio: 2), 
screen and (max-width: 600px) and (-o-min-device-pixel-ratio: 2/1), 
screen and (max-width: 600px) and (-webkit-min-device-pixel-ratio: 2), 
screen and (max-width: 600px) and (min-device-pixel-ratio: 2) 
{
	html .logo {
		background-image: url(/phplugins/images/CampagnaPictures-mobile-2x.png);
		background-size: contain;
		}
	}

And that's it. If you copy-and-pasted all of the above code into your CSS file, all you should have needed to change is the file names and height values, and optionally padding and alignment. If you're familiar with CSS, you can make whatever other adjustments you want to as well. But that's totally up to you.

What you should now have is a masthead that:

  • loads the most appropriate sized image for displays of a given size.
  • loads the most appropriate sized image for displays of a given resolution.

And so your logo will always look its best, no matter the device on which it is being viewed.

dynamic_mastheads.txt · Last modified: 2013/02/24 07:44 by admin