Contao 5.3 Accordion HTML in Überschirften erlauben

Hi Leute,

wie lassen sich in der neuen Contao 5.3 Accordion-Version HTML in der Bereichsüberschrift eines Accordions umsetzen?

Beim Lesen deiner Nachricht muss ich schon anfangen zu überlegen was du meinst.
Magst du mal genau erklären was du vorhast? Gerne mit Beispielen und Screenshots.

Wenn ich Dich richtig verstehe, dann dürfte Dir prinzipiell der Beitrag weiterhelfen https://contao-academy.de/blog/html-...iften-zulassen.

Zitat:

---

Gerne mit Beispielen und Screenshots.

---

Anhang 27222

Das HTML wir nicht umgesetzt..

Zitat:

---

Wenn ich Dich richtig verstehe, dann dürfte Dir prinzipiell der Beitrag weiterhelfen https://contao-academy.de/blog/html-...iften-zulassen.

---

In den Einstellungen:

Anhang 27223


in der contao/dca/tl_content.php

PHP-Code:

---

<?php

/* HTML in Überschriften zulassen */
$GLOBALS['TL_DCA']['tl_content']['fields']['headline']['eval']['allowHtml'] = true;

---

und im Template _headline.html.twig wurde das hier eingefügt:

PHP-Code:

---

{% block headline_inner %}     
    {{ headline.text|insert_tag_raw|raw }}
{% endblock %} 


---

Aber in den Inhaltselement Accordion > Bereichsüberschriften wird das HTML in Überschriften nicht umgesetzt..

Symfony Cache gelehrt?

Ich klinke mich hier mal ein, da es scheinbar nicht wie funktioniert. Auch ich würde gerne html, z. B. <span> in der Überschrift des Accordions (Verschiedenes -> Accordion) nutzen.

Contao 5.3.54

Unter Layout -> Templates das Template _headline.html.twig

Code:

---

{% use "@Contao/component/_headline.html.twig" %}

{# Der Block headline_inner wird um die nötigen Filter ergänzt. #}
{% block headline_inner %}   
    {{ headline.text|insert_tag_raw|raw }}
{% endblock %}

---

Ordner mit Datei erstellt /contao/dca/tl_content.php:

Code:

---

<?php

/* HTML in Überschriften */
$GLOBALS['TL_DCA']['tl_content']['fields']['headline']['eval']['allowHtml'] = true;

---

Symphony Cache erneuert. Accordion-Element neu angelegt. <span>test</span> wird im Frontend mit angezeigt.
Bei "normalen" Überschriften funktioniert es allerdings.

Wo ist der Fehler?

Welche Überschrift meinst du in diesem Fall?

Falls Du den Toggler des Accordions meinst, schaut mal in Deinen Code. Standardmäßig sind das keine Überschriften.

Wenn du die "Bereichsüberschrift" meinst, dann wäre das im DCA das Feld sectionHeadline und nicht headline.

Und dazu musst du dann den element_header Block im Template content_element/accordion.html.twig anpassen, und nicht das component/_headline.html.twig Template.

Zitat:

---

Zitat von Spooky

Wenn du die "Bereichsüberschrift" meinst, dann wäre das im DCA das Feld sectionHeadline und nicht headline.

Und dazu musst du dann den element_header Block im Template content_element/accordion.html.twig anpassen, und nicht das component/_headline.html.twig Template.

---

Ja genau, ich meine die Bereichsüberschrift. Ausgegeben wird das als h3-button ->

Code:

---

<h3 class="handorgel__header" id="handorgel1-fold1-header">
<button class="handorgel__header__button" type="button" aria-controls="handorgel1-fold1-content" aria-expanded="false" aria-disabled="false">Bereichsüberschrift</button>
</h3>

---

Kannst Du mir bitte sagen, was in das Template gehört, damit er das entsprechend erlaubt?

Ich weiss nicht, ob das ein korrekter Weg ist ... aber mit einem Twig-Filter lässt sich dies ebenfalls lösen:

Twig-Filter erstellen:

PHP-Code:

---

<?php 

// src/Twig/HtmlDecodeExtension.php

namespace App\Twig;

use Twig\Extension\AbstractExtension;
use Twig\TwigFilter;

class HtmlDecodeExtension extends AbstractExtension
{
    public function getFilters(): array
    {
        return [
            new TwigFilter('html_decode', fn ($s) => html_entity_decode((string) $s, ENT_QUOTES | ENT_HTML5, 'UTF-8')),
        ];
    }
}

---

und das Accordion-Twig anpassen:

Code:

---

{% 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|html_decode|raw -}}
        </button>
    </{{ element.header_tag }}>
{% endblock %}

---

wobei hier dann bei {{- element.header|html_decode|raw -}} der vorher erstellt Filter Anwendung findet.

Zitat:

---

Zitat von Spooky

Wenn du die "Bereichsüberschrift" meinst, dann wäre das im DCA das Feld sectionHeadline und nicht headline.

Und dazu musst du dann den element_header Block im Template content_element/accordion.html.twig anpassen, und nicht das component/_headline.html.twig Template.

---

Danke DerRenner, aber ich denke es muss auch direkt gehen. So ist mein Ansatz, der will aber nicht greifen. Vielleicht sieht ja jemand einen Fehler?

Code:

---

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

{% block element %}

{# Nur die Header-Ausgabe überschreiben #}
{% 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 %}

---

Das DCA musst du auch anpassen.

Zitat:

---

Zitat von Dublay

Vielleicht sieht ja jemand einen Fehler?

---

Code:

---

...

{% block element %}

...

---

das dürfte zuviel sein :D

Das DCA hatte ich tatsächlich vergessen. Jetzt ist HTML im Accordion-Trigger erlaubt. Danke Euch!

Zitat:

---

Zitat von Dublay

Das DCA hatte ich tatsächlich vergessen.

---

Magst du auch noch mitteilen, wie genau diese DCA-Anpassung durchgeführt wurde. Also, welche Datei in contao/dca anlegen und welchen Code dort eingeben. Vielen Dank. Dann ist die Hilfe hier rund und abschließend.

Nach ein wenig Recherche bin ich nun fündig geworden. Zusammenfassend die gesamte Lösung erklärt:

Template anlegen: content_element/accordion.html.twig

HTML-Code:

---

{% 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 %}

---

Hier wurde lediglich folgende Änderung vorgenommen: {{- element.header|raw -}}
Der Rest etspricht der Vorlage: https://github.com/contao/contao/blo...dion.html.twig

Im Anschluss /contao/dca/tl_content.php anlegen bzw. ergänzen:

PHP-Code:

---

<?php

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

---

Sofern die Anpassung für sonstige Überschriften bereits vorgenommen wurde, so müsste die Zeile

PHP-Code:

---

$GLOBALS['TL_DCA']['tl_content']['fields']['headline']['eval']['allowHtml'] = true; 


---

bereits vorhanden sein.

Das sectionHeadline konnte ich mir aus der SQL-Datenbank raussuchen.