Container-Elemente sinnvoll erweitern

Teil drei unserer Reihe zur Gridelements-Migration. Endlich haben wir Code-Beispiele für euch! Wir zeigen euch, wie wir neue Backend-Felder zielgerichtet zuweisen und Container-Elemente für unsere Zwecke erweitern. Außerdem gibt es Tipps zur Erweiterung der Container im aktuellen Bootstrap Package (Version 12).

Was kein Thema sein wird: die Grundkonfiguration von Container-Elementen. Das haben die Kollegen von b13 schon perfekt in ihrem Blog erklärt.


Weitere Teile:


Wohin mit dem Backend-Feld?

Ob wir nun die Flexform-Settings alter Gridelements migrieren müssen oder neue Funktionen bereitstellen: irgendwo muss ein neues Feld angelegt werden. Gehört das nun in das Container-Element oder das einzelne Inhaltselement?

Wir haben hierfür eine kleine Faustregel aufgestellt:

Konfigurationen werden …

  • … in Containern bereitgestellt,
    falls sie deren Layout betreffen
    z. B.: Spalten-Abstände, Breakpoints
  • … in Inhaltselementen bereitgestellt,
    falls sie für das Aussehen des Inhalts verantwortlich sind
    z. B.: Hintergrundfarben, Animationen

Die Inhalte eures Containers sollen einen Rahmen erhalten? Dann sollte das in den Inhaltselementen selbst gepflegt werden können, etwa über eine Frame-Klasse (oder ein eigenes Auswahlfeld).

Wenn es dann um die Ausrichtung der Elemente innerhalb des Containers geht, könnt ihr entsprechende Optionen im Container bereitstellen. Zum Beispiel: eine horizontale Zentrierung – oder Equal-Height-Columns, damit alle Rahmen dieselbe Höhe erreichen.

Notiz am Rande: Bitte nie bestehende Felder zweckentfremden, sondern immer ein neues Datenbankfeld anlegen und konfigurieren. Wie das geht, wird in der TYPO3-Dokumentation erläutert.

Eigene Feld-Paletten für Container

Über das Table Configuration Array (TCA) von TYPO3 können wir die Backend-Felder konfigurieren. Die Felder können einem Element einzeln oder als Gruppe (“Palette”) zugewiesen werden.

In unseren letzten Projekten haben wir die Container-Elemente meist um drei eigene TCA-Paletten ergänzt:

  1. Eine Palette projektspezifischer Felder (wie oben erklärt)
  2. Eine angepasste Palette für den Header des Containers
  3. Eine angepasste Frames-Palette

Per Default wird der Header eines Containers nicht im Frontend gerendert. Wir halten dies aber in vielen Projekten für sinnvoll. Daher geben wir zusätzliche Felder für Überschrift-Typ, Ausrichtung und Link aus.

Die Standard-Palette “Frames” enthält die Felder für Abstand davor/danach, Layout und Frame-Klassen. Da wir Container üblicherweise nicht durch Layouts und Frames erweitern, besitzt unsere reduzierte TCA-Palette nur die Felder für Abstände.

Im ersten Schritt definieren wir die neuen TCA-Paletten, im Anschluss werden sie mit “showItem” dem CType des Containers zugewiesen.

EXT:sitepackage/Configuration/TCA/Overrides/container.php

Container im Bootstrap Package

Das Bootstrap Package beinhaltet ab Version 12 (TYPO3 10.4 bis 11.5) sechs vorkonfigurierte Container. Die Konfigurationen werden nur geladen, wenn EXT:container im Projekt installiert ist.

Weitere Konfigurationen für diese Container könnt ihr nicht nachträglich über “configureContainer()” ergänzen. Stattdessen benötigt ihr TCA-Overrides. Das richtige Array könnt ihr im Backend-Modul “Configuration” ermitteln.

Screenshot TYPO3-Backend
Backend-Modul „Configuration“: Das TCA der Container-Elemente findet ihr unterhalb von „tt_content“.

Im folgenden Beispiel erlauben wir fünf CTypes innerhalb des zweispaltigen Containers.

Ein Hinweis an die Frontend-Entwickler: Die Container verwenden nicht das Bootstrap-Grid, sondern ein eigenes CSS-Grid, deren Ausrichtung anhand von Data-Attributen definiert wird.

Wir haben in unserem Projekt die “Fraction”-Werte angepasst, weil uns das Größenverhältnis der Spalten zu deutlich erschien.

Im vierten und letzten Teil geht es um die Migration bestehender Datensätze.

Bildquellen

  • TCA-Konfiguration im Backend: Sebastian Klein, MFC
  • Beitragsbild „Backend-Felder“: Sebastian Klein, MFC

Über Sebastian Klein

Steht irgendwo zwischen Front- und Backend. Mit einem Faible für Usability und Dokumentation. Immer auf der Suche nach Good Practices.

Homepage: https://www.sebkln.de/

      Profile:
    • twitter

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.