The image field is a Collection field that allows you and your collaborators to upload an image for your Collection items and use it in your designs. Collection images can be used as a regular image element or a background image within Collection Pages and Collection Lists.

You can also use the 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 image field:

  • Profile picture for authors or team members
  • Icons
  • Background images for sections
  • Image for Open Graph

In this lesson, we talk about:

  • Creating an image field
  • Adding an image to the image field
  • Connecting the image field to image elements
  • Connecting the image field to background images
  • Filtering a Collection List using the image field
  • Setting conditional visibility using the image field

Creating an image field

An image field can be added to a new or existing Collection. In Collection settings, click New Field and then choose the Image field.

And as with any field, you can specify if the field is required or not.

 

Adding an image to the image field

To add images in the CMS, drag and drop an image or click to upload one. You can upload any accepted image file type.

 
The maximum file size for images is 4MB. Responsive variants are created for these images upon upload. However, these variants are used only when the images are used as image elements, not on background images.

Connecting the image field to image elements

  1. Add an image element to a Collection List or Collection Page
  2. Check the Get image from checkbox in the Image Settings 
  3. Pick the relevant image field from the dropdown
 

You can also access the image settings by selecting the element and either clicking the settings icon next to the element label on the canvas, or by going to the Settings panel (D).

You can remove the connection by unchecking the Get image from checkbox under Image Properties.

Setting dynamic alt attributes

To set a dynamic alt text to these images:

  1. Select the image
  2. Go to the Settings tab
  3. Under Image properties, check the "Get Alt Text from:" checkbox
  4. Select the field that contains the Alt text for your images.
Dynamic alt attribute

Connecting the image field to background images

You can set Collection images as the background of an element like a section or a div block to create, for example, blog thumbnail images or hero background images.

  1. Select a section
  2. Go to the Settings Panel (D)
  3. Choose the Get BG image from option
  4. Select the image field from the field dropdown
  5. Go to the Styles Panel (S)
  6. Customize how the background image displays (see below)

Any background image or gradient set on this element in the Styles Panel will be overwritten with the Collection image when this setting is checked for this element.

Editing background image settings

When connecting an image field to a background image, the default background image settings are applied. To override those settings:

  1. Open the Styles Panel (S)
  2. Add a background image
  3. Set the size, position and tiling settings for your background image
 

You can remove the connection by unchecking the Get BG image from checkbox under Collection Style Settings.

Filtering a Collection List using the image field

In some cases, you may choose to have a Collection List that only displays Collection items with a specific image field set. For example, you might want to show only items that have a thumbnail image set. To do that:

  1. Select the Collection List you want to filter
  2. Go to the Settings panel (D)
  3. Add a filter under Collection List Settings
  4. Select the relevant image field in the first dropdown: “Thumbnail Image” for this example
  5. Choose is set in the second field
  6. Click Save

The filter rules that you can use with the images field are:

  • Is Set - looks for Collection items that have an image for this image field
  • Is Not Set - looks for Collection items that don’t have an image set for this image field

Learn more about filtering Collection Lists.

Setting conditional visibility using the image field

In the same way, you can set a conditional visibility rule on an image element in your Collection List or Page. This will ensure that image elements will be visible only when an image is uploaded for a given Collection item.

  1. Select an image element that's connected to an image field
  2. Go to the Settings panel (D)
  3. Add a condition (when this element is visible) under Conditional Visibility
  4. Select your image field in the first dropdown
  5. Choose Is Set in the second dropdown
  6. Click Save

Learn more about conditional visibility.