HTML in Contao Akkordeon-Überschriften erlauben

Anleitung für Contao 5.3

HTML innerhalb von Überschriften eines Accordion-Elements ist in Contao 5.3 standardmäßig nicht vorgesehen, da der Header-Inhalt aus Sicherheits- und Konsistenzgründen escaped ausgegeben und beim Speichern von HTML bereinigt wird. Für viele Anwendungsfälle ist es jedoch sinnvoll, Inline-HTML wie span, em, strong oder Icon-Markup in den Titel integrieren zu können – etwa für visuelle Akzente, semantische Hervorhebungen oder barrierearme Icon-Darstellung. Der folgende Ansatz zeigt, wie das Accordion-Template gezielt überschrieben und das entsprechende Feld im DCA so konfiguriert wird, dass HTML sowohl gespeichert als auch unverändert ausgegeben werden kann, ohne die Struktur des Elements zu beeinträchtigen.

Für individuelle Contao-Anpassungen und Template-Overrides kann die Agentur Zentral GmbH beauftragt werden.

Anfrage stellen

Zunächst wird ein Twig-Template-Override angelegt. Der Speicherort folgt der Contao-Konvention und liegt im Projektverzeichnis unter templates/content_element/accordion.html.twig. Die Basis bildet das Originaltemplate aus Contao 5.3.11 (@Contao/content_element/accordion.html.twig), wobei eine minimale, aber entscheidende Anpassung erfolgt: Der Header-Inhalt wird nicht mehr escaped, sondern mit dem Twig-Filter raw ausgegeben. Dies ermöglicht die Interpretation von Inline-HTML in der Überschrift. Die übrige Struktur – insbesondere die handorgel-spezifischen Klassen und Attribute sowie die Button-Ebene – bleibt unverändert, was die Kompatibilität mit dem vorhandenen JavaScript-Verhalten sicherstellt.

Code für templates/content_element/accordion.html.twig: 

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

{% block element_header %}
    {% set accordion_header_attributes = attrs()
        .addClass('handorgel__header')
        .mergeWith(accordion_header_attributes|default)
    %}
    <{{ element.header_tag }}{{ accordion_header_attributes }}>
        {% set accordion_header_button_attributes = attrs()
            .addClass('handorgel__header__button')
            .set('type', 'button')
            .mergeWith(accordion_header_button_attributes|default)
        %}
        <button{{ accordion_header_button_attributes }}>
            {{- element.header|raw -}}
        </button>
    </{{ element.header_tag }}>
{% endblock %}

Die einzige inhaltliche Änderung liegt in der Zeile mit {{- element.header|raw -}}. Während Contao im Standard den Header-Text escaped ausgibt, sorgt raw dafür, dass HTML-Inhalte direkt gerendert werden. Um zu vermeiden, dass Redakteursinhalte beim Speichern in der Datenbank bereinigt oder herausgefiltert werden, ist zusätzlich eine DCA-Anpassung notwendig. Dazu wird im Projekt eine Datei unter contao/dca/tl_content.php angelegt oder entsprechend erweitert. Es genügt, die Evaluation des Feldes sectionHeadline so zu konfigurieren, dass HTML erlaubt ist. Das Feld steuert die Überschrift des Accordion-Elements; mit allowHtml = true bleibt das eingegebene Inline-Markup erhalten.

Code für contao/dca/tl_content.php: 

<?php
// contao/dca/tl_content.php
$GLOBALS['TL_DCA']['tl_content']['fields']['sectionHeadline']['eval']['allowHtml'] = true;

Nach dem Anlegen der beiden Dateien empfiehlt sich das Leeren des Symfony Cache, damit sowohl das Template-Override als auch die DCA-Anpassung aktiv werden. Anschließend lässt sich in einem Accordion-Content-Element in der Überschrift beispielsweise ein Icon-Span oder eine Hervorhebung unterbringen, ohne die Button-Struktur zu verletzen.

Wichtig ist, in den Überschriften nur Inline-Elemente zu nutzen und Block-Elemente wie div zu vermeiden, da der Inhalt innerhalb eines Button-Elements liegt. Inline-Markup wie span, em, strong oder sup/sub ist unkritisch; auf semantisch sinnvolle Verwendung und das Vermeiden unnötiger Verschachtelungen sollte geachtet werden.

Sollte das HTML trotz der Änderungen weiterhin escaped erscheinen, ist zu prüfen, ob das eigene Template tatsächlich greift. Der Dateipfad muss exakt stimmen (templates/content_element/accordion.html.twig), Caches müssen geleert werden und ggf. ist im Backend zu kontrollieren, ob ein anderes Template erzwungen wird.

Mit dieser minimalinvasiven Kombination aus Template-Override und DCA-Konfiguration wird HTML in Accordion-Überschriften unter Contao 5.3 zuverlässig ermöglicht – updatefreundlich, kompatibel zur bestehenden handorgel-Integration und flexibel genug, um gängige Inline-Auszeichnungen und Icon-Markup ohne zusätzliche Erweiterungen zu unterstützen.

Zurück zur Blog-Übersicht