Picture field

The picture field is a Collection field that enables you and your teammates to upload a picture for your Collection items and utilize it in your designs. Collection pictures can be utilized as a standard image element or a background picture within Collection Pages and Collection Lists.

You can also employ the picture field to sort a Collection List or establish conditional visibility on elements in Collection Lists and pages. Here are some typical uses for the picture field:

• Profile snapshot for authors or team members
• Symbols
• Backdrop pictures for sections
• Picture for Open Graph

In this tutorial

1. Create a picture field
2. Insert a picture into the picture field
3. Use the picture field in your designs
4. Sort a Collection List using the picture field
5. Establish conditional visibility using the picture field

Establish a picture field

A picture field can be appended to a new or existing Collection. In Collection configurations, tap New Field and then select the Picture field.

And as with any field, you can determine if the field is compulsory or not.

Insert a picture into the picture field

To input pictures in the CMS, drag and drop a picture or click to upload one. You can upload any compatible picture file type.

The maximal file size for pictures is 4MB. Adaptive variations are formulated for these pictures upon upload. Nonetheless, these variations are utilized solely when the pictures are employed as image elements, not on background pictures.

Utilize the picture field in your designs

In any Collection List or Collection Page, you can link a picture field to various elements or styles to integrate your Collection pictures into your designs.

Link the picture field to image elements

1. Incorporate an image element to a Collection List or Collection Page
2. Mark the Obtain picture from checkbox in the Picture Settings
3. Select the pertinent picture field from the dropdown

You can also access the picture settings by choosing the element and either tapping the settings icon next to the element label on the canvas, or by navigating to the Settings panel (D).

You can disconnect the connection by unchecking the Obtain picture from checkbox under Picture Properties.

Establish dynamic alt descriptors

To configure a dynamic alt text for these pictures:

1. Select the picture
2. Head to the Settings tab
3. Beneath Picture properties, select the “Obtain Alt Text from:” checkbox
4. Select the field that houses the Alt text for your pictures.

Link the picture field to background pictures

You can designate Collection pictures as the backdrop of an element like a section or a div block to produce, for instance, blog thumbnail pictures or hero backdrop pictures. To establish a dynamic backdrop picture:

1 – Link the backdrop picture to a picture field

1. Earmark a section
2. Visit the Settings Panel (D)
3. Opt for the Obtain BG picture from option
4. Select an picture field from the field dropdown

2 – Modify the backdrop picture settings

While linking a picture field to a backdrop picture, the default backdrop picture settings are implemented. To supersede those settings:

1. Whilst still picking the same section, insert a backdrop picture in the style panel
2. Specify the size, position, and tiling settings for your backdrop picture

Any backdrop picture set on this element in the Styles Panel will be overridden with the Collection picture when this setting is selected for this element.

Any other backdrop styling like a gradient or a solid color set on this element will reset the dynamic backdrop picture positioning.

Eliminate the dynamic backdrop picture

You can detach the connection by unchecking the Obtain BG picture from checkbox under Collection Style Settings.

Link the picture field to a Lightbox

1. Insert a lightbox in a Collection List or Collection Page
2. Choose the lightbox image placeholder
3. In the Image Options, retrieve the picture from the relevant picture field
4. In the Lightbox settings, acquire the media from the same picture field

Sort a Collection List using the picture field

In some scenarios, you may opt to showcase a Collection List that solely exhibits Collection items with a distinct picture field designated. For instance, you might wish to present only items that hold a thumbnail picture designated. To carry out this:

1. Choose the Collection List you intend to sort
2. Proceed to the Settings panel (D)
3. Include a sorting under Collection List Settings
4. Select the pertinent picture field in the primary dropdown: “Thumbnail Picture” for this illustration
5. Opt is assigned in the second section
6. Press Save

The sorting regulations that can be utilized with the pictures field are:

• Is Assigned – seeks Collection items that possess a picture for this picture field
• Is Unassigned – seeks Collection items that lack a picture designated for this picture field

Discover more regarding sorting Collection Lists.

Establish conditional visibility utilizing the picture field

Similarly, you can fix a conditional visibility law on a picture component in your Collection List or Page. This will make sure that picture components will be visible solely when a picture is uploaded for a specified Collection item.

1. Select a picture component that’s linked to a picture field
2. Access the Settings panel (D)
3. Include a situation (when this component is visible) under Conditional Visibility
4. Select your picture field in the primary dropdown
5. Opt for Is Assigned in the secondary dropdown
6. Tap on Save

Delve into more details about conditional visibility.