Avoid the same statement in Twig template

Question

I have

<div class="{{element.type == 'cover' ? 'cover-full' : 'fixed-width'}}">
    <div class="element 
        {% if element.type == 'text' %}
           element-text
        {% elseif element.type =='image' %}
           element-image
        {% endif %}">

        {% if element.type == 'text' %}
           ...
        {% elseif element.type == 'image' %}
           ...
        {% endif %}
   </div>

As you can see I have to make the same if condition multiple times. How can avoid to repeat every time the condition? I'm pretty new to Twig templating.

Answer 1

You will often have abit redundancy. But IMO it is a better practice to repeat HTML blocks instead of twig.

{% if element.type == 'text' %}
    <div class="element element-text">
        content
    </div>
{% elseif element.type =='image' %}
     <div class="element element-image">
        content
    </div>
{% else %}
    {% include 'snippet.html' %}
{% endif %}

1. You have more valid and more readable HTML
2. If you change a condition you only have to change it one time
3. You could use {% include 'snippet.html' %} to reduce redundancy in HTML blocks