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 tag element inside the blog post image section and bind or label it based on the Relationship Status.
- Use conditional visibility to show the tag only when Relationship Status is not "All"; optionally add separate tags with unique rules for each specific status.
To conditionally show a tag on a blog article's image in Webflow CMS only for specific relationship status categories (but hide it if it's "all"), you'll need to use conditional visibility within a Collection List or Collection Page.
1. Define Your CMS Structure
- Go to your CMS Collections, and ensure your Blog Posts have a field like “Relationship Status”, which can be:
- A Reference or Multi-reference field to another 'Relationship Status' collection.
- Or a Plain Text or Option field with values like “Single”, “Married”, “All”, etc.
2. Add the Tag Element in the Blog Image Section
- In the Collection Page or a Collection List, locate your image or image wrapper for the blog post.
- Add a div block or text block for the tag, such as “For Singles”.
- Bind the content to the related Relationship Status field if dynamic, or just write the label manually for now.
3. Add a Conditional Visibility Filter
- Select the tag block, then go to the Element settings panel (gear icon).
- Under Conditional Visibility, choose:
- “Relationship Status is not equal to All” (or equivalent wording based on your CMS field).
- This ensures the tag only shows if the blog post is not marked as 'All' statuses.
4. (Optional) Customize Tag Appearance Based on Specific Statuses
If you want to show different tags (e.g., “For Singles”, “For Couples”) based on the selected category:
- Use multiple tag elements inside the image wrapper.
- Apply separate Conditional Visibility rules:
- Show “For Singles” only if Status is Single
- Show “For Couples” only if Status is Married, etc.
This creates a dynamic tag system that changes based on the relationship status.
Summary
Configure your CMS to include relationship category data, use a visual tag element bound to the collection, and apply conditional visibility (e.g., “is not All”) to hide it when not needed. You can add more rules for granular tag display per category.