Streaming live at 10am (PST)

CMS multi-image not showing Images?

I created a Collection for a portfolio with a multi-image field, but when I use them for my page as a collection list, images are not showing (just the designer frame with the images name). Why images are not loading properly? Each project has pictures on the correspondent Collection item.

Website Preview: LINK (I didn’t save those last changes, but I’m sharing a screenshot and the preview link for you to see the collections).

Hi @aran_hrzn

Thanks so much for posting about your issue with Multi-images on the Webflow Community Forum.

I checked the preview link and it seems you haven’t added any image elements or applied any background images to populate the Collection list with the images from the Multi-Image Field.

Did you remove them by any chance?

Note that you need to add an image or a background image and connect it to the relevant CMS Fields to see the content on your page. Like this:

You can learn more about using the Multi-Image Field here:

Please, let me know if this helps fix your issue or if you’re experiencing other issues with this and I’ll be happy to investigate more and provide further assistance.

My best,
Anna K

1 Like

Thank you Anna, this was really helpful!

If only I could find how to replicate the effect the previous gallery had when scrolling!
I tried using the same classes, but when I do so the multi-image CMS stops working as such and shows only one picture.

Does anyone have any ideas?

1 Like

To replicate the animation, you’ll need to do things differently. Since this is a collection list, here’s how you can do it:

  1. First, you need to nest the Collection list under the Main section
  2. Remove the classes from the Collection list elements and delete the image within the list
  3. Apply the combo class section sticky-grow to the collection list item
  4. Copy one of the absolute divs from an animated section and paste it inside the Collection list
  5. Select the bg-image and connect it to the Multi-Image Field

check the video below, this should work:

1 Like

It works perfectly, thank you Anna!! :blush:
No way I could have figured that out all by myself.

Now, I noticed on preview mode that the first image loads with sort of a delay? The background image from the top of the page can be seen when scrolling (before the first image is completely loaded). Do you know why could this be happening?

Glad that worked!

It might that the images are too large. Try to apply a white background on one of the parent Collection list elements (maybe the collection List wrapper) and see if that can mask it.

I tried with white backgrounds, but no difference. :slightly_frowning_face:
I’ll keep trying, let’s see if I find out why the first image is acting like that.

I tried to take a look, but I couldn’t access the preview link again, did you turn it off?

@AnnaKelian Hi, again! I tried different methods to make this work correctly but I couldn’t find a way to resolve it. Do you have any ideas? They would be highly appreciated. :innocent:

Hi again @aran_hrzn

Seems it’s working when I applied a white background on the section sticky-growclass.

Can you try that?

I tried adding a white background to the sticky-grow class and, though it fixes the first section, it adds as well background to the other sections, adding white gaps between images.