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.
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?
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.
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 C was similar to B but with different names in the single image fields because C projects had a different look in their grid.
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.
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
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.