Conditional class with Twig on div element

Question

Can I change class added to a div element depending on the content of this div ? Like: "if the div is empty, add this class, else add this class" and targeting the div with an id or something else.

If yes, how can I do that ? Thanks

EDIT: I found a workaroud like this

{% set vueBlocArchives_classes = [
'liste-archives',
'type-' ~ node.bundle|clean_class
]%}
{% set vuebloc_classes = [
'liste-vdl',
'type-' ~ node.bundle|clean_class
]%}
{% set vueBlocInfoAdmin_classes = [
'liste-info-admin',
'type-' ~ node.bundle|clean_class
]%}

then I do:

  {% if node.field_inserer_liste_viewfield is not empty and node.id == 77 %}
      <aside {{ vuebloc_attribute.addClass(vueBlocArchives_classes) }}>
        {{ content.field_inserer_liste_viewfield.0 }}
      </aside>
      {# Change classe selon le Nid - Ici nid de la page Info Admin #}
    {% elseif node.field_inserer_liste_viewfield is not empty and node.id == 125 %}
      <aside {{ vuebloc_attribute.addClass(vueBlocInfoAdmin_classes) }}>
        {{ content.field_inserer_liste_viewfield.0 }}
      </aside>
    {% else %}
      <aside {{ vuebloc_attribute.addClass(vuebloc_classes) }}>
        {{ content.field_inserer_liste_viewfield.0 }}
      </aside>
    {% endif %}

But I need to repeat the code so I thought about putting in a variable this part:

 {{ content.field_inserer_liste_viewfield.0 }}
          </aside>

@sakhunzai tip can be a better way, but how can I use it with my code ?

EDIT2: test to put static code in a variable but syntax errored

  {% set finAside = content.field_inserer_liste_viewfield.0 | render | trim "</aside>" %}
    {# Change classe selon Nid - Ici nid de la page archives #}
    {% if node.field_inserer_liste_viewfield is not empty and node.id == 77 %}
      <aside {{ vuebloc_attribute.addClass(vueBlocArchives_classes) }}>
        {{ finAside }}

Instead this work:

{% if node.field_inserer_liste_viewfield is not empty %}
      {# Change classe selon Nid - Ici nid de la page archives #}
      {% if node.field_inserer_liste_viewfield is not empty and node.id == 77 %}
        <aside {{ vuebloc_attribute.addClass(vueBlocArchives_classes) }}>

          {# Change classe selon le Nid - Ici nid de la page Info Admin #}
        {% elseif node.field_inserer_liste_viewfield is not empty and node.id == 125 %}
          <aside {{ vuebloc_attribute.addClass(vueBlocInfoAdmin_classes) }}>

          {% else %}
            <aside {{ vuebloc_attribute.addClass(vuebloc_classes) }}>
            {% endif %}
            {{ content.field_inserer_liste_viewfield.0 }}
          </aside>
        {% endif %}

Inspired by https://stackoverflow.com/a/42144678/2416915 I posted another question similar of these : Is it possible to use Twig addClass with condition?

It depends a little bit how the content of the div is rendered. If it is static content then it has nothing to do with twig. If the content is rendered by some kind of data delivered by twig then it is simple. Maybe should tell a little bit more — Frank B, Dec 16 '19 at 15:58

score 12 · Answer 1 · answered Dec 17 '19 at 07:20

12

Is that not as simple as:

<div class="{{ divContent=='' ? 'emptyClass' :'notEmptyClass' }}">
 {{divContent}}
</div>

answered Dec 17 '19 at 07:20

sakhunzai

13,900
23
98
159

Not if OP wanted to use drupal's method of adding classes. See [here](https://befused.com/drupal/twig-addclass) – DarkBee Dec 17 '19 at 07:52
I see even then it will still work, but using drupal conventions will be good though, Thanks for the link – sakhunzai Dec 17 '19 at 08:18
@DarkBee Your link doesn't give example about what I want to do ,not ? – webmaster pf Dec 18 '19 at 08:31
@webmasterpf of course not, it was a resource for sakhunzai – DarkBee Dec 18 '19 at 08:35
misunderstood ;) – webmaster pf Dec 18 '19 at 09:02

Conditional class with Twig on div element

1 Answers1