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://mcmap.net/q/1769665/-twig-how-to-check-the-inner-html-content-of-a-field I posted another question similar of these : Is it possible to use Twig addClass with condition?

Recrystallize

pure in twig or with drupal? – Sicklebill

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 – Great

Answer 1

Is that not as simple as:

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

Nevlin

Not if OP wanted to use drupal's method of adding classes. See here – Sicklebill

I see even then it will still work, but using drupal conventions will be good though, Thanks for the link – Nevlin

@Sicklebill Your link doesn't give example about what I want to do ,not ? – Recrystallize

@webmasterpf of course not, it was a resource for sakhunzai – Sicklebill

misunderstood ;) – Recrystallize