Gallery page with Multi-Select Fields

Design help CMS
1

Hey, I’ve been working with Webflow for a while but am not quite as experienced in the CMS or custom code department, not sure if this is doable normally in webflow.

I am building a portfolio page, where projects are displayed as cards (through CMS), and each card / project has a main image, and a multi-image section for additional pictures / detail shots, this is all pretty standard.

The part im struggling with is that I had hoped to create a gallery page (as a home section on the website, not a gallery within each project page), that randomly showcases any/all images featured in the “works” CMS collection. Ive been able to make something that randomly shows the main / cover image of each project, but I was hoping to find a solution to display multiple images from each project, like the additional pictures in the multi reference fields.

The best I can currently do displays all of the images from one project together, so the whole gallery comes in chunks of pictures that all relate to one project at a time. I can randomize the order of which project appears first, but it shows all of the pics from that project at once, no mixing.

I hope this hasn’t been answered elsewhere, but all I could find online involved creating multi-image galleries on cms pages, or creating a gallery outside of a cms page using only single image outputs. I have considered Switching the way I input projects into the CMS, and instead of having a multi image upload have multiple single image uploads (ie, slot for detail shot 1, 2, 3 etc), but many of the projects vary drastically in size, some have no pictures where other have 20, and I would really prefer to stay with the multi-image upload if at all possible.

Again, im not as experienced in the custom code department, so would really appreciate if code related responses could be in layman’s terms,

TL;DR; Gallery page that displays multiple images (from a multi-image CMS field), from multiple different projects (items within the collection), and randomly distributes images so that the page has a variety from each project, instead of grouping together.

Thanks in advance to anyone who’s willing to help out, really appreciate it!

2

Hello!
To create a gallery page in Webflow that randomly showcases multiple images from different projects, use the multi-image field in your CMS and add a Collection List to your gallery page. Then, use JavaScript to shuffle and display the images in a mixed order. This approach keeps your multi-image uploads and ensures a dynamic gallery display. Here’s a basic script to help:

JavaScript

document.addEventListener(‘DOMContentLoaded’, function() {
const images = document.querySelectorAll(‘.collection-item img’);
const shuffledImages = Array.from(images).sort(() => 0.5 - Math.random());

const gallery = document.querySelector(‘.gallery-container’);
gallery.innerHTML = ‘’;
shuffledImages.forEach(img => gallery.appendChild(img));
});

This will randomize and display images from different projects together.

Hope this helps!
disney the hub

1 Like
3

Hey thanks so much for your help, this worked great!

Im not super technical, and still struggled a bit to implement this, so wanted to elaborate on some of my learnings for any future viewers

Add Script Tag
Make sure to add the script tag when placing the code into the “before body tag” into the page settings. should look something like this

Screenshot 2024-07-30 at 12.40.22 PM
Screenshot 2024-07-30 at 12.40.22 PM1280×528 63.8 KB

CMS Structure
the structure of your CMS elements should look like this. These are the exact class names I used with the script in the SS above.

  • ├── gallery-cont (this is the outermost cms wrapper)

  •    ├── gallery container (inner wrapper of the first list)

  •       ├── collection-item (Item that selects the project)

  •             ├── collection-list-wrapper (Outer wrapper of second list)

  •                   ├── collection-list-4 (Inner wrapper of second list)

  •                         ├── collection-item-img (item of the inner list) 

  •                         ├── collection-item-img (this houses the actual image)

View in Browser
And finally keep in mind that these changes are only visible client side in the browser, you will need to publish the site and view it there

Im sure some of these points are redundant to anyone who knows what they’re doing, but it took me a while to figure out.

Thanks again for your help!