I’ve created a CMS Collection that includes a multi-image field.
I’m trying to bind a multi-image field to a collection list by following the instructions in a tutorial (Multi-image field overview | Webflow University) from Webflow University, but without success.
hi @Chuck_Braman If I’m not mistaken you need to introduce a new nested collection (inside your collection) to be able to reach your images.
I didn’t watch WF video tutorial but it looks that she is already inside collection to show article content and she is dropping nested collection. Hope that make sense.
Hi @Chuck_Braman, thanks for the question. The multi image field can only be used on a collection template page, so if you are trying to bind a collection list to the multi-image field on a static page, the option does not show up.
If you place a collection list on the collection template page for the collection where the multi image field was created, then you can bind the collection list to the multi-image field and show the multiple images.
For example, if you go to page performances template where each item is shown from the collection list on your static page, you can add a collection list that is bound to the more images field of the Page performances collection, then add an image widget or lightbox to your collection list and bind the image or lightbox to the multi image field.
A the moment it is not possible yet to use a multi image binding for a regular collection list on a static page
As Stan mentioned, you can use a Nested Collection list to bind to a single multi-image field and show up to 5 images per multi-image field.
Stan, I was able to implement your suggestion and achieve what I set out to achieve up to a point, but am stopped by a new issue, which is that the multi-image field that I created for the full-sized photos (vs. the multi-image field I created for the Thumbnails) is not accessible in the Image Settings panel, which I don’t understand.
If either of you may be able to offer advice as to how I can display the multi-image field of the full-sized photos in the Lightbox, or if that is not possible, what is my best possible alternative, I would really appreciate it.
Hi @Chuck_Braman, thanks for your reply. Let me help to clarify my previous comments.
The multi-image field can be used on a collection template page to show the images and you can bind a collection to a multi-image field on a collection template page, but with the regular bindings, you cannot bind a multi-image field to a collection list on a static page.
As Stan mentioned, you can use a nested list to display the content from the multi-image field on a Static page, that field acts similar to a multi-reference field in that way.
The Nested Collection feature allows to reference up to 5 multi-referenced items, or in this case up to 5 images coming from the multi-image field on the static page when using the Nested Collection.
If you wanted to show all images in the collection list, then the collection list would need to be bound on the collection template page using the method I mentioned and that is highlighted in the overview on using the multiple images.
So my earlier comment was regarding just using the multi-image field and binding to a normal collection list on a collection template page vs a static page, not using a Nested collection list and the reason why you were not seeing the option for the multi-image in the base collection list.
On the question why the Photos multi-reference is not showing up in the list, it is because the Nested collection is bound to the Thumbnails multi-image source, so only the Thumbnails multi-image field is available for binding.
You’ve explained everything very clearly, I appreciate it.
This is bad news for me, though, because as I understand it now, it will be impossible to recreate my previous layout (New York Jazz Bands: Some Past Performances) in the CMS due to Webflow’s current limitations, unless I want to have the images inside the Lightbox cropped to squares, or conversely, have odd-sized thumbnails with too much detail be legible.
I think that to recreate this I’m going to have to probably have to cut and paste and replace content on the canvas and forgo any sorting options.
Hi @Chuck_Braman, I am here to help, I am not sure I understand what you are trying to do with the lightbox image.
Are you wanting cropped thumbnail images? Or are you wanting thumbnail images that are resized to show all the detail?
When using the same image source for both the image in the lightbox and the lightbox media, do you have a screenshot of how it is rendering that you want to change?
Here it how it looks for me if I change the source of the collection list to use the Photos multi-image field as the source collection for the Nested collection, and binding the photos field as both image and lightbox media.
I notice there are images with different aspect ratios being used, so some images that are shown as thumbnails have different width dimensions:
I think you can improve things by maybe optimizing the image size for each image prior to upload, to perhaps reduce the image dimensions so that detail will not be so tiny when the image is resized to a smaller size with same aspect ration.
Another thought I had was to use the same Photos image source and instead of using an image widget, set the lightbox image as a background image with a full cover, which results in the thumbnail zooming in.
Here is an example:
If that does not meet your need then you would probably have to do something else since the lightbox can only bind to a single source at a time, either thumbnails, or photos.
That was a good suggestion and I learned some new things from following your instructions in the video you made. But at the end of the day, I think it is going to be better for me to create this without using the CMS at all. I made a short video explaining why below.
