Help with single column Gallery

I would like to ask for help with the realization of the gallery in 1 row

I need a gallery that would automatically place photos, The vertical ones are bigger margin, and the horizontal ones are smaller
Also, so that the gallery itself would understand where the vertical photos and where the horizontal ones are, so that I would not have to do it manually every time with the help of paddings on the page itself for different projects

Is it possible to realize this somehow?

I will attach some screenshots with examples

Here is my public share link: LINK
(how to access public share link)

Hi Kirill👋 The idea is create a combo class for vertical image (in my example it named as: .is-vertical). Set for vertical images CSS settings as you need and just add on page some short script.

Here is an example of layout + script with comments (placed on page Before BODY):
Live page: Help with single column Gallery
Read-only project:

@bro-design this is exactly what i need! how would i do this on my site?

You may Clone the project > Open it > Copy Section from cloned project “Cmd+C” > Paste section in your project (open your project in other browser tab).

After that don’t forget copy/paste this script:

@bro-design I don’t know why, but when I clone your site, the right section is missing

So strange😬 Try to delete and clone again

@bro-design it worked! if the project page where I inserted the section we gave me, is the CMS page
I can also insert a script as you do?

Great🎉 Yes, but in this case need to remove a combo class from image. In ideal, at the first paste section into your “Style Guide” page. Then paste code into your CMS page and make sure that combo class is-vertical is removed from images on your CMS page.

All this needs to do for “save” a combo class and avoid a situation when you try to clean all your unused styles — Webflow is remove it and solution is stopped to work.

So yes, then just place script code into your CMS page)

Oh no, that sounds very complicated
I’m very bad at website development :sweat_smile:

Just ignore this part and do all the other steps))

@bro-design Does that mean I just need to insert the section with the photos and paste the script you made?
I really sorry for my questions, I just don’t understand how it works, and I don’t want to break anything :sweat_smile: :sweat_smile:

And one more question, and whether this script will not affect all the gallery in this CMS project?

So the fast way is you provide me your Webflow account credential in DM and I’ll do it