HELP! CMS Multi-Image Gallery, Filtering, Hero BG Video ?s

Hello Community,
I am a newbie and would so appreciate the assistance.

3 Issues to trouble-shoot:

  1. CMS Gallery
    There’s 90 image galleries (each its on collection item), each collection with varying numbers of photos, max of 8.
    I’ve tried 2 ways of displaying the collection… both need troubleshooting.

The collection I’m testing with is Prince - Sign of the Times as this is the only gallery in the CMS that has both 1-8 Images & Multi-Image fields set. In this collection, there’s 5 photos.

first gallery is composed with 8 image blocks (but the number of photos vary, ex: it’s still showing image 6,7,8 when those are not set). I’ve tried conditional visibility to (when image 6, 7, 8 is set) but it still shows up and the auto populating slide nav dots defaults to 8 as well. Do i need a custom code to solve this? I want the gallery to display the number of photos that are set in the collection only and for the slide nav dots to match as well.
2nd gallery is with a multi-image gallery. I was able to connect the collection to multi-image but somehow only 1 of 5 multi-image is auto-populating. Not sure what I’m doing wrong?

  1. Gallery order and filtering. The 90+ Collection Gallery with 90 collections is currently with the sort order set to year, reverse alphabetical). I’d like to add filtering capabilities so it can be sorted by artist, year, event. Would I have to disable or deactivate the current sort order to be able to filter by artist, year or event? If in each collection item, I set the “Next” gallery to display, does that override the sort order, and or the filtering capabilities? Would you suggest the Relume, jetboost or finsweet for this filtering feature? Trying to figure out the hierarchy of settings and what would deactivate what.

  1. The hero section has a background video that’s currently in the webflow assets folder. it is 3.38MB but somehow there’s a lag in the uploading and doesn’t display immediately when the home page loads. Would you suggest hosting the video on Vimeo and what size would you suggest for optimized load without sacrificing quality.

I’ve researched on my own as much as I could but still couldn’t figure these issues out. Your help would be immensely appreciated!!


Here is my public share link:

Hi Sophie,

Lots of detail in your message but I’m not actually sure what your goal is or what problems you’re encountering. If it’s complex a video or diagrams of what you’re trying to achieve is helpful.

I did pick up a few things that might help though that might be useful.

On your second gallery, problem #1, you’ve put 3 images inside of a single item, and you also have them set to position absolute. As a result all of your CMS gallery images are loading but they’re stacked on top of each other.

Webflow’s slider does not have CMS capabilities. Some people like Finsweet’s CMS slider lib, others prefer to use a 3rd party JS lib called swiper.js for their sliders.

#2 Webflow doesn’t have dynamic filtering capabilities, but Finsweet has a great CMS filter lib. Whatever sorting or filtering you have applied to your collection list on the page will just be the starting point. FS filter works on top of that data.

#3 Search the forum here for recommendations on Vimeo hosting. Some prefer that, a few like Dropbox, and there are other excellent service-based solutions as well.

Hi Michael,
Thank you so much for your reply! I was able to add the filter and fine tuning that.
The gallery display is fixed with conditional visibility as well, except the last “empty slide” is still showing up despite the same setting as the other empty ones. I’ve tried deleting and resetting the conditional visibility but it’s still not working. :confused:

It looks like Webflow’s slider scripts aren’t smart enough to ignore the conditionally hidden slides so when you actually run the page you see all of the blank slides as well.

I think that’s why FS build the CMS slider lib, so that you’re not playing games with the slider element scripts.

I’d recommend using that, or, switch to a swiperjs implementation. Personally I much prefer that approach, it’s a bit of custom code but far more versatility.