How do I add a multi-image field in Webflow?

Add the field and upload the set

A multi-image field stores several images on one Collection item. Project galleries, product shots, and trip photos fit this field. A single image field is for one file. In Collection settings, click New field and choose Multi-image. Mark the field required only when every item must include images.

Open an item and drag the files in, or click to upload. Each image can be up to 4MB. The field holds up to 25 images. Drag the thumbnails inside the field to set the order, then save the item. The page uses that saved order. There is no separate sort on the list that displays the field.

Hover an image and open the ellipsis menu. Add alt text there. The same menu deletes a file you no longer want. Write a short description of the picture. Alt text on this field is part of the item, so set it before you publish the gallery.

Show the images on the item page

On the Collection page, add a Collection list and connect that list to the multi-image field. Do not connect it to some other Collection if you only want this item's photos. Place an image element inside the list. In the image settings, get the image from the multi-image field. Then set the layout, such as three columns on desktop.

That list cannot be filtered or sorted. It shows the images stored on the current item, in the order you saved. If a different list, one connected to the Collection itself, should skip items with an empty gallery, filter that list with the multi-image field set to is set. Is not set does the opposite. Those two rules are the only filters Webflow documents for this field.

Example: a Projects item named Harbor office has 8 photos in a field labeled Gallery. The project template has a Collection list connected to Gallery, with an image element bound to the field. The published project page shows those 8 photos, in the dragged order, and it does not pull photos from other projects.

Crop tiles or open a lightbox

For tiles with a fixed shape, use a div block instead of an image element. Connect the Collection list to the multi-image field. On the div, get the background image from the field. In the Style panel, set a background image and give the div a size. If the picture looks wrong, confirm the element gets its image from the field, confirm a background image is set, and remove any other background or gradient on that element.

For a gallery people can click through, put a lightbox inside the same list. In the lightbox settings, get the media from the multi-image field. If visitors should move through every image once the lightbox is open, turn that link option on and set a lightbox group name. You can bind the lightbox thumbnail image to the field. Or delete that image element, put the background image on the lightbox link, and size the link in the Style panel.

Responsive variants are created when the file is uploaded. Webflow uses those variants for image elements. It does not use them for background images. A background tile needs a file you already sized for that tile.

Keep a long gallery from slowing the page

Webflow notes that loading many images on one page can slow the page. A field can hold 25 images, so a template that prints every image is a heavy page. Compress the files before upload, or paginate the Collection list connected to the field, so the visitor is not handed the whole set at once.

A heading such as Project photos should appear only when the field has files. Select that heading on the Collection page, or inside a list of items, and add a conditional. Choose the multi-image field, use Is set, show the heading when images exist, and hide it otherwise. The images themselves still come from the list you connected to the field.