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
- Create an image field
- Add an image to the image field
- Use the image field in your designs
- Filter a Collection List using the image field
- Set conditional visibility using the image field
Create 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.
Add 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.
Use the image field in your designs
In any Collection List or Collection Page, you can connect an image field to various elements or styles to bring your Collection images into your designs.
Connect the image field to image elements
- Add an image element to a Collection List or Collection Page
- Check the Get image from checkbox in the Image Settings
- 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.
Set dynamic alt attributes
To set a dynamic alt text to these images:
- Select the image
- Go to the Settings tab
- Under Image properties, check the "Get Alt Text from:" checkbox
- Select the field that contains the Alt text for your images.
Connect 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. To set a dynamic background image:
1 - Connect the background image to an image field
- Select a section
- Go to the Settings Panel (D)
- Choose the Get BG image from option
- Select an image field from the field dropdown
2 - Edit the background image settings
When connecting an image field to a background image, the default background image settings are applied. To override those settings:
- While still selecting the same section, add a background image in the style panel
- Set the size, position and tiling settings for your background image
Any background image set on this element in the Styles Panel will be overwritten with the Collection image when this setting is checked for this element.
Any other background styling like a gradient or a solid color set on this element will reset the dynamic background image positioning.
Remove the dynamic background image
You can remove the connection by unchecking the Get BG image from checkbox under Collection Style Settings.
Connect the image field to a Lightbox
- Add a lightbox to a Collection List or Collection Page
- Select the lightbox image placeholder
- In the Image Settings, get the image from the relevant image field
- In the Lightbox settings, get the media from the same image field
Filter 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:
- Select the Collection List you want to filter
- Go to the Settings panel (D)
- Add a filter under Collection List Settings
- Select the relevant image field in the first dropdown: “Thumbnail Image” for this example
- Choose is set in the second field
- 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.
Set 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.
- Select an image element that's connected to an image field
- Go to the Settings panel (D)
- Add a condition (when this element is visible) under Conditional Visibility
- Select your image field in the first dropdown
- Choose Is Set in the second dropdown
- Click Save
