Help with single column Gallery

Design help Animations & Interactions
1

Hi!
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

screencapture-jackharding-architecture-for-london-2023-06-16-17_35_09
screencapture-jackharding-architecture-for-london-2023-06-16-17_35_091920×14400 1.2 MB

screencapture-jackharding-helium-x-crypto-2023-06-16-17_42_09
screencapture-jackharding-helium-x-crypto-2023-06-16-17_42_091920×14400 760 KB

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

2

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: https://preview.webflow.com/preview/broplayground?utm_medium=preview_link&utm_source=designer&utm_content=broplayground&preview=199fd3556254ef8e33b2beec09ee2264&pageId=648db19e9cfb5ed136fdd694&workflow=preview

3

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

4

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:

image
image1880×1270 423 KB

5

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

Screenshot_12
Screenshot_12739×832 25.6 KB

6

So strange😬 Try to delete and clone again

7

@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?

Screenshot_13
Screenshot_131413×1943 198 KB

8

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)

9

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

10

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

11

@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?

12

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