4 ms·

The biggest problem is that it's good if your images are all landscape or all portrait, but not when mixed.

by Sharlin 11mo ago

SahAssar 11mo ago
The whole point of a masonry layout is if you have different aspect ratios. Otherwise a masonry layout is just a normal grid.
- Sharlin 11mo ago
  Masonry layout fixes one of the dimensions. That means either portrait or landscape images will look visibly smaller than those of the inverse aspect ratio, because their longer side must be the same length as the latter’s shorter side. Masonry works well if you have different aspect ratios of the same orientation.
  - powersnail 11mo ago
    Just curious, what algorithm is good for laying out images of arbitrary orientations, sizes, and aspect ratios? That seems like a pretty difficult problem. Some sort of variation of knapsack problem maybe?
    - emilbratt 11mo ago
      I dont know what would be the best way, but I personally want each image to be represented correctly in relation to all other image. This means that the way images are laid out will looked jagged. However, as a consequence of that, it is easy to find back to a specific image. Its like when you are coding, you look at the "shape" of the code when scrolling to find that specific function definition etc.. Here is an example of the layout of a photostream that I was satisfied with. https://frifoto.emilbratt.no/?view_mode=photo-stream&tag=Allvi https://frifoto.emilbratt.no/?view_mode=photo-stream&tag=All...
    - bfgeek 11mo ago
      You can exploit flexbox for this type of layout: https://bfgeek.com/flexbox-image-gallery/ https://bfgeek.com/flexbox-image-gallery/
ethmarks 11mo ago
What? The defining feature of masonry is that it supports mixed aspect ratios. That's its whole thing. If you aren't mixing landscape and portrait images, you shouldn't be using masonry layout.
- Sharlin 11mo ago
  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 11mo ago
    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.
    - hannasm 11mo ago
      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 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.

The biggest problem is that it's good if your images are all landscape or all portrait, but not when mixed.

by Sharlin 11mo ago

The biggest problem is that it's good if your images are all landscape or all portrait, but not when mixed.

The whole point of a masonry layout is if you have different aspect ratios. Otherwise a masonry layout is just a normal grid.

Sharlin 11mo ago
Masonry layout fixes one of the dimensions. That means either portrait or landscape images will look visibly smaller than those of the inverse aspect ratio, because their longer side must be the same length as the latter’s shorter side. Masonry works well if you have different aspect ratios of the same orientation.
- powersnail 11mo ago
  Just curious, what algorithm is good for laying out images of arbitrary orientations, sizes, and aspect ratios? That seems like a pretty difficult problem. Some sort of variation of knapsack problem maybe?
  - emilbratt 11mo ago
    I dont know what would be the best way, but I personally want each image to be represented correctly in relation to all other image. This means that the way images are laid out will looked jagged. However, as a consequence of that, it is easy to find back to a specific image. Its like when you are coding, you look at the "shape" of the code when scrolling to find that specific function definition etc.. Here is an example of the layout of a photostream that I was satisfied with. https://frifoto.emilbratt.no/?view_mode=photo-stream&tag=Allvi https://frifoto.emilbratt.no/?view_mode=photo-stream&tag=All...
  - bfgeek 11mo ago
    You can exploit flexbox for this type of layout: https://bfgeek.com/flexbox-image-gallery/ https://bfgeek.com/flexbox-image-gallery/

ethmarks 11mo ago

What? The defining feature of masonry is that it supports mixed aspect ratios. That's its whole thing. If you aren't mixing landscape and portrait images, you shouldn't be using masonry layout.

Sharlin 11mo ago
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 11mo ago
  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.
  - hannasm 11mo ago
    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 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.