Streaming live at 10am (PST)

CMS Multi-Image Grid Layout Question

Hey everyone, just wondering if something like this is possible. In grid, you can stretch a single column and row across multiple in order to extend the grid item. Is this possible on a CMS page using the multiple image block?

Something like this where there is one longer image in the middle of the grid.

Or like this with a portrait photo stretched over 2 rows.


Share Link

have a look at this - I think this what you wanted…

Yes I am aware you can make a collection list a grid, which is what I’ve already done, so that doesn’t answer my question. If you look at the images you can see what I am trying to accomplish.

1 Like

if i understand correctly you want to have some images span several columns - you can do that in a grid by going into grid edit mode and click+drag the image corner to cover two cells in the grid…

see

Again, I understand that you can do this on a normal page with a regular grid. I am specifically asking about CMS pages only. Has anyone found a work around with dragging the corners of grid elements using the multi-image function on a CMS item?

3 Likes

It looks like it is not a feature that is available in webflow currently…

Yeah I figured it wasn’t. Soon hopefully but in the meantime I figured out a little work around. Thanks!

1 Like

Hey Ryan, I’m trying to accomplish this same thing - Mind if I ask how to made it work? You can email me at tyler@madebyafterhours.com as well. Happy to pay you a consulting fee if needed as well.

Just shot you an email!

Hi, trying something similar. Did you manage to get it working?

So I wanted three separate grid layouts for my collections on my website. In order to do this I had to make 3 collections which I named Projects A, B, and C.

What I did was in each collection I made an image field labeled with the kind of photo I needed in that position.

In project A I created 2 multi image fields. The top field was to be filled with 4 - 2:1 ratio portrait photos that would sit on top of the lower grid. The bottom field held the rest of the photos used in that collection. I used 16:9 ratio and 4:5 ratio for the photos in each of my collections but if one image was 16:9 every image in that field had to be 16:9 in order to keep a clean and consistent look.

roject_a_photo.png

In Project B I used 3 single image fields and 1 multi image. 1 single was called “Portrait left”, another “Landscape Middle Image”, and the last “Portrait Right”. Then, the multi image field was used for the rest of that projects photos.

project_b_photo.png

Project C was similar to B but with different names in the single image fields because C projects had a different look in their grid.

project_c_photo.png

Lastly, for each collection page, I made 2 grids. The top one was just div blocks with background images set to “cover” that I placed and shaped on the grid and the bottom grid was the multi image field that auto-populates those images.

grid_top_photo.jpg

grid_bottom_photo.jpg

Getting the top grid to work without bugging out on different screen sizes took a little bit of trial and error but if you do everything cleanly the first time, unlike me, you should be fine haha.

Here is the website for this:

Feel free to poke around the different projects to see the grid working in full effect!

I hope my instructions were clear enough but don’t hesitate to ask any questions!

Wow this seems complex. So currently its seems you can use the multi-image field (to save on fields + add alt text all within one field item…) but you can only set the grid to be of a linear patterned grid. I wanted a masonry style grid. ie. 2 images x 1 image x 2 images etc…any chance of sharing your read only webflow link so we can have a look how you did this…or any developmens on doing this would be much appreciated. Cheers

Hey there!

Sorry for the late reply - here is the read only link: https://preview.webflow.com/preview/material-contours?utm_medium=preview_link&utm_source=dashboard&utm_content=material-contours&preview=fe8ea95aea8db8ba27c99ca4f121b398&mode=preview

If you go into the CMS and look at “Projects B” and “Projects C” you can see how I broke up the grid and how each image was labeled. Then, if you go the that projects CMS page you can see how the grid layout works.

Let me know if you have any questions!

Hi there!
I have made a masonry layout in the past for a client, it is simple to do by using text columns.
If you click on ‘collection list’ which is in ‘collection list wrapper’ then scroll down to the typography properties you can see that I used 3 columns in the ‘more type options’.
I hope this helps :slight_smile:
link: https://preview.webflow.com/preview/ms-cars-executive-travel?utm_medium=preview_link&utm_source=designer&utm_content=ms-cars-executive-travel&preview=52845ec3b56ea752b6252b424f1181da&pageId=5d1e562dbb9c4fc191b3d8ce&mode=preview

1 Like