How to Create a Masonry Gallery Style through a Collection List?

Ask us anything How do I?
1

Hello WeWeb Community! :wave:

I’ve been exploring the dynamic design possibilities within WeWeb and am particularly interested in achieving a masonry grid layout for a collection list. I’m aiming for an aesthetic similar to the Masonry Gallery Block, where elements are organized in an optimal space without strict rows, but rather based on their height and width.

collection_list_in_mansory_style
collection_list_in_mansory_style1920×1471 224 KB

mansory gallery
mansory gallery1400×654 92 KB

Does anyone know if there is a way to set up a collection list that emulates the masonry gallery style within WeWeb? Any pointers or guidance on how to achieve this effect would be incredibly appreciated.

Thank you in advance for your insights and assistance!

2

Hi @moscatelli
I was wondering about that the other day!
Here is a demo.

TL;DR: For a single collection list to be displayed in a masonry grid, I’ve use the minimasonry package from the NPM plugin.

3 Likes
3

For anyone interested, adding a more in-depth video on how to use the NPM method with the MiniMasonry external package :slight_smile:

3 Likes
4

Hi,
working very well, thanks.
But if i make the grid dynamic it will always unbind the images.

It’s only working if i add the object array directly. Anything i do wrong or is it just not working. ¯_(ツ)_/¯

image
image749×381 44.4 KB

5

Hey @IKR :wave:
What do you mean when you say it always unbind the image? Can you make a short video of your issue? :slight_smile: I just tested, and it should be working even with a collection bound to the grid

6

I got it running, dont know how but it works. :slight_smile:
But thanks letting me know that its possible

1 Like
7

Hi,
Curious if this is still relevant for today (2024) or there is a “native” way of doing this? Thanks.

8

Hey there,
Humm not to my knowledge unfortunately.

9

No worries, thanks @jptrinh, I will use this method for now.