By using display conditions in Studio.Design, you can show or hide boxes in dynamic elements such as dynamic pages and CMS (dynamic) lists, based on properties set up in Studio CMS.
This article explains how to switch between displaying a thumbnail image and a piece of text in a CMS list, depending on whether an image property has been set.
Point: What is Studio CMS?
Studio CMS is a content management system (CMS) feature that lets you structure, manage, and update content directly within Studio.Design. By combining models, items, and properties, you can manage frequently updated content—such as blogs and news—all in one place.
For more on how Studio CMS works and how to use it, check out these articles:
Before setting up display conditions, create your article content in Studio CMS and prepare the page structure.
Create CMS article items in the CMS dashboard.
Create an article-type CMS model and add article items (CMS items).
In the CMS item detail edit screen, enter the body of the article and add related information—such as images and categories—as properties.
Set the publish status of each finished article item to [Published].
In the design editor, use a dynamic page to create an article detail page linked to the CMS model you created in step 1.
In the design editor, use a CMS list to create an article list linked to the CMS model you created in step 1.
For an overview of the full process—from CMS article creation to publishing—see the article below.
How to set it up
Step 1. Add a display condition to the image box linked to the image property
Select the image box you want to configure, then open the [Settings] tab on the right side of the screen. If the panel is closed, open the right panel.
In the [Display condition] section, click [Set display condition].
From the dropdown, select the image property linked to the image box.
Choose [is set] as the condition.
Once set, the image box will appear only for items that have the image property filled in.
Step 2. Set the text to display when the image property is not set
Add a text box to the CMS list.
Enter your text, then use the right panel to adjust the font size, text color, background color, spacing, and other design details. If the panel is closed, open the right panel.
You may also find these help articles useful:
In the [Display condition] section, click [Set display condition].
From the dropdown, select the image property linked to the image box.
Choose [is not] as the condition.
Once set, the text box will appear only for items where the image property has not been filled in.
Step 3. Check that everything is working as expected
Open the live preview and confirm that the image box and text box switch as intended.
Check the display on your published site.
Make sure the relevant CMS item's status is set to Published, then publish your site from the publish panel if everything looks good.
If you're editing a site that's already live, be sure to update your site.
is is not