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

[Jakub_Czakon]

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

[ColemanChrisB (Chris @ Xano)]

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:

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

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

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.

[Jakub_Czakon]

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!

[ColemanChrisB (Chris @ Xano)]

Yes, sorry about that!

Select this element again:

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.

[Jakub_Czakon]

You are the best Chris, thank you!

It works great.