As a photographer and Web designer I constantly get asked to create photo grids of products, events, travel pictures,etc. And for the most part this is not a problem because each picture or thumbnail fits a common, agreed upon dimension – 320 x 240 pixels or whatever the client needs. For example:
This list of artists, all thumbnails are the same size 300×199 pixel so Isotope Filter Grid can be used
Isotope brig the advantage that the grid of images can be filtered so just Painter or just Fabric artists can be shown. But even Isotope has a problem when one of the two dimensions [width or height] varies in length among the images. Isotope will handle this situation but the display time is slower and the grid prone to an uneven layout. Even more vexing is when the dimensions are not the same and cropping to size is not allowed [yes, think product grid photos]. The big problem now is that more often clients are providing images with only one dimension fixed or none at all while providing unreal cropping/resizing limits and delivery time constraints. Lots of hair pulling and gastric indigestion ensue.
Rolaids … Fleximage For Relief
While looking for a WordPress plugin for an animated, responsive slider, I stumbled on Pixaby’s Fleximage:
Fleximage is a jQuery-based routie that fits images of varying dimensions into a grid stated maximum row heigh. Fleximage adapts the row height to guarantee that all images in a row will a) fit into a standard length and b)each image in the row will never be truncated but will be shown to its full aspect ratio but at overall cotainer row height or less in size. It is the classic optimum container packing algorithm from Operations Research. And as you can see from the screen shot above, Fleximage is versatile in displaying a grid of images eve when the images vary in actual size.
Can Fleximage handle video images while delivering responsive fluid sizing?
Yes indeed Fleximage can, resizing the videos as the row is shrunk in a mobile app. In this coding, Fleximage is set to truncate any video that stands alone in a row using the option truncate: 1 .
Can Fleximage deliver captions and links within those captions?
Again, Fleximage easily handles captioning including wrapping to a second [or more] lineas required. Note the blue 222 in the second caption is a link to another page. Like Isotope, users can position the caption anywhere above, below ad on top of the containing. This captioning and linkage is vital for product and portfolio grids of images.
Finally, does Fleximage support lazy-loading for faster loading and display of large product grids?