Single image fills container

[playaz87]

I'm using the masonry layout for showing thumbnails. It works great if there are 3 or more images, but in some instances we only have one image. As it's a thumbnail (maximum height or width of 200px), its resolution is very low but it fills the container and of course looks blocky.

I tried setting targetRowHeight to 200, but it didn't help.

This library seems very fully featured so I'm sure I'm missing something...?

[igordanchenko]

Update (Dec 2022): the below answer is relevant to v1 of the library. v2 implements the desired behavior by default.

---

Hi there!

Thank you for the great question! You haven't missed any setting here, as this is the intended library behavior. The library intentionally opts to render fewer columns when there aren't enough photos to fill all the columns. There are multiple approaches to tackle this issue, and I'm leaving this decision to the library users.

Here are some approaches you can consider (all of them provide slightly different UX and have their tradeoffs):

1. Limit parent container width. The gallery utilizes 100% of its parent's horizontal space, so you can wrap it in a div and limit its width when there aren't enough photos.

2. Fill the remaining empty columns with 1x1 transparent gifs.

3. Render a custom gallery container and dynamically limit its width via CSS depending on container width and the number of photos and columns

Here is a draft you can use as an inspiration - https://codesandbox.io/s/18d0st

I hope this helps!

[JaosnHsieh]

Awesome reply !! really helpful !

I did something similar

{photos.length === 1 && (
        <style>
          {`
            @media only screen and (min-width: 768px) {
              .react-photo-album--row {
                max-width: 768px;
              }
            }
          `}
        </style>
      )}

[dro-sh]

@igordanchenko

Hi,

I have a same question, but I use row layout. And for one picture its height is much more than targetRowHeight. So I should use media query?

P.S. I use v2

[igordanchenko]

@dro-sh

Here is one possible option to achieve similar behavior in "rows" layout - https://codesandbox.io/s/react-photo-album-67-1-lmf9d2?file=/src/App.tsx

[dro-sh]

Thanks!

[igordanchenko]

Here is new solution for v2.3.0+ using rowConstraints.singleRowMaxHeight prop:

<PhotoAlbum
    layout="rows"
    photos={photos}
    targetRowHeight={150}
    rowConstraints={{ singleRowMaxHeight: 200 }}
/>