How do I add an image field to a Webflow Collection?

Add one image field, not a gallery

An image field stores a single image on a Collection item. Webflow's examples are a profile picture, an icon, a section background, and an Open Graph image. A set of photos on one item is a multi-image field, which is a different control. The multi-image guide covers that gallery.

In Collection settings, click New Field and choose Image. You can add the field to a new Collection or to one that already has items. Mark it required only when every item must have a photo. You can also add help text, as with any field.

Webflow's collection fields article says images for this field are not pulled from the Asset panel. You upload them on the item. Name the field for the picture, such as Portrait, so an editor knows what to add.

Upload on the item, within 4MB

Open the item. Drag an image onto the field, or click the field and upload. Webflow accepts its image file types and sets a maximum of 4MB. Responsive variants are created on upload. Those variants are used when the image is an image element. They are not used when the same file is a background image, so size a background file before you upload it.

Save the item after the upload finishes.

Example: a Team Collection has a Portrait image field. Each person gets one photo. A case study that needs eight photos uses a multi-image field instead, so the order of the set can be managed there.

Connect the field to an image or a background

On a Collection list or a Collection page, add an image element. In Image settings, check Get image from and pick Portrait. You can open those settings from the settings icon beside the element label, or from the Settings panel with D. Uncheck Get image from to remove the connection.

For alt text, select the image, open Image properties, check Get Alt Text from, and choose a text field that holds the description. The alt text guide covers how to write that description. The image field does not invent alt text for you.

To use the photo as a background, select a box, open the Settings panel, choose Get BG image from, and pick the image field. Webflow applies the default background settings. To change size, position, or tiling, add a background image on that same element in the Style panel and set those values. The Style panel image is overwritten by the Collection image while Get BG image from is checked. A gradient or a solid color on that element resets the dynamic background positioning. Uncheck Get BG image from under Collection Style Settings to remove the connection.

A lightbox can use the same field twice. Get the placeholder image from the field, and get the lightbox media from the same field.

Show the image only when a photo is set

An empty image element leaves a blank box. Filter the list when items without a photo should not appear. Select the Collection list, add a filter, choose the image field, and set the rule to Is set. Is not set is the other rule. Save the filter.

When the person should stay on the page and only the photo should hide, use a conditional on the image element. The element has to be inside the Collection list or on the Collection page. In the Settings panel, under Visibility, click the plus icon, choose the image field, set the rule to Is set, set Visibility to Visible, and set Else to Hidden. Click off the modal or press Esc to save.

The conditional visibility guide explains the pair. Use the filter to drop the item. Use the conditional to hide the element.

Publish a full item and an empty one

Publish the items and the template. Open a person who has a portrait. The photo should show, and the alt text should come from the field you connected. Open a person with an empty Portrait field. The image should be hidden if you set that conditional, and the name should remain.

If every card shows a broken image, the upload may be over 4MB, or Get image from points at a different field. If the background position looks wrong after you added a color, the color reset the dynamic positioning. Set the size and position again after the color, or leave the color off that element.

Sending the photo and the alt text in writing is ordinary CMS work. The membership is one plan for every existing Webflow site: $999 per month, including 10 hours of Webflow work. Your Webflow subscription and hosting stay in your own account.