A featured image in a WordPress post is especially handy if you like to use Read More… links to keep the front page uncluttered. If there’s not a featured image, the post is just a headline and excerpt and any images that could attract a reader are buried “beneath the fold” as newspaper people like to say.
Usually you can get away with just using an image from the inside the post as the feature. This works, but you get a random crop depending on the style used on your blog. I also like a more narrow banner-style image than the fatter default size. Plus if you want to create a feature that’s a collage of several pictures from the post, WordPress can’t help.
I’ve started using Lightroom to create my customized featured images so I don’t have to export then edit them in another program. The trick is use the print module. (And presets, which are included below.)
The print module can also print to a file instead of paper. This is how we’ll be exporting our finished image. But first theres a few things that we need to set up.
I want the output size to be 900×150 pixels. This aspect ratio is one that I like because it looks like a banner image and doesn’t take up too much vertical space. It’s also wide enough that I don’t have to worry about which WordPress template I’m using. It’ll also fill the post column like a good featured image should.
Everything in the print module is based off of paper size, so to get our pixel size we have to use PPI (pixels per inch) to convert pixels into a linear measurement (I’ll be using inches, but the same applies to centimeters).
Since the banner is to be 150 pixels tall, we’ll use that as our conversion factor. To get our inch value, we just need to divide our pixel size by our PPI of 150.
150 pixels ÷ 150 PPI = 1 inch 950 pixels ÷ 150 PPI = 6 inches
So now we have a paper size of 1×6 inches. All we have to do is create a custom paper size using those dimensions. In Lightroom switch over the print module, and click the
Page Setup button in the lower left. Once the Page Setup box is open, click
Paper Size then scroll down to
Manage Custom Sizes.
Once open click the
+ to create a new paper size. I renamed mine
WP Header, then set the size to 6” wide and 1” tall. Make sure to set all of the borders to zero. Then click
OK to save.
Make sure the new paper size is selected and click
Lightroom print setup
Now Lightroom should be showing you our new banner-size blank page. Select
Contact Sheet and make sure the border sliders are set to zero. Selecting an image from the filmstrip will show it on the banner. You can adjust the positioning to get the crop you want.
Make sure to save this as a preset (click the
Template Browser bar on the left side. I named mine
WordPress Feature 1up.
To have two images side-by-side, change the
Page Grid column slider to create two columns. Now selecting two images from the filmstrip will plug them both into the banner. Make sure to save this as a preset too.
WordPress Feature 2up is a good name.
The same goes for three images. Just move the column slider to
3 and save the preset as
WordPress Feature 3up.
Stagger block layout
Another neat trick for creating a multiple image banner is to have the middle image bigger than two side images. This takes a bit more work but looks good.
First switch the
Layout Style to
Custom Package. Then click
Clear Layout to start with a fresh page. Our custom paper size should still be selected. If not, do that now.
Click any of the
Add to Package buttons to lay down the first frame. It’ll clip to fit, then drag the width slider to 1.50”.
Click any of the
Add to Package buttons to lay down the second frame. It’ll clip to fit, then drag the width slider to 3.00”.
For the third frame, when you click
Add to Package a new page will appear. Drag the frame from the second page up to the first then adjust the width to 1.50” and delete the second page by clicking the
X at the top left of the second page. You might have to drag the third frame all the way to the left to position it.
When using a Custom Package you’ll notice that the selected images don’t automatically fill the frames. You’ll have to drag them where you want them. Save this as a preset and we can move onto the print settings.
Print to file settings
The print settings are straight forward, make sure you’re set to print to
JPEG File, and the DPI is set to 150 (dots per inch, it’s the same as PPI but the print module thinks we’re sending this file to a printer that’s going to make dots on paper).
Since this needs to be fast-loading header images, make sure the
JPEG Quality is turned down. I find 60 to be a good setting. Having the color profile set to
sRGB maximizes compatibility when viewing on the web.
After this, click
Print to File... at the bottom right and select a location to save your new banner. I usually dump them to the desktop so I can easily find them.
Once the banner is uploaded to WordPress I can use the featured image selector to add it to a post. As for the file on the desktop? I delete them. There’s no point in saving something that you can easily recreate with a few clicks.
What I really like about this system is it all happens in Lightroom. Once the exported file lands on my desktop it’s ready to upload. I don’t have to worry about opening Photoshop to composite the images and there’s no intermediate files to keep track of.
As for keeping screen shots in Lightroom? It’s convenient and I have a post planned about how I do it.
For a bonus, I’ve zipped up my saved presets, and you can download them right here. I hope you enjoyed this and find it useful. If you’d like to support the creation of more tutorials like this please donate with either PayPal or credit/debit card. Thank you.