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.

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 Datenbank­feld anlegen und konfigurieren. Wie das geht, wird in der TYPO3-Dokumentation erläutert.

Ü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

$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,
';

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

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

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

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