So this is going to be a weird, experimental post. My primary aim is to play around with the crucial decision of whether to use portrait or landscape orientation to display photos.
Secondly, I want to share images from the only backpacking trip we took this summer. We visited the same spot last summer for Camille’s first backpacking trip. This year we were a little quicker and there was much more snow still on the highest peaks.
Thirdly, I want to test some different layouts for posts like these and try features in the new Gutenberg editor for WordPress.
Portrait orientation
After returning from this one-night trek, I realized that I had both portrait and landscape versions of many photos, so I thought I’d see what it looks like to present near-duplicates that are mostly differentiated by their orientation.
First up are the portraits. Although this orientation can capture compelling views, if you’re viewing the images on a computer screen, the result can be a little disappointing. For the entire image to fit on the landscape-style screen, you may need need to shrink it, as I’ve done below.
But if you’re viewing a web page on a phone, odds are that it’ll be in portrait orientation, so the photo may look better on that device. The photo below is 1,024 pixels tall whereas the one above is 768.
It gets even more confusing when you start thinking about social media channels. Landscape orientation works better on Twitter, but on other platforms, such as Instagram and Facebook, the resulting photo is crammed into the confines of a relatively narrow feed, so on those networks it seems like portrait and square orientation is preferred.
In some cases, the subject matter and composition dictate the orientation. Conversely, the orientation can emphasize or play down aspects of the content.
When I compare the portraits to the landscape orientation photos below, I feel like the portraits emphasize the sky and height of mountains while the landscapes do more to evoke the expansiveness of the scene.
As the name suggests, shooting a landscape in landscape orientation often feels more natural, but this little experiment has shown me that tilting the camera 90 degrees can also generate plenty of interesting images.
Landscape orientation
The photos below more or less mirror the ones above but I’ve used the landscape orientation.
Another thing I’m playing around with on this page is the size of the photos and how wide to display the content. The photo above is “full width,” which allows you to take advantage of the wide computer screens that many users have these days.
The photo below is 100% size and 2000 pixels wide.
The photo below is what my WordPress theme calls “large” and is 1024 pixels wide.
And this one below is medium size, just 300 pixels across.
Below is an example of the media and text format that’s now part of the Gutenberg editor in WordPress.
With the text next to the photo, it’s easy to connect the description to the image.
But this format works better when the container for all the content isn’t full width.
(To keep the text on this page focused in the center, I created a three-column layout and placed the copy in the middle one.)
One other image format in WordPress that’s worth exploring is the “cover” style. In addition to creating a panoramic view, the format lets you create a title that’s superimposed on the image.
My theme uses a similar full-width panorama at the top of blog posts like this one, but the cover feature in WordPress lets you do the same anywhere in a post. You can also adjust the positioning of the photo, add a color overlay, and change the opacity of the background.
Happy trails . . .
