Most of the time I hold a camera normally, but sometimes a vertical shot is the most appropriate.  Occasionally I will perform a vertical crop of a horizontal image (but not often – this knocks out a lot of image data).

In presenting my photo work in sets meant to be scrolled top to bottom, as I like to do, I encountered a problem with the integration of vertically-oriented (“tall”) images into groups of horizontally-oriented (“wide) images.  Only around five percent of my photos are tall, but they are no less important.

Unless coded for absolute size, typically designers will write CSS that instructs browsers to resize images dynamically as the window size changes (as a result of device-to-device shifts or as a user re-sizes the browser window), until a boundary is hit.  Usually the boundary will manifest as a vertical element – the edge of the window, or the beginning of a sidebar menu (an exception being if the photos are meant to be scrolled horizontally, in which case the opposite problem would emerge).  So, when a wide image hits the edge of a screen, the horizontal reference dimension for its size is locked and the image is re-sized proportionally to that value. Unfortunately this produces annoying results for tall images because the proportions are flipped; when a tall image hits the boundary, it is re-sized proportionally, but in this case the proportions are too large and the image is rendered far too tall, forcing the user to scroll up and down or visit the image file in isolation to view it at a proper, smaller size, without having to scroll.  Not a good thing!

Until now, the only way to deal with this has been to set absolute pixel values for the image dimensions.  This works but still breaks the flow of dynamic re-sizing established with the wide images in the set, as well as requiring you to pick an absolute size that will function as a “middle- ground” across a number of devices.  If displaying pictures of various ratios in sets in a pleasing fashion is important to you, this is obviously not acceptable.

It is with great pleasure, then, that I discovered the WordPress plugin Vertically Responsive Images, written by Evan Solomon.  As of March 24th, 2014, its download count stands at a scant 347 – but make no mistake, it is one of the most useful plugins I have found in time as a WordPress user.  The plugin relies on some Javascript to enable tall images to re-size dynamically, using 80% of the user’s window height (“…to give it some breathing room” Solomon comments in the code).  This can be changed very simply by replacing a single value in one of the plugin’s JS files, but I like 80% just fine.  I use WordPress 3.8.1, and while this plugin was written over a year ago, it works without issue.

Now I can present wide and tall images in the same set, without worrying the viewer will be forced to scroll to see the entirety of a portrait image.  Thank you Evan – your plugin solved a huge problem for me!