Contao 5.3 Accordion HTML in Überschirften erlauben

[Schnippel]

Hi Leute,

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

[zoglo]

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.

[mlweb]

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

[Schnippel]

Gerne mit Beispielen und Screenshots.

Unbenannt-3.jpg

Das HTML wir nicht umgesetzt..

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

In den Einstellungen:

Unbenannt-5.jpg


in der contao/dca/tl_content.php

<?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:

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

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

[mlweb]

Symfony Cache gelehrt?

[Dublay]

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

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

<?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?

[Spooky]

Welche Überschrift meinst du in diesem Fall?

[mlweb]

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

[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.

[Dublay]

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

<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?

[derRenner]

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 

// 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:

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

[Dublay]

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?

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

[Spooky]

Das DCA musst du auch anpassen.

[derRenner]

Vielleicht sieht ja jemand einen Fehler?

...

{% block element %}

...

das dürfte zuviel sein

[Dublay]

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

[WebMarco]

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.

[WebMarco]

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

Template anlegen: 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 %}

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

// 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

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

bereits vorhanden sein.

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