How can I set up the CMS and Editor in Webflow to only display a specific tag on a blog article's image if it is relevant to a specific relationship status category, but hide the tag if the article is relevant to all relationship statuses?
- Add a CMS field to indicate relationship status relevance, using an option, multi-reference, or boolean field.
- Overlay a tag element on the image and apply Conditional Visibility to show it only if the article targets a specific status (e.g., status ≠ "All" or Applies to All = false).
- Bind the tag text to the relevant CMS field to display the relationship category dynamically.
To conditionally show a tag on a blog article's image in Webflow only if it's relevant to a specific relationship status (and hide it for content relevant to all statuses), you can use Conditional Visibility in a CMS Collection List.
1. Structure Your CMS Fields
- In your Blog Posts collection, add a field to indicate the relationship status relevance. Use one of these options:
- Single Option Field ("Relationship Status") if each blog post targets one status only.
- Multi-reference Field (e.g., Relationship Categories) if a blog post can be tagged with multiple statuses.
- Option Field + Boolean (e.g., “Applies to All”) if you want to manually toggle general-relevance.
Choose the simplest model for your content logic.
2. Design the Image and Tag Block
- In the blog article layout (in a Collection List or Collection Page):
- Add an Image element tied to your CMS image field.
- Add a Text Block or Div Block positioned over the image that will serve as the tag (e.g., “For Couples”).
3. Use Conditional Visibility on the Tag Block
Select the tag wrapper block (the element you want shown/hidden).
Go to the Element Settings panel.
Under Conditional Visibility, set rules like one of the following based on your CMS setup:
Option A: Relationship Status Field
Show if Relationship Status is not equal to "All"
Option B: Boolean Field (e.g., Applies to All)
Show if Applies to All is false
Option C: Multi-reference (if using multi-category model)
Unfortunately, Webflow doesn't allow conditional logic directly on multi-references—so use a switch field or custom summary text that can be conditionally displayed.
4. Display the Tag Text
- Inside the visible tag wrapper:
- Bind the text to your Relationship Status field to dynamically display the category name.
- Style it to match your design (e.g., overlay at top-left corner of image).
Summary
To conditionally show a relationship status tag only for specific categories, use Conditional Visibility on a tag element, and base it on a CMS field that either identifies the status category or flags it as “Applies to All.” This way, the tag is only shown when relevant and hidden when it's a general article.