Conditions

A condition shows or hides an element depending on your data. Select the element, and in its Visibility Condition field, pick a value from your data source with an expression and choose a test. When the test is true, the element shows. When it is false, the element is hidden.

Use it to show a badge only on some posts, to show a "No posts" message when a list is empty, or to hide an image that is missing.

The Visibility Condition

Visibility Condition is a field of the Element settings (gear icon at the top of the right panel), in the Properties section.

1. Select the element
2. Open the Element settings (gear icon)
3. In Properties, find Visibility Condition and click Expression
4. Click + and pick the value to test, for example Post card, Loop item, featured_image inside the post card of Loops and lists
5. In the ... is menu below, choose the test
6. If the test compares two values (==, !=, >, <, >=, <=), a second field appears below the menu. Type the value to compare with (Fixed), or build it with Expression

The canvas updates as soon as you change the condition. An element has only one Visibility Condition.

Tests on one value

These tests need nothing else. Pick one in the ... is menu and you are done.

truthy: the value exists. It is not empty and not false. Use it to show an element only when there is data to show.

Example: show the image of a post only if the post has one. On the image inside Post card, set Visibility Condition to Post card, Loop item, featured_image, and choose truthy.

Use truthy for a true/false field, like is_featured. Do not use == true: the Fixed value is text, and the text true is never equal to a true/false field.

falsy: the value is missing or false. This is the opposite of truthy.

Example: show a "No image" text in the post card when the post has no image. Same value as above, choose falsy.

empty array: the value is a list with no items. Use it on a list, like your list of posts.

Example: show a "No posts" message when there are no posts. Set Visibility Condition to posts (then nodes or data if your API wraps the list), and choose empty array.

not empty array: the value is a list with at least one item. This is the opposite of empty array.

Example: show a "Latest posts" title only when there are posts. Same value as above, choose not empty array.

Tests that compare two values

These tests compare the value of Visibility Condition with the value in the second field.

==: the two values are equal.

Example: show a "News" badge only on posts of the news category. On the badge inside Post card, set Visibility Condition to Post card, Loop item, category. Choose ==, and type news in the second field (Fixed).

!=: the two values are not equal.

Example: show a "Draft" label only on posts that are not published. On the label inside Post card, set Visibility Condition to Post card, Loop item, status, choose !=, and type published in the second field (Fixed).

>, <, >=, <=: greater than, less than, greater than or equal to, less than or equal to. Use them with numbers.

Example: show a "Low stock" warning on products with less than 10 items in stock. Set Visibility Condition to the stock field, choose <, and type 10 in the second field (Fixed).

Field names like featured_image, category or status are only examples. When you click +, the menu lists the real fields of your data source.

Practical example: "No posts" message

Show a message when there are no blog posts. This uses the list of posts from Loops and lists.

1. From the Blocks panel, drag a Text onto the page, outside Post card, for example just above the list. Type No blog posts yet
2. With the Text selected, open the Element settings (gear icon)
3. In Properties, find Visibility Condition and click Expression
4. Click + and pick posts, then the field that holds the list if your API wraps it (like nodes or data)
5. In the ... is menu, choose empty array

The text shows only when the list of posts is empty. When there are posts, it is hidden, on the canvas and on the published site.

Practical example: "Featured" badge

Show a "Featured" badge only on featured posts. This uses the Post card from Loops and lists.

1. Drop a Text into the first Post card, or into Post card in the Layers panel. Type Featured. It appears in all the cards
2. With the Text selected, open the Element settings (gear icon)
3. In Properties, find Visibility Condition and click Expression
4. Click +, find the group named Post card, pick Loop item, then is_featured
5. In the ... is menu, choose truthy

The badge shows only on the posts where is_featured is true. If your CMS has no such field, pick a true/false field from the + menu, or use == with a value, like the "News" badge above.

Conditions in loops

Inside a loop, each copy of the element checks the condition with its own Loop item. In the examples above, the "News" badge and the "Featured" badge are inside Post card: each card tests its own post, so the badge shows on some cards and not on others.

To test a field of the current post, click +, find the group named after the element that loops (Post card), pick Loop item, then the field.

Learn more

• Binding data — showing your data in elements
• Loops and lists — repeating an element for each item of a list
• Expressions — understanding how to chain tokens
• Filters — transforming your data (slice, where, reverse, sort, etc.)

---

Quiz

Q1: You want to show the image of a post only if the post has one. What do you set on the image?

• A) Post card, Loop item, featured_image, then truthy
• B) Post card, Loop item, featured_image, then falsy
• C) Post card, Loop item, featured_image, then ==

Answer

A): truthy means the value exists. If the post has no image, the image is hidden.

Q2: You want to show a "No blog posts yet" text only when there are no posts. What do you set?

• A) posts (and nodes or data if needed), then truthy
• B) posts (and nodes or data if needed), then empty array
• C) posts (and nodes or data if needed), then not empty array

Answer

B) empty array: the text shows only when the list has no items. Put the text outside Post card, or it repeats with the cards.

Q3: Your posts have a true/false field, is_featured. How do you show a badge only on featured posts?

• A) Choose == and type true in the second field
• B) Choose truthy
• C) Choose not empty array

Answer

B) truthy: the value in the second field is text, and the text true is never equal to a true/false field. With ==, the badge never shows.

Q4: You want to show a label only on posts whose status is published. What do you set on the label?

• A) Post card, Loop item, status, then truthy
• B) Post card, Loop item, status, then ==, and type published in the second field
• C) published, picked in the + menu

Answer

B): == compares the status of each post with the text you type in the second field.

Q5: You choose == in the ... is menu. What else do you need?

• A) Nothing, the test is complete
• B) The value to compare with, in the second field below the menu
• C) A second Visibility Condition on the same element

Answer

B): tests that compare two values need a second value. Type it (Fixed) or build it with Expression. An element has only one Visibility Condition.