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:
- Eine Palette projektspezifischer Felder (wie oben erklärt)
- Eine angepasste Palette für den Header des Containers
- 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/
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
$GLOBALS['TCA']['tt_content']['palettes'] += [ 'containerSettings' => [ 'label' => 'Container Settings', 'showitem' => ' equal_height, ', ], 'containerHeader' => [ 'label' => 'LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:palette.header', 'showitem' => ' header;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:header_formlabel, --linebreak--, header_layout;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:header_layout_formlabel, header_position;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:header_position_formlabel, --linebreak--, header_link;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:header_link_formlabel ', ], 'containerFrames' => [ 'label' => 'LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:palette.frames', 'showitem' => ' space_before_class;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:space_before_class_formlabel, space_after_class;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:space_after_class_formlabel, ', ], ]; $GLOBALS['TCA']['tt_content']['types']['container_2_columns']['showitem'] = ' --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:general, --palette--;;general, --palette--;;containerHeader, --palette--;;containerSettings, --div--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:tabs.appearance, --palette--;;containerFrames, --palette--;;appearanceLinks, --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:language, --palette--;;language, --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:access, --palette--;;hidden, --palette--;;access, --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:notes, rowDescription, --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:extended, '; |
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.
Im folgenden Beispiel erlauben wir fünf CTypes innerhalb des zweispaltigen Containers.
|
1 2 3 |
$allowedCTypes = 'text, textmedia, image, accordion, texticon'; $GLOBALS['TCA']['tt_content']['containerConfiguration']['container_2_columns']['grid']['0']['0']['allowed']['CType'] = $allowedCTypes; $GLOBALS['TCA']['tt_content']['containerConfiguration']['container_2_columns']['grid']['0']['1']['allowed']['CType'] = $allowedCTypes; |
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.
|
1 2 3 4 5 6 7 8 |
.contentcontainer[data-container-identifier="container_2_columns_right"] { @include media-breakpoint-up('md') { grid-template-columns: 1fr 2fr; } @include media-breakpoint-up('lg') { grid-template-columns: 1fr 3fr; } } |
Wir haben in unserem Projekt die “Fraction”-Werte angepasst, weil uns das Größenverhältnis der Spalten zu deutlich erschien.
|
1 2 3 4 5 6 7 8 9 |
.contentcontainer[data-container-identifier="container_2_columns_right"] { @include media-breakpoint-up("md") { grid-template-columns: 2fr 3fr; } @include media-breakpoint-up("lg") { grid-template-columns: 3fr 5fr; } } |
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.
- Profile:
