How to show images with different sizes in a collection list (and have different sizes)

Hi all,

I’d like to create a gallery of images of different sizes, just like this one here.
Right now every image starts at a new row like this.

How do I set that up?


Here is my public share link: here

1 Like

Hi Jakub!

Just a couple of tweaks to make this work how you want.

Select this element and set the display mode to inline-block:
image
image

Scroll down a bit in the settings, and set the Columns to 2.
image

After that, select this element and set the width to 100%:
image

You should now be seeing your elements without the gaps in between, in two columns. After making these changes, there does seem to be a bit of odd behavior now with the interactions and positioning, but this should get you a big boost in nailing your design the way you want it.

1 Like

Thank you so much!!!

It almost works.

Now the bottom left element “finishes” in the top right like this

Any ideas how to “block” it at the bottom?

Again, thank you SOOO much!

Yes, sorry about that!

Select this element again:
image

and set the display to inline-block as well.

I took another look at the interaction as well. You’ll probably notice that because of the varying height between the explanation and the image, depending on the user’s mouse position there can be some intense flickering due to the mouse position suddenly being above the element under the one being interacted with. I wonder if instead of using Hide/Show in your interactions, you could use Opacity to solve this. Just a thought.

1 Like

You are the best Chris, thank you!

It works great.

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.