I’m trying to set up a condition for my CMS collection so that when a specific switch is on, the thumbnail image of a post appears with a grayscale filter applied, while other images display normally.
To give you a bit more context, this is for a real estate website, and the goal is for sold properties to display in grayscale. I’m familiar with setting up conditions for visibility, but I’m unsure how to apply a filter like this conditionally.
If anyone could guide me on how to achieve this, I’d greatly appreciate it!
The “easy” way is to create two versions of you thumbnail element, one regular and one with filters applied to make it grayscale. Then you use your CMS switch to conditionally show one or the other.
There are more complex ways that avoid the duplicate elements but you’d be using custom code instead to target those elements with your filter CSS.
That makes sense. The only thing is that I’ll need to duplicate the CMS and works for this specific project. However, as you mentioned, it wouldn’t be suitable for large-scale projects. Thank you!
It would work fine on large-scale projects. I just prefer to avoid duplicate elements when I can, even in the designer, as it adds to “project weight”- the number of elements & complexity in the nav.
Either way it won’t noticeably increase your rendered HTML, and won’t require a second CMS collection.