Most of the time I hold a camera normally, but sometimes a vertical shot is the most appropriate. \u00a0Occasionally I will perform a vertical crop of a horizontal image (but not often – this knocks out a lot of image data).<\/span><\/p>\n

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”)\u00a0images into groups of horizontally-oriented (“wide) images. \u00a0Only around five percent of my photos are tall, but they are no less important.<\/p>\n

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. \u00a0Usually 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). \u00a0So, 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. \u00a0Not a good thing!<\/p>\n

Until now, the only way to deal with this has been to set absolute pixel values for the image dimensions. \u00a0This 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. \u00a0If displaying pictures of various ratios in sets in a pleasing fashion is important to you, this is obviously not acceptable.<\/p>\n

It is with great pleasure, then, that I discovered the WordPress plugin\u00a0Vertically Responsive Images<\/a>, written by Evan Solomon<\/a>. \u00a0As 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. \u00a0The 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). \u00a0This can be changed very simply by replacing a single value in one of the plugin’s JS files, but I like 80% just fine. \u00a0I use WordPress 3.8.1, and while this plugin was written over a year ago, it works without issue.<\/p>\n

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. \u00a0Thank you Evan – your plugin solved a huge<\/em> problem for me!<\/p>\n","protected":false},"excerpt":{"rendered":"

Most of the time I hold a camera normally, but sometimes a vertical shot is the most appropriate. \u00a0Occasionally 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, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[72],"tags":[],"_links":{"self":[{"href":"http:\/\/richemyers.nfshost.com\/wp-json\/wp\/v2\/posts\/614"}],"collection":[{"href":"http:\/\/richemyers.nfshost.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/richemyers.nfshost.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/richemyers.nfshost.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/richemyers.nfshost.com\/wp-json\/wp\/v2\/comments?post=614"}],"version-history":[{"count":5,"href":"http:\/\/richemyers.nfshost.com\/wp-json\/wp\/v2\/posts\/614\/revisions"}],"predecessor-version":[{"id":894,"href":"http:\/\/richemyers.nfshost.com\/wp-json\/wp\/v2\/posts\/614\/revisions\/894"}],"wp:attachment":[{"href":"http:\/\/richemyers.nfshost.com\/wp-json\/wp\/v2\/media?parent=614"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/richemyers.nfshost.com\/wp-json\/wp\/v2\/categories?post=614"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/richemyers.nfshost.com\/wp-json\/wp\/v2\/tags?post=614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}