CMS Gallery Custom Layout Grid - Multi image field

Design help General
1

Hello!

I am new to webflow and am currently designing a site for which the gallery is very important!

I have specific design/layout in mind for the gallery images, but I can’t seem to figure out how to do it. Have searched other forums and tutorials but am not finding what I need!

I basically want to create a custom layout for images that can be bound to a collection item (multi image field). Image below shows example of the layout I’d like to achieve.

layout
layout1026×887 29.1 KB

Ideally, I’d love for the images in the collection to automatically arrange themselves either according to aspect ratio, or if not possible, then just to crop into the predetermined sizes.

I’ve tried the masonry layout (pinterest layout) using columns but I’d like the widths to vary, plus the bottom of this version is never aligned!

I can’t really share the link as its in the companies account at the moment, if anyone could point me in the right direction it’d be greatly apreciated. There is a link to a page that achieves this, but not sure if it was created on webflow. see below.

https://www.partyslate.com/organizations/partyslate/events/16024

P.S. I have absolutely no coding skills lol so the simpler the solution the better

thank you!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

I was looking for the same thing but couldn’t do it, you’ll have to do some custom JS and CSS. I ended up using (CSS) Grid within webflow, with static images, no CMS. Would love to see this natively supported by Webflow.

3

Yeah, ended up using custom code. Found this youtube video and just edited the code, in a very inefficient way im sure lol.

Code he used: .collection-item-2:nth-child(3n+1) {flex: 0 100%;}

I edited, by guessing basically, and created the below.

.collection-item-4:nth-child(1n) {flex: 0 50%;}
.collection-item-4:nth-child(2n) {flex: 0 50%;}
.collection-item-4:nth-child(3n) {flex: 0 50%;}
.collection-item-4:nth-child(4n) {flex: 0 25%;}
.collection-item-4:nth-child(5n) {flex: 0 25%;}
.collection-item-4:nth-child(6n) {flex: 0 70%;}
.collection-item-4:nth-child(7n) {flex: 0 30%;}

Had to rewrite the next set so that it would repeat this pattern. There’s gotta be a better way to write this!

4

Hi,

I watched the same video for different set of layout. Can you help me if there is an alternative without custom code to solve this issue.

I am Completely new to webflow.