Images are too big when there aren't enough to fill the row

[rigon]

Describe the bug

The images become too big when there aren't enough of them to fill the row.

Expected behavior

Having an option to configure what to do when that occurs. I see three different configurations, I think you should decide which should go forward:

• Allow to behave as before
• Force rows height to never exceed targetRowHeight
• Having another option where rows don't exceed the specified height, like maxRowHeight

How to reproduce

Create a gallery with let's say one image, but the container for react-photo-album taking all the width available.

Screenshots / Logs

Current behavior:

Expected:

Additional context

No response

[dawi]

It seems to be out of scope of this library.

However there is a workaround. Maybe it helps:

#67 (reply in thread)

[igordanchenko]

@dawi thank you for linking that discussion!

@rigon the above workaround is probably the easiest and the most elegant solution for this edge case. Unfortunately, implementing this as a feature in the library isn't as straightforward because targetRowHeight can be a function of the containerWidth, which creates chicken-and-egg problem.

I'll go ahead and close this ticket. However, if someone is willing to propose a solution, I'd be happy to review a PR.

[igordanchenko]

I couldn't get this edge case out of my head, so I ended up implementing this feature. It did require some refactoring, but I'm happy with the result.

Here is how you can define maximum row height when there isn't enough photos to fill more than one row:

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

Usage notes:

1. singleRowMaxHeight must be greater than the targetRowHeight
2. while it's possible to define both targetRowHeight and singleRowMaxHeight as responsive parameters (functions of the containerWidth), I'd recommend exercising caution in this scenario

[github-actions]

🎉 This issue has been resolved in version 2.3.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[rigon]

@igordanchenko I really appreciate that you took the time to address this issue. I already integrated it in the project I'm working on and does work like a charm. Thank you! 👏 👏