Managing Large Image Libraries on Each CMS Page

Design help CMS
1

Hello!

I am currently working on a project that requires a lot of images on each dynamic page. The pages are products that can have up to 65+ color options. Think blank t-shirts with lots of different colors. There will be 100 or more product pages that are populated from their own collection.

The problem I am running into is figuring out the best method for including the different product images on each page. I’ve considered/tried the following:

  1. One Collection that Includes all product information as well as 3 Multi-Image Fields. This solution allows for up to 75 images, but does not allow me to add additional information to those images such as “Color Name”. It’s also not very elegant.

  2. Two Collections: 1 for product information, and 1 for images. The product collection includes a multi-reference field that references the images from the image collection. The drawback here is that I have to manually select which images are tied to each product which will make it a nightmare when it comes to adding more products.

  3. Two Collections with Finsweet Filter: 1 Collection for Products, 1 Collection for Images. I’m able to reference the “product code” from the products to pull up images that have a matching “product code”. So far I like this solution, but the issue is that the collection list loads fully before filtering the correct images. This is the option that is currently active on my site.

  4. Create a new Collection of images for each product. This wouldn’t be too bad of a solution, but the limitation on the number of collections allowed means this won’t work.

I feel like I’m missing something and I’m hoping someone can point me in the right direction. The site is really just a sandbox right now while I work out these details, so don’t judge it on the looks :slight_smile:

This is the live site: https://test-project-aba230.webflow.io/product-pages/canvas-3001cvc-test

Here is my public share link: LINK
(how to access public share link)

2

I’m coming back to this in hopes that someone has some insight. I’ve tried multiple other solutions and currently, I’m testing out the Jetboost filter solution. At the moment it works but I’m concerned that it will need to load every image in the ‘Product Images’ collection in order to work.

Would utilizing a 3rd party CMS for the photos be the best route? Then I can utilize Webflow CMS for the pages and the images would be pulled in from another source?

Let me know if you’ve had any experience with something like this and what the best solution might be. Thank you!

3

I have used Cloudinary to create galleries before. You can get a json list from the console and use that as the source for a gallery component. You could also explore using their product gallery. Problem is it won’t render in the designer.

4

Thank you! I will take a look at that and see if that will work for me. I appreciate your help.

5

Do you know how I can utilize the gallery widget without being able to install the Cloudinary SDK in Webflow? Or is there a way to install the SDK? I spent a few days learning how to better use API’s, but that part still confuses me.

6

You need the client-side SDK.

Choose vanilla or jQuery and load from a CDN like cdnjs.

7

Great. I will look into this. Thank you.