You’re trying to display images from a Multi-Image field on a Collection Template page in Webflow, but can't find how to link the field inside your layout. Here's how to correctly use Multi-Image fields in a Collection page.
1. Understand the Limitation
- Multi-Image fields cannot be bound to image elements directly the way you would with Single Image fields.
- Instead, you must use a Collection List designed specifically to reference the Multi-Image field.
2. Add a Collection List in the Template Page
- Go to your Collection Template page (e.g., for your “Profiles” Collection).
- Drag a Collection List element into the page where you want the images to appear.
3. Choose the Multi-Image Field in the Collection List
- When prompted to connect the Collection List to a source, choose the Multi-Image field from the current Profile item (not the base Collection).
- This will create a nested list — each item representing one image from the Multi-Image field.
4. Add Image Elements Inside the List
- Inside the Collection List, add an Image element.
- The image will default to pulling from the item’s image in the Multi-Image field.
- You don't need to manually bind the image source — Webflow does it automatically for images in Multi-Image Collection Lists.
5. Customize Grid Settings if Needed
- If you're trying to use a CSS Grid layout, apply the grid to the Collection List's wrapper or a containing div.
- Use grid-child settings (like spanning columns or rows) on the image or item level to customize appearance.
6. Style the List and Images
- Adjust the spacing, number of columns, size, and other styles to fit your design.
- Since the image elements are auto-bound inside the Multi-Image list, no manual "Get Image from" option is necessary.
Summary
To add a Multi-Image field to a Collection Template page, insert a Collection List linked to the Multi-Image field and drag an Image element inside it. You cannot bind Multi-Image fields directly to single image or grid elements without using a Collection List.