Twig: Beliebige Klasse (mit und ohne Variable) in CE Wrapper Tags einfügen

[ph!L]

In meiner tl_content gibt es Spalten, die die Breite des Contents sowie padding und margin nach oben und unten steuern sollen.

Um diese ALLEN Content Elementen in die Wrapper Klasse zu schreiben, kann man _base.html.twig wie folgt erweitern:

{% extends "@Contao/content_element/_base.html.twig" %}

{% block attributes %}    
    {% set attributes = attrs()
        .mergeWith(attributes|default)
    %}
    {% if data.marginTop is not empty %}
        {% set attributes = attributes.addClass('u-margin-vertical-top u-margin-vertical-top--' ~ data.marginTop) %}
    {% endif %}
    {% if data.marginBottom is not empty %}
        {% set attributes = attributes.addClass('u-margin-vertical-bottom u-margin-vertical-bottom--' ~ data.marginBottom) %}
    {% endif %}
    {% if data.contentWidth is not empty %}
        {% set attributes = attributes.addClass(data.contentWidth) %}
    {% endif %}
    {% if data.paddingTop is not empty %}
        {% set attributes = attributes.addClass('u-padding-vertical-top u-padding-vertical-top--' ~ data.paddingTop) %}
    {% endif %}
    {% if data.paddingBottom is not empty %}
        {% set attributes = attributes.addClass('u-padding-vertical-bottom u-padding-vertical-bottom--' ~ data.paddingBottom) %}
    {% endif %}
    
    
    {{ parent() }}
{% endblock %} 

Achtung: Zumindest in Contao 5.3.17 gibt es einen Bug, der das Template nicht erkennt, wenn es innerhalb eines Themes liegt.

[Spooky]

Du musst nicht jedes mal {% set attributes %} schreiben - einmal die Variable definieren reicht

[ph!L]

Ich weiß nicht wie du das meinst. Habe nun verschiedenste Varianten ausprobiert, aber ohne das set Attributes klappt es nicht.
Entweder produziert das Template einen Fehler, oder es wird der String als Attribut geschrieben, aber nicht in die Klasse.

{% block attributes %}    
    {% set attributes = attrs()
        .mergeWith(attributes|default)
    %}
    {% if data.marginTop is not empty %}
        .addClass('u-margin-vertical-top u-margin-vertical-top--' ~ data.marginTop)
    {% endif %}
    
    
    {{ parent() }}
{% endblock %} 

Führt zu:

<div .addclass('u-margin-vertical-top="" u-margin-vertical-top--'="" ~="" data.margintop)="" class="content-gallery content-gallery--cols-3">

[Spooky]

Ja, sorry, muss wohl doch so sein

[ph!L]

Da das Headline Element keinen Wrapper hat, muss man die headline.html.twig auch noch anpassen. Dort gehen die Attributes nicht in den Block attributes, sondern in den Block wrapper:

{% extends "@Contao/content_element/headline.html.twig" %}

{% block wrapper %}    
    {% set attributes = attrs()
        .mergeWith(attributes|default)
    %}
    {% if data.marginTop is not empty %}
        {% set attributes = attributes.addClass('u-margin-vertical-top u-margin-vertical-top--' ~ data.marginTop) %}
    {% endif %}
    {% if data.marginBottom is not empty %}
        {% set attributes = attributes.addClass('u-margin-vertical-bottom u-margin-vertical-bottom--' ~ data.marginBottom) %}
    {% endif %}
    {% if data.contentWidth is not empty %}
        {% set attributes = attributes.addClass(data.contentWidth) %}
    {% endif %}
    {% if data.paddingTop is not empty %}
        {% set attributes = attributes.addClass('u-padding-vertical-top u-padding-vertical-top--' ~ data.paddingTop) %}
    {% endif %}
    {% if data.paddingBottom is not empty %}
        {% set attributes = attributes.addClass('u-padding-vertical-bottom u-padding-vertical-bottom--' ~ data.paddingBottom) %}
    {% endif %}
    
    
    {{ parent() }}
{% endblock %} 

[Spooky]

Du kannst auch die headline_attributes anpassen.