Looking back, since WordPress first introduced block themes, I’ve struggled to keep the display of portrait-oriented (vertical) images in proportion.
When a given theme allowed for an acceptable display of landscape-oriented (horizontal) images, based on width percentages assigned to the template, vertical images became far too tall, requiring visitors to scroll off screen, while also creating pixelation. Conversely, when a given theme allowed for an acceptable display of portrait-oriented (vertical) images, horizontal images were reduced to a rather limiting, narrow display width.
The solution – to allow for a wide width view of horizontal images, while at the same time maintaining a reasonable height to display vertical images – involved both post tags and templates.
To begin, I selected all posts with Featured Images which were vertical, and assigned a specific tag for those posts; in this case, “vert-scale”.
Next, given that I’d already made various modifications to the Single Posts template (reducing the number of columns from three to two, for instance), I opened Appearance > Editor > Templates > Single Posts, and then copied (command+c) the template contents, as shown in the List View. Then, while still inside the Editor, I went back to the Templates page and clicked on the “+” icon, to create a new template. Asked to provide a name for the new template, I entered “Single Post Vertical”.
Selecting the default template option, I then opened the List view, clicked on the topmost block, choosing “Add before” to paste (command+v) the contents into the new template. I deleted the default contents from the List view, located the Featured Image to change its width percentage, and then saved the new template.
Lastly, back in the Admin panel, I clicked Posts > Tags and searched for the newly created tag “vert-scale”. Displayed in the right column is “Count”, which includes the number of posts meeting said query; clicking on that number then displays all posts tagged accordingly. On the next page, in order to highlight all of the posts listed, I clicked the box next to “Title” and then selected Bulk Actions > Edit.
Therein, I changed the applied Template to the newly created template, “Single Posts Vertical”, then clicked Save.
As a result, vertical images seen in the single post view now use this new template, which restricts the display to a width of 65.986%, retaining proper proportion. Meanwhile, the display of horizontal images consume a wider width of 75%.
Note: The theme I’ve chosen to use is called Mysa, a new block theme featuring three columns and a fixed navigation panel.