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?
TL;DR
- Add a "Relationship Status" field (option or multi-reference) to your Blog Posts CMS.
- On the post template, add a tag element near the image and bind or list the status.
- Set conditional visibility to hide the tag when the status is "All Statuses."
- Style and filter tags appropriately to display only targeted statuses.
To conditionally show a tag on a blog image based on a CMS field (e.g., "Relationship Status"), you’ll need to use CMS conditional visibility settings within the Webflow Designer.
1. Add and Structure Your CMS Fields
- In your Blog Posts Collection, ensure you have a multi-reference field or option field named something like Relationship Status.
- Include options like "Single," "In a Relationship," "All Statuses", etc., depending on how granular you want it.
2. Design the Tag Wrapper in the Blog Template
- Go to your Blog Post template page and select the image wrapper or wherever you want the relationship status tag to appear.
- Add a Text Block or Div inside or over the image to act as the tag badge.
- Bind the text dynamically to the Relationship Status field (if it’s an option field) or use a Collection List if it's a multi-reference field.
3. Set Conditional Visibility
- Select the tag element.
- Go to the Element Settings Panel (gear icon).
- Under Conditional Visibility, click + Add Condition.
- Set the condition based on the logic:
- If using an option field: Set visibility to only show when Relationship Status is not equal to "All Statuses".
- If using a multi-reference field: Use a Collection List Wrapper for the statuses, and filter it to exclude items where Name = "All Statuses".
4. Customize Display As Needed
- Style the tag's visibility and text to display values like “For Single,” “For Couples,” etc.
- Optionally add fallback text or hide the element entirely when "All Statuses" is selected.
Summary
Use conditional visibility in the Webflow CMS template page to show a relationship status tag only when the article’s “Relationship Status” field does not equal "All Statuses.” This ensures the tag appears only for targeted content and stays hidden for general posts.