0

I am making an image grid which shows about 200 images and they are user submitted, so I do not know the dimensions of the images. Some are portrait. Others are landscape. Most are landscape.

I have seen similar questions, but my requirements are different, so I cannot use their answers.

  • The order of the images must be clear to the user (so we cannot masonry grid)
  • We can inspect the photos and decide how to show them based on their size
  • We can cut some off the photos if needed, but we cannot show a portrait photo in landscape mode and vice versa.

These rules seems to inevitably end up with the following view:

enter image description here

However, I don't like it because of the grey boxes or worse yet, without the grey, it looks pretty chaotic. What is an alternative to this view, considering the same rules?

UPDATE: StackExchange user "locationunknown" suggested I look at Flickr. Because I cannot add an image to a comment, here is a screenshot from Flickr to illustrate what he means.

enter image description here

Improve this question
5
  • 2
    Does photos have to be of same size? For example Flickr uses a sort of masonry grid which retains the order of the photos but some the photos are smaller or larger than others. Though their ratio is always retained.
    – locationunknown
    Feb 1, 2021 at 11:17
  • I just checked it out. That's very clever! They manage to get each row to be the same width. How do they do that, I wonder? I suspect it's because they do not respect the order but instead find the images that fit together. What do you think?
    – Niels Brinch
    Feb 1, 2021 at 11:23
  • 1
    They are in order, at least in my albums, which are ordered by date and time taken. But ordering makes some images super large if there are not enough photos like in flickr.com/photos/locationunknown/albums/72157634309622650
    – locationunknown
    Feb 1, 2021 at 11:36
  • 1
    @NielsBrinch I suppose you just set them to equal height but retain height-width ratio and then set content to "fill". And have the row have a fixed width, so the system can check how many fit into one.
    – Big_Chair
    Feb 1, 2021 at 11:40
  • Both on the front page of Flickr and especially on the album that "locationunknown" links to in the previous comment, it is clear that their height differs. However, it would be great if the height could be the same and give a sense of order. By "fill" do you mean "contain"? But contain is for a single image, so this would be for a row of images.
    – Niels Brinch
    Feb 1, 2021 at 12:30

1 Answer 1

Reset to default
1

If photos don't need to be of a same size, you could do what Flickr does. They use a sort of a masonry grid that retains the order of photos but manipulate image size while still retaining the image ratio. This works most of the time but if there aren't enough of photos, some photos can be super large. This is how one of my own albums with not enough photos look like.

enter image description here

Improve this answer
1
  • I will be using this, but with a few changes. I will set the height to the same and then I will adjust the width slightly for each image so they altogether match the same width for each row. It will require javascript to recalculate every row when changing the size of the browser but I am happy enough with that. Thank you for the inspiration.
    – Niels Brinch
    Feb 1, 2021 at 12:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.