[CMS] Conditional element visibility?

Design help CMS
1

Hi there!

First of all - Webflow CMS is great! We are considering using it as our go-to small site platform.
Most of the functionality makes complete sense, and is very intuitive to use, but what i was unable to find so far is an option to hide certain bits of content depending on the value of a field in a data collection entry.

Example: Lets say we have a list of authors and for each of them we can fill out a twitter profile url. I would like to only display a twitter link + icon IF that field is not empty.

Seems like a pretty basic thing to have in a CMS.
Your thoughts? Maybe that functionality is present already and im just missing something here…

  • Peter
2 Likes
2

Great question. Just make sure the field isn’t set to “required” in the collection. That way it won’t show up if the field is left blank. :smile:

3

@PixelGeek I think you misunderstood me :slight_smile:

What you describe would be just fine for printing out text, or an image (here im not actually sure, because Webflow seems to be rendering a dummy image if an image is missing). Im my case tho…

The field that would be left empty is just the URL, and it would end up here:

<a href="{{ twitterUrl }}"><img src="/images/path/twitter-icon.svg" /></a>

As you can see, the point is to have an icon linking to the authors twitter page. Now i would like to wrap the whole <a> tag in an IF statement, rendering that piece of code only if the URL is not empty. A TWIG equivalent would be:

{% if twitterUrl %}
  <a href="{{ twitterUrl }}"><img src="/images/path/twitter-icon.svg" /></a>
{% endif %}
  • Peter
4

I second @peter_redrabbits question, as I’ve been wondering about this myself.

5

Hi @peter_redrabbits and @abeyang, there is workaround that other user on the forum found out - to use “empty” state.
Hide empty elements from content collection:

Just few lines of code that you can put in the "head " part (choose which one fit your needs):

a:empty { display: none; }

or

a[href=''] { display: none; }

or

a[href='#'] { display: none; }

or

a:not([href]) { display: none; }

Same thing works with div.

Good luck,
Anna

1 Like
6

We’re already designing a visual solution for this. Thanks for the feedback!

9 Likes
7

Ya, this is a problem I am having. I am having to create multiple Collections instead of using basic logic and the ‘Switch’ field in a single collection.

For eg. One of my content pieces can either be a Story or a Research paper, with mostly common content fields and couple of conditional ones. I can’t seem to be able to filter display of elements according if the state of a switch like ‘Is this a Research paper?’. If true, I want it to display one set of content and if not display another set.

Unfortunately, even if I ask content managers to leave non-applicable field empty, there is no easy way to toggle visibility of an element.

1 Like
8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.