Make a single photo in a row take the full width of the Photo Album component

[faustonunez]

Hi all! I'm wondering if there is a way through the Photo Album properties to target a photo or multiple photos in different rows to take the full width of a row. The idea is that I can still have the targetRowHeight that programmatically decides how many photos show on a row based on height, but I can make exceptions for certain photos and make them instead take the full width of a given row. Thanks!

[igordanchenko]

Hi there. I'm afraid this is not something supported by this library. All supported properties are covered in the documentation. However, if you know in advance which photo you want to take the whole row, maybe you can split your photos in several batches and stack several photo albums on top of each other?

<PhotoAlbum ... />
<img ... />
<PhotoAlbum ... />

[faustonunez]

Thank you so much for the quick response! I had already taken this approach, but I was hoping there was a more streamlined way of doing it instead of breaking things up into batches, which require more maintenance. Also, I'm using Yet Another React Lightbox, and when I break photos into multiple Albums, it seems like I need a Lightbox component for each album instead of just one, which also makes all the albums in the Lightbox not connected.

[igordanchenko]

Also, I'm using Yet Another React Lightbox, and when I break photos into multiple Albums, it seems like I need a Lightbox component for each album instead of just one, which also makes all the albums in the Lightbox not connected.

I'm pretty sure you can use a single instance of the lightbox in this case.

[faustonunez]

If you have an example of how to have two Photo Albums link to one Lightbox, I would greatly appreciate it. For more context, I'm using a similar structure as this example . I have a photos.ts with all my images and then a component that renders the PhotoAlbum and Lightbox.

[igordanchenko]

Sure, here is one way to implement it - https://stackblitz.com/edit/react-photo-album-162?file=src%2FApp.tsx

[faustonunez]

This works perfectly! photos={photos.slice(0, 6)} is doing the trick. I greatly appreciated!