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).
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.
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?
To replicate the animation, you’ll need to do things differently. Since this is a collection list, here’s how you can do it:
- First, you need to nest the Collection list under the
- Remove the classes from the Collection list elements and delete the image within the list
- Apply the combo class
sticky-grow to the collection list item
- Copy one of the
absolute divs from an animated section and paste it inside the Collection list
- Select the
bg-image and connect it to the Multi-Image Field
check the video below, this should work:
It works perfectly, thank you Anna!!
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.
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.
Hi again @aran_hrzn
Seems it’s working when I applied a white background on the
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.
Hope all is well, working on a project for a client and for some reason I can’t get a collection to show the images from a Multi image field. I’ve tried one solution which work by adding a collection within a collection and an image inside to refer the multi images that seems to work, but not ideal! .If I can get any help with this that would be great.
Currently, that’s how Multi-images work. There’s no other way to display them other than in a collection list within a collection list or a collection list on the relevant Collection page.
You can learn all about using multi-images here: https://university.webflow.com/article/cms-multi-image-field