Having Trouble Implementing CMS Multi-Image Field

Design help CMS
1

Hi Community,

I am working on a website for a custom home-builder, and I am having trouble implementing the multi-image field for a CMS item. Before I forget, here is my read-only link, and here is the link to the live staging site.

To begin, below is the design I am going for. The 4 images on the right-hand side are currently static.

image
image2592Ă—992 429 KB

Ideally, the 4 images on the right hand side of this collection item would be sourced from the CMS multi-image field. I do have that set up in my CMS Collection as you can see below:

image
image2880Ă—1642 422 KB

However, I have not found a way to connect to the multi-image field. The section itself is a collection list where only a single item is displayed, and it’s based on whether a CMS toggle is featured on or off for a featured listing. You can see that it’s a collection item below:

image
image2290Ă—958 418 KB

I cannot connect a BG image to the multi-image field as it’s not an option, and you can see below. I can only choose to source it from “Card Image” which is a single image CMS field.

image
image1776Ă—1384 407 KB

So, I started to look around for other solutions, and I figured the Lightbox Gallery would be the correct solution. I found this person ( @meteorites ) doing exactly that. Here is his read-only link. He is placing a lightbox inside multiple collection items and then sourcing the background image from his multi-image field in the CMS. You can see this below:

image
image2880Ă—1636 1.07 MB

image
image2880Ă—1642 721 KB

So, I went and followed his exact setup, but I still cannot choose my multi-image field to get the BG image, just like he did. You can see this is not a selection from the image below:

image
image2880Ă—1628 420 KB

Anyways, I am sure I am doing something stupid, and I am hoping someone in the community can point me in the right direction to accomplish my design above. To sum everything up, I am trying to keep the same layout from my design (one main image and 3 side images), I am trying to pull the BG images from the multi-image field in the CMS, and ideally, I would like to limit the number of items from the multi-image field shown to 4.

Thanks for any help you can offer :slight_smile:

UPDATE:

I messaged @Meteorites as he went through this same problem on the forums, and he pointed me back to the following video. Starting at about 33 minutes, I see that the Webflow team is showing this working on a CMS page, not a normal page where a CMS Collection List is added. I am now wondering if this is the reason I can’t connect to the multi-image field. Is it true it must be on a Collection Page?

UPDATE 2: Diving deeper into the forums, I did find one person (@sarahfrison) saying this can only be done on collection template pages, not static pages where cms collections lists are added, see below:

image
image1664Ă—492 65.8 KB

5 Likes
2

I do have the same problem.
I mean this would be horrible if there is no work around. In which way should I create a dynamic gallery?

1 Like
3

Hi @myonke,

You guessed correctly. I just added the lightbox to a dynamic collection page and you could then select the multiple images. (pic attached).

11
112072Ă—1087 411 KB

With my project I added a main image to a static page and then clicked through to view all the images that were being pulled in via lightbox multiple images. Perhaps this could work for each house? Just a thought.

Hope this helps

All the best

Matt

4

Thanks again for the follow up. I did try this, too - was just hoping I was still doing something wrong haha. Can you explain this work around a little more? Not completely following haha

“With my project I added a main image to a static page and then clicked through to view all the images that were being pulled in via lightbox multiple images. Perhaps this could work for each house?”

5

Hi, Apologies, I just re-read what I wrote.

1 Like
6

@myonke I added individual images being pulled in from the cms to a static page, these connected to the dynamic page where I set up the light box. So there are 2 pages in play not just one static page. So from the static it takes you to dynamic where you’ll have to then click again to see the lightbox images.

This method suited the project with the cars. You might have to have a think about site structure to achieve what you’re looking for?

2 Likes
7

Awesome - thanks so much. I will give it a go! May come back with a few more questions though if I’m an idiot and can’t figure it out!

8

@myonke no worries be glad to help, I’ve had my fair share of help here on the forums, you’re close and no idiot myonke, just a slight Webflow learning curve!!

1 Like
9

@gaby_izarra from Webflow confirmed CMS multi-image cannot be used on a static page, but only a Collection Template Page:

Hey @myonke,
Yep! You’re right. You can only connect to a multi-image field from a CMS template page. Not a static one. We don’t support connecting to a multi-image field on static pages just yet, specifically because there isn’t a reference to the CMS item where that multi-image field lives. We are working on some nested collection features that I think is a first step toward unlocking that capability. I’ll check in with the product managers about that.

1 Like
10

It’s good to know @webflow is working on a solution, because it’s super inconvenient for multi-language websites!

1 Like
11

Hi,

I’m working on a project and for some reason I can not get my Collection to show my multi image field. I’ve added an image to the collection and no luck. Any help with is would be greatly appreciated.

Cheers,

Anfernee

ezgif.com-video-to-gif

12

Can you share the read-only link?

13

Well it’s Mar 2021. Hope this solution is created soon. Collections are not just used on Collection Template pages. If Webflow wants to release a feature ASAP thank you, but a year and a half later it should be completed. That’s the user’s assumption, as opposed to spending a half hour wondering why doesn’t this thing that should work, doesn’t work, and then finally turning to the forum to find out it’s still half-baked.

4 Likes
14

The key word here is CMS template. This is not going to work on a normal template. I was pulling my hair until i figured out. :grinning_face_with_smiling_eyes:

15

I’ve been looking forever how to connect a Multi Image Field to a static page. I just want the tiles on a static page to use different images each reload / visit, so things don’t get too recognizable too fast.

16

@seanivore if it’s a static page, you wouldn’t connect a Multi Image Field to it. You’d have a Collection of images, one per item, then drop a collection list on your static page, bind it, and sort random.

If you want it to sort on every refresh you can use my cloneable here;

1 Like
17

I’m slightly confused.

Say I had a lamp. I took 10 photos of the lamp. I would like the same image frame or div block BG image to show any one of the ten images of the lamp, selecting a new lamp image (either at random or based on the uploaded order of images) each time the page is reloaded.

I feel like I half understand your workaround… but I also feel like it doesn’t achieve my goal.

Even just the background image for a single static page: Is there a way to connect a collection of images to show one randomly with each visit?

I’m missing a jump in understanding somewhere.

18

Have a look at the main forum post you added after this one, for details.

Your initial comment here wasn’t especially clear on what you were trying to accomplish, and it’s a bit different from what OP was needing in this thread.

The idea of randomly selecting a card image from the collection item’s multi-ref is a great idea, so I’ve added your specific use case into Sygnal Attributes and built a demo into the cloneable as well.

1 Like