01.05.2023 | TYPO3, TYPO3 Schnipsel
Individuelle Container mit der Extension container
Die TYPO3 Extension gridelements hat uns eine ganze Weile zuverlässig begleitet und die Arbeit der Redakteure erleichtert. Seit TYPO3 11 jedoch empfiehlt sich ein Wechsel auf die Extension container (EXT:container). Dazu gibt es zudem eine wunderbare Extension zur Migration, die am Ende des Beitrags verlinkt ist.
Die Erstellung neuer Templates wird dann natürlich unmittelbar das nächste Thema sein. Von Haus aus, bring die Extension dich gängisten Container mit. In der Dokumentation von b13 ist alles wunderbar beschrieben und nachfolgend etwas verkürzt und kompakt dargestellt. Zunächst erweitern wir unser Sitepackage und ergänzen es um eine weitere TCA Konfiguration in Configuration/TCA/Overrides/tt_content.php mit dem neuen Inhaltselement. Ein passendes, optionales, Icon kann im Sitepackage abgelegt werden.
Der Inhalt von tt_content.php
// 2 col 40:60
\TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\B13\Container\Tca\Registry::class)->configureContainer(
(
new \B13\Container\Tca\ContainerConfiguration(
'b13-2cols-40-60', // CType
'2 Column Container 40:60', // label
'Zwei spaltiger Container 40:60', // description
[
[
['name' => 'left side', 'colPos' => 201],
['name' => 'right side', 'colPos' => 202]
]
]
)
)
->setIcon('EXT:sitepackage/Resources/Public/Icons/2col6040.png')
);
?>
Im Anschluss wird das Typoscript ergänzt
setup.typoscript
// b13-2cols-40-60
tt_content.b13-2cols-40-60 < lib.contentElement
tt_content.b13-2cols-40-60 {
templateName = 2Cols4060
templateRootPaths {
10 = EXT:sitepackage/Resources/Private/Templates/Container
}
dataProcessing {
201 = B13\Container\DataProcessing\ContainerProcessor
201 {
colPos = 201
as = children_201
}
202 = B13\Container\DataProcessing\ContainerProcessor
202 {
colPos = 202
as = children_202
}
}
}
Zu guter letzt braucht es dann noch ein Template.
Das Template – 2Cols4060.html
<div class="container">
<div class="row">
<div class="col-md-4 col-12">
<f:for each="{children_201}" as="record">
<f:format.raw>
{record.renderedContent}
</f:format.raw>
</f:for>
</div>
<div class="col-md-8 col-12">
<f:for each="{children_202}" as="record">
<f:format.raw>
{record.renderedContent}
</f:format.raw>
</f:for>
</div>
</div> <!-- ./row -->
</div> <!-- ./container -->
Den Backend Cache noch leeren und das neue Inhaltselement steht uns zur Verfügung.
Mehr ist es an dieser Stelle nicht. Weiterführende Links gibt es direkt nachfolgend. Auch zu der Eingangs erwähnten Extension zur Migration, die ich an dieser Stelle sehr empfehlen kann. Hier lohnt es sich die umzustellende Seite in eine DDEV Umgebung zu nehmen um unerwünschte Effekte auszuschließen.
Links: