Veröffentlicht am
Das TYPO3-Backend bietet bei Inhaltselementen standardmäßig im Reiter „Erscheinungsbild“ das Dropdown „Layout“. Hier zeigen wir Ihnen, wie Sie diese Option ganz einfach in Verbindung mit fluid_styled_content nutzen können.
1. Eigene Templates anlegen
In fluid_styled_content wird die Ausgabe der Inhaltselemente über Fluid-Templates geregelt. Wir müssen also ein eigenes Template anlegen, und damit wir nicht die Originale überschreiben, legen wir uns einen Ordner an, in dem wir das anzupassende Template speichern. Ein guter Tipp ist, dafür eine eigene Extension zu erstellen – der Einfachheit halber nehmen wir in diesem Beispiel aber an, dass Sie einen Ordner in /fileadmin/ anlegen, z.B. /fileadmin/Resources/fluid_styled_content/Templates/.
Diesen Pfad müssen wir fluid_styled_content noch mitteilen. Dafür schreiben wir ins TypoScript-Setup unserer Root-Seite:
lib.fluidContent.templateRootPaths.30 = fileadmin/Resources/fluid_styled_content/Templates/
2. Das Template anpassen
Im Verzeichnis /typo3/sysext/fluid_styled_content/Resources/Private/Templates/ finden Sie die Templates für die einzelnen Inhaltselement-Typen. In unserem Beispiel wollen wir das Element „Text und Medien“ ändern. Also kopieren wir die Datei Textmedia.html in unseren neu erstellten Ordner und editieren sie. Wie genau, ist natürlich Geschmackssache bzw. abhängig von den spezifischen Anforderungen, aber eine Variante wäre, das umschließende div in Zeile 2 anzupassen.
Original:
<div id="c{data.uid}">
Neu:
<div id="c{data.uid}" class="ce-container
{f:if(condition:'{data.layout}==1',then:'hilight-light')}
{f:if(condition:'{data.layout}==2',then:'hilight-strong')}">
In diesem Fall wird in jedem Fall die Klasse „ce-container“ zugewiesen, die nutzen wir für allgemeine Styles wie z.B. Abstände zwischen Inhaltselementen. Abhängig von der gewählten Layout-Option wird außerdem die Klasse „hilight-light“ oder „hilight-strong“ zugefügt. Diese müssen dann natürlich noch per CSS gestyled werden.
3. Layout-Felder im Backend umbenennen
Damit die Layout-Optionen im Backend nicht einfach „Layout 1“, „Layout 2“ etc. heißen, sondern sprechende Namen haben, fügen wir ins TSConfig der Root-Seite noch folgendes ein:
TCEFORM {
tt_content {
layout {
altLabels {
1 = leichte Hervorhebung
2 = starke Hervorhebung
}
removeItems = 3
}
}
}
Mit altLabels wird eine neue Bezeichnung im Backend gesetzt, mit removeItems wird die Option „Layout 3“ entfernt, die wir in unserem Beispiel nicht benötigen.
Fertig!
Getestet mit: TYPO3 7.6.x