Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accept a prop that allows forcing the number of columns #72

Closed
DundieWinner opened this issue Jul 3, 2022 · 7 comments
Closed

Accept a prop that allows forcing the number of columns #72

DundieWinner opened this issue Jul 3, 2022 · 7 comments
Assignees
Labels
enhancement New feature or request released Implemented and released

Comments

@DundieWinner
Copy link

Is your feature request related to a problem? Please describe.

Say I want a 4 column masonry layout. Right now if I have 2 images, that layout will expand the width of the images to 50% rather than 25% due to https://github.com/igordanchenko/react-photo-album/blob/main/src/layouts/masonry.ts#L16

I would like to be able to force the 4 column layout even though I don't have at least 4 images. This would be nice to have in the scenario, for example, where I have a feed of items each with a photo album and variable # of images where I'd like all of the photo album layouts to look uniform.

Describe the solution you'd like

An additional prop that ignores the default Math.min behavior of column # calculation

Describe alternatives you've considered

An alternate solution I've considered is changing the width of the wrapping div that wraps the photo album component. For example, in my example using a wrapping width of 50% would achieve what I'd like, but this gets unnecessarily complicated because of the responsive number of columns my photo album uses at different screen sizes. So I have to observe the width of my wrapping component and dynamically update the wrapper's width when this would be simpler if it were built into the library.

Additional context

No response

@DundieWinner DundieWinner added the enhancement New feature or request label Jul 3, 2022
@igordanchenko
Copy link
Owner

Hi @JaredMichel,

Thank you for reporting this issue and describing the use case. I'll work on it next week, but in the meantime, here is a simple workaround you can use to achieve the desired layout:

<PhotoAlbum
    photos={
        photos.length > 0 && photos.length < 4
            ? [
                  ...photos,
                  ...Array(4 - photos.length).fill({
                      src: "data:image/gif;base64,R0lGODdhAQABAJEAAAAAAP///wAAAAAAACH5BAkAAAIALAAAAAABAAEAAAICVAEAOw==",
                      width: photos[0].width,
                      height: photos[0].height,
                  }),
              ]
            : photos
    }
    layout="masonry"
    columns={4}
/>

@github-actions
Copy link

github-actions bot commented Jul 7, 2022

🎉 This issue has been resolved in version 1.15.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@github-actions github-actions bot added the released Implemented and released label Jul 7, 2022
@igordanchenko
Copy link
Owner

You can now use columnConstraints.minColumns prop to achieve the desired behavior.

<PhotoAlbum 
  photos={photos} 
  layout="masonry" 
  columns={4} 
  columnConstraints={{ minColumns: 4 }} 
/>

@korneSt
Copy link

korneSt commented Sep 8, 2022

Hi @igordanchenko, is it possible to work the same way but for rows layout?

@igordanchenko
Copy link
Owner

@korneSt, can you describe the layout you are trying to achieve? I'm not sure how a similar feature would work in the rows layout since PhotoAlbum has a fixed width that is determined by its parent container.

@igordanchenko

This comment was marked as outdated.

@korneSt
Copy link

korneSt commented Sep 9, 2022

@igordanchenko Thanks for the replay. I was actually talking about the same behavior as in #67. So when there are less items in the row they don't grow. As I understood it can be done in user land.

Thanks for the great library.

@igordanchenko igordanchenko changed the title Accept a prop that allows forcing the number of containers Accept a prop that allows forcing the number of columns Oct 28, 2022
@github-actions github-actions bot locked and limited conversation to collaborators Sep 12, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
enhancement New feature or request released Implemented and released
Projects
None yet
Development

No branches or pull requests

3 participants