Download the PHP package berecont/contao-html-attributes-bundle without Composer
On this page you can find all versions of the php package berecont/contao-html-attributes-bundle. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download berecont/contao-html-attributes-bundle
More information about berecont/contao-html-attributes-bundle
Files in berecont/contao-html-attributes-bundle
Package contao-html-attributes-bundle
Short Description Fügt ausgewählten Contao-Inhaltselementen konfigurierbare benutzerdefinierte HTML-Attribute hinzu.
License MIT
Informations about the package contao-html-attributes-bundle
Contao HTML Attributes Bundle
Mit dem Contao HTML Attributes Bundle können Inhaltselemente in Contao ab Version 5.7 um zusätzliche HTML-Attribute ergänzt werden.
Die Attribute werden komfortabel über den rowWizard im Bereich Experteneinstellungen gepflegt und am äusseren Wrapper des Inhaltselements ausgegeben.
Anwendungsfälle sind beispielsweise:
Auch Insert-Tags können in den Attributwerten verwendet werden.
Voraussetzungen
- PHP
^8.3 || ^8.4 - Contao
^5.7
Installation
Composer
Das Bundle wird als Composer-Paket in einer Contao-Installation eingebunden. Nach der Installation bzw. nach Änderungen am Bundle sollte der Anwendungscache geleert werden:
Contao Manager
Unter Pakete nach berecont/contao-html-attributes-bundle suchen, auswählen und installieren.
Verwendung
Für freigeschaltete Inhaltselemente erscheint unter Experteneinstellungen neben dem Contao-Feld CSS-ID/Klasse das zusätzliche Feld:
Zusätzliche HTML-Attribute
Die Eingabe erfolgt zeilenweise mit zwei Feldern - zum Beispiel:
| Attribut | Wert |
|---|---|
data-controller |
timeline |
data-animation |
fade |
aria-label |
Timeline {{date::Y}} |
role |
region |
Daraus wird beispielsweise:
Konfiguration der Inhaltselemente
Standardmässig sind keine Felder für Contao-Inhaltselemente aktiviert.
Vorbereitet (auskommentiert) in der src/BerecontContaoHtmlAttributesBundle.php sind jedoch:
Inhaltselemente werden in der Projektkonfiguration unter config/config.yaml freigeschalten.
Beispiel:
Die Liste ist eine Positivliste. Das Feld wird ausschliesslich bei den dort eingetragenen Inhaltselement-Typen angezeigt.
Dadurch erhalten neu installierte oder anderweitig registrierte Inhaltselemente nicht automatisch zusätzliche HTML-Attribute.
Hinweis: Sollte in der Contao-Installation noch keine
config/config.yamlvorhanden sein, so muss diese manuell angelegt werden.
Eigene Inhaltselemente und RSCE
Die Konfiguration ist nicht auf Core-Inhaltselemente beschränkt. Es kann grundsätzlich jeder vorhandene tl_content.type eingetragen werden.
Beispiel mit einem RockSolid Custom Element:
Damit kann das Feld auch gezielt für eigene Content Elements oder Inhaltselemente anderer Extensions aktiviert werden.
Insert-Tags
Insert-Tags sind in den Werten der HTML-Attribute möglich.
Beispiel:
| Attribut | Wert |
|---|---|
aria-label |
Wir schreiben das Jahr {{date::Y}} |
Im Frontend wird der Insert-Tag erst beim Rendern ersetzt:
Der ursprüngliche Insert-Tag bleibt dabei in den gespeicherten Daten erhalten.
Klassen
Das Attribut class darf zusätzlich verwendet werden.
Vorhandene Klassen des Contao-Inhaltselements werden dabei nicht überschrieben, sondern mit den zusätzlichen Klassen zusammengeführt.
Beispiel:
Contao CSS-ID/Klasse:
Zusätzliches HTML-Attribut:
| Attribut | Wert |
|---|---|
class |
btn |
Kann beispielsweise ergeben:
ID
Das Attribut id ist über Zusätzliche HTML-Attribute bewusst nicht erlaubt.
Für die HTML-ID soll das bereits vorhandene Contao-Feld CSS-ID/Klasse verwendet werden.
Beispiel:
ergibt:
Ein zusätzlich eingetragenes Attribut wie
| Attribut | Wert |
|---|---|
id |
andere-id |
wird ignoriert und überschreibt die CSS-ID nicht.
Event-Handler
Inline-JavaScript-Eventhandler sind aus Sicherheits- und Wartbarkeitsgründen nicht erlaubt.
Beispiele:
Solche Attribute werden bei der Frontend-Ausgabe verworfen.
Für JavaScript-Logik sollten stattdessen beispielsweise data-*-Attribute verwendet und anschliessend über externes JavaScript oder einen Controller verarbeitet werden:
Leere und boolesche Attribute
Attribute dürfen einen leeren Wert besitzen.
Beispiel:
| Attribut | Wert |
|---|
hidden
Die Ausgabe kann dann beispielsweise lauten:
Das ist gültiges HTML. Bei booleschen Attributen wie hidden ist das Vorhandensein des Attributes entscheidend.
Unterstützte Attribute
Das Bundle ist bewusst nicht auf data-* beschränkt.
Mögliche Beispiele sind:
Grundsätzlich werden gültige HTML-Attributnamen akzeptiert.
Ausgenommen sind insbesondere:
sowie andere mit on beginnende Event-Handler.
Speicherung
htmlAttributes ist ein virtuelles DCA-Feld.
Es wird keine zusätzliche Datenbankspalte in tl_content benötigt.
Unter Contao 5.7 werden die Daten über jsonData des Inhaltselements gespeichert.
Template-Ausgabe
Die zusätzlichen Attribute werden zentral am Wrapper der Content Elements ergänzt.
Das Bundle erweitert dazu:
Dadurch müssen die einzelnen Templates der freigeschalteten Inhaltselemente normalerweise nicht angepasst werden.
Beispielausgabe:
Beispiel Backend
Hinweise
Das Bundle kann Attribute nur an Inhaltselementen ausgeben, die einen entsprechenden HTML-Wrapper über das Contao Content-Element-Template besitzen.
Bei speziellen Inhaltselementen oder Extensions mit vollständig eigener Template-Struktur kann daher eine gesonderte Integration notwendig sein.
Lizenz
Siehe LICENSE.
All versions of contao-html-attributes-bundle with dependencies
contao/core-bundle Version ^5.7
contao/manager-bundle Version ^5.7