Add multiple images to your Collection items and connect them to Collection lists and lightbox media on Collection pages.
The Multi-image Field is a Collection field that allows you and your collaborators to upload multiple images for your Collection items and use them in your designs. You can use a Multi-image Field to create dynamic image grids and dynamic lightbox galleries.
At the moment, these images can be used as regular image elements, background images or as Lightbox media within Collection Pages.
You can also use a Multi-image Field to filter a Collection List or set conditional visibility on elements in Collection Lists and pages. Here are some common uses for the Multi-image Field:
A Multi-image Field can be added to a new or existing Collection. In Collection settings, click New Field and then choose the Multi-image Field. And as with any field, you can specify if the field is required or not.
To upload images into a Multi-image Field, drag and drop them into the field or click to upload them. You can upload any accepted image file type.
Once your images are uploaded, you can reorder them by dragging them around within the Multi-image Field. Make sure to save the item to save the new order.
You can add more images to a Multi-image Field as long as you haven’t reached the 25 image limit per field.
You can specify an alt text for each image in a Multi-image Field. This is important for SEO and accessibility. You can add the alt text for each image from the image menu which you can access by clicking the ellipsis (...) that appears on each image as you hover over it.
You can also delete any images from the Multi-image Field from the same menu. Click the ellipsis(...) and choose delete.
You can display the images of a Multi-image Field on its Collection page by adding a Collection List on that page and connecting it to the Multi-image Field.
Next, you can either add image elements, div blocks, or lightboxes to display your images.
You can set images from the Multi-image Field as the background of an element, like a div block, to crop images and fit them in boxes of specific dimensions or shapes. To set a dynamic background image using the Multi-image Field:
Troubleshooting: If the background image doesn’t look correct:
You can use the Multi-image Field to create dynamic lightboxes.
Option 1: Link the Lightbox image placeholder to the Multi-image Field
Select the image element in the lightbox component and in the Image Settings, choose to get the image from the multi image field.
Option 2: Set a background image on the Lightbox link and get the images from the Multi-image Field
Although you cannot filter a Collection List that is connected to a Multi-image Field, you can filter other Collection Lists to only display items that have a specific Multi-image Field set or not set.
For example, you can create a Collection list of “More photos” where you only show items for which you’ve uploaded images in the Multi-image Field.
To filter a Collection List based on whether a Multi-image Field is set or not:
The filter rules that you can use with the Multi-image Field are:
Learn more about filtering Collection Lists.
In the same way, you can set a conditional visibility rule on any element in your Collection List or Page. This will ensure that these elements will only be visible when the Multi-image Field is set for a given Collection item.
You can use this conditional visibility to display a “see photo album” text link in a Collection List. You can also use it to display a heading (eg. “Photo from this trip”) in the section where you display these images on the Collection page.
Learn more about conditional visibility.
Loading too many images on a page may slow down your page load speed. So, when you’re pulling up 25 multi-images per page, make sure to optimize your images before uploading them to the CMS or paginate the Collection list connected to the Multi-image Field.
There’s no filtering and sorting options for this Collection List because it automatically shows the images from the connected Multi-image Field in the order that you've added them within the Multi-image Field.
Yes! Learn more about nested Collection lists.
At the moment, you cannot import multiple images into a Multi-image Field using the Collections import feature.
Something went wrong while submitting the form. Please contact support@webflow.com