[Sharlin]

Masonry layout fixes one of the dimensions. That means either portrait or landscape images will look visibly smaller (less detailed, more ignorable, etc) than those of the inverse aspect ratio, because their longer side must be the same length as the latter’s shorter side. This has real UX consequences. What masonry works best with is images of different aspect ratios but the same orientation.

[ethmarks]

Pointing out that masonry isn't as good with mixed-orientation content as it is with uniform-orientation content is all well and good, but we still need a way to display mixed orientation content. What alternatives to masonry do you propose?

- If you stretch all images into a uniform aspect ratio, they get all squashed and look terrible.

- If you crop all images into a uniform aspect ratio, you lose potentially the majority of the content in some images.

- If you display all images at their natural aspect ratio and their full size, there will be huge swathes of empty space in between them because they don't pack tightly.

Masonry layouts allow you to preserve aspect ratio without wasting a massive portion of your user's screen space. It's not perfect, but it's the best layout mixed-orientation content that I know of.

If you know of a better method to handle mixed orientations, I'd love to hear it and would gladly rescind by remarks.

[anonymous908213]

Danbooru[1] and Danbooru-derived image boards handle this perfectly, and are a genuine pleasure to browse relative to the awful experience that is pinterest. There is empty space between images, and that is fine. You don't need to occupy every pixel in the screen to begin with, that's why we have these magical things called "margins", elements need room to breathe in the first place.

[1]https://safebooru.donmai.us/ (note: this is a "safe" subset of danbooru for reference, but it is still not safe for work)

[satvikpendem]

How is that better? It's still a grid of images that seem to be constrained to a more or less rectangular grid. I'm thinking more of a dynamic grid where there is a mix of sizes of horizontal and vertical images.

[anonymous908213]

The point being raised is that dynamic image grids don't actually make for a good UX. They might look more visually interesting at a superficial glance, but when you're actually using the interface to browse images, predictability wins out. Even having mixed-orientation images, where there is some degree of extra whitespace between images, does not change this. It is way easier to digest the content when your eyes can reliably scan one line at a time without having to bounce around everywhere to track the flow of the dynamic grid.

[satvikpendem]

What is it with commenters in this thread and wanting to "reliably scan one line at a time?" When users use image galleries, they generally do jump around because they're looking at all the options on screen all at once. The eyes absorb everything and then they pinpoint what looks good. I've never seen or heard anyone go line by line in an image gallery or a newspaper layout and doing so I'd find to be highly abnormal to average users.

[anonymous908213]

I suspect if data from eye-tracking tests were available, there would be an extremely clear revealed preference from users. I read image galleries the exact same way I skim text, in an ordered fashion that allows me to "read" every image without reading an image twice, stopping if my attention is caught by something in particular. Splotting garbage over the screen haphazardly makes it blend together annoyingly and results in my eyes traversing the same areas multiple times both to try to pick out details and to try to keep my place in what I have/haven't skimmed yet. It is a layout that itself demands my attention, rather than letting my attention be absorbed naturally by the actual images.

[hannasm]

Well I think this is a great step forward but it would be great if we could mix aspect ratios even better...

Consider a similar layout to OP but the landscape images will span multiple columns as well as everything it already does.

The thing about masonry is that it adapts to the size of the images. You could already do masonry using flexbox if you know the image sizes (https://github.com/hannasm/masonflexjs). Doing it as a true mosaic layout would be a step above current capabilities. At that point it's probably pretty easy to create configurations that don't fit perfectly/ require lots of empty space to layout nicely though.

[ethmarks]

Kind of random but why, in the linked repo, are you using dotnet core for minifying a Javascript file? I'm just curious. It seems like overkill to me.

[jrgd]

With Masonry and using the bin packing algorithm/layout, according to your visual requirements, you can (should?) use a system for sizes for the sizing element and get different widths for the underlying columns of the ‘grid’; ie: if the sizing element is a quarter of base width, you scale down some of the widest image to bring more homogeneity-or on the contrary balance it with some enlarged elements that brings some rythm.

Edit: doc has this first example https://masonry.desandro.com/layout that you could use but have to imagine images to be twice the size, similar to a Müller Brockmann grid