Das mit den Fluidtemplates ist zweifellos eine schöne Sache – hat man sich daran gewöhnt, weiß man sie wertzuschätzen. Allerdings ist es schon etwas tricky mit den altbekannten Rahmen (alt: section_frames, neu: frame_class) und Layouts (layout) – zumal sich das von Version 7.6 zu Version 8.7 erneut nicht unwesentlich geändert hat.
Hier ein paar Tipps für den Umgang damit in Version 8.7.
Zunächst holt man sich die „Rahmendatei“ Default.html aus /typo3/sysext/fluid_styled_content/Resources/Private/Layouts ins fileadmin Verzeichnis und macht das dem System per TypoScript bekannt:
lib.contentElement.layoutRootPaths.10 = fileadmin/template/fluid/Layouts |
Ist die Datei erst einmal sozusagen im eigenen Zugriff, kann man sich die Standard Inhaltselemente genauer ansehen.
In jedem Datensatz unter „Erscheinungsbild“ finden wir eine Auswahl für „Layout“ und „Frame“. Im Prinzip machen beide das gleiche, nämlich den Rahmen um das Content Element mit einer bestimmten Klasse (bzw. mehreren Klassen) zu versehen. In Version 7.6 war die „Frame“ Auswahl verschwunden und die „layout“ Auswahl zwar vorhanden, jedoch passierte standardmäßig nichts auch wenn man eine Auswahl getroffen hatte. Das musste man selbst in den Templates definieren.
In TYPO3 8.7 sind die aus CSS_styled_content bekannten Klassen unter der „Frame“ Select-Box wieder vorhanden und auch eine Auswahl bei Layout versieht das Element mit einer bestimmten Klasse. Die Auswahl unter „Frame“ vergibt nicht nur eine Klasse, sondern sorgt per CSS dafür, dass das getan wird, was der Klassennamen aussagt, z.B. eine Linie vor oder nach dem Datensatz zu generieren (sofern das optionale statische Template Fluid Content Elements CSS eingebunden ist).
Will man mehr als diese Standards muss man folgendermaßen vorgehen:
Eigene Layout und Frame Klassen definieren und verwenden
Konfiguriert wird die Anzeige im Page TSConfig, die Ausgabe in der Default.html (s.o.).
Der folgende Beispiel Code benennt die 3 Layout Klassen um (auskommentiert ist eine weitere hinzugefügt), deaktiviert die Standard Frame Klassen und fügt zwei eigene hinzu:
TCEFORM { tt_content { layout { #addItems { #primary = weiße Box mit Rand #} altLabels { 1 = Intro 2 = Box grün 3 = Box rot } } frame_class { removeItems = ruler-before, ruler-after, indent, indent-left, indent-right addItems { hintergrundbild-1 = Hintergrund 1 hintergrundbild-2 = Hintergrund 2 } } } } |
Mit den Klassen kann man im Fluidtemplate auf zweierlei Weise umgehen: man lässt sich den Klassennamen direkt ausgeben oder man setzt eine Condition. Letzteres, die Condition, kann man wiederum auf zwei verschiedene Arten verwenden.
Klassenname im Fluidtemplate ausgeben
Das geht sehr einfach mit:
{data.frame_class} bzw. {data.layout} |
Wenn man sich die Default.html anschaut, sieht man auch, wo das hin muss. Wichtig zu wissen ist, dass der Klassenname im TSConfig Code definiert wird (identisch ist mit dem „key“ – s. unten stehenden Link), in unserem Beispiel also für den Frame: hintergrundbild-1 bzw. hintergrundbild-2. Die Standard keys, also auch die Klassennamen für das Layout sind 1, 2 und 3.
Klassenname als Condition im Fluidtemplate
Ebenfalls einfach, wenn man weiß wie:
class="{f:if(condition:'{data.layout}==1',then:'class1 class2',else:'class3')}" |
Das else ist natürlich optional, kann aber nützlich sein. Wie man sieht kann man beliebig viele Klassennamen in einer solchen Condition angeben.
Condition im Fluidtemplate
Man kann auch eine „echte Condition“ anhand des ausgewählten Layouts oder Frames definieren:
<f:if condition="{data.layout}==1"> ... </f:if> |
Zum Abschluss ein komplettes Beispiel. Hier kommt noch etwas Weiteres zum Einsatz und zwar ein Hintergrundbild, welches redaktionell in ein bestimmtes Verzeichnis gelegt wird. Der Dateiname wird in das Feld „Untertitel“ geschrieben. Dieses wird im TSConfig entsprechend umbenannt:
TCEFORM.tt_content.subheader.label = Bilddatei für den Hintergrund (muss im Verzeichnis template/hg liegen) |
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true"> <f:spaceless> <f:if condition="{data.frame_class} != none"> <f:then> <section id="c{data.uid}" class="main fullscreen {f:if(condition:'{data.layout}==1',then:'style1 dark',else:'style2 dark')} {f:if(condition:'{data.layout}==2',then:'left')} {f:if(condition:'{data.layout}==3',then:'right')} {f:if(condition:'{data.layout}==4',then:'primary')}" <f:if condition="{data.subheader}"> style="background:url('fileadmin/template/hg/{data.subheader}');" </f:if> > ... |
Schön in diesem Zusammenhang ist, wenn man den folgenden Viewhelper im Default.html einbaut. Er zeigt dann alle zur Verfügung stehenden Felder des Datensatzes mit den entsprechenden Werten an. Ob und inwieweit man die standardmäßig zur Verfügung stehenden Felder so umbiegt muss man selbst entscheiden – kommt auf das Projekt und die Anforderungen an. Es gibt immer auch die Möglichkeit, eigene Contentelemente zu erstellen, z.B. mit der Extension dce.
<f:debug>{data}</f:debug> |
Definierte Rahmen nach dem Update auf Version 8 – selbst wenn fluid_styled_content nicht verwendet wird
Hier ein Beispiel, wie es geht. Zwei in css_styled_content definierte Rahmen sollen in einem TYPO3 der Version 8 verwendet werden. Der folgende Code steht jeweils im Page TSConfig:
alt (definierte Rahmen bei TYPO3 Version 6):
TCEFORM.tt_content{ section_frame.removeItems = 1,5,6,10,11,12 section_frame.altLabels.20 = selbst definierter Rahmen eins section_frame.altLabels.21 = selbst definierter Rahmen zwei } |
neu (die in Version 6 definierten Rahmen nach einem Update auf TYPO3 Version 8):
TCEFORM.tt_content.frame_class { removeItems = ruler-before,ruler-after,indent,indent-left,indent-right addItems { custom-20 = selbst definierter Rahmen eins custom-21 = selbst definierter Rahmen zwei } } |
Um die bisherigen Klassennamen beibehalten zu können verwendet man noch dieses TypoScript:
tt_content.stdWrap.innerWrap.cObject.custom-20 =< tt_content.stdWrap.innerWrap.cObject.default tt_content.stdWrap.innerWrap.cObject.custom-20.20.10.value = csc-frame csc-frame-frame1 tt_content.stdWrap.innerWrap.cObject.custom-21 =< tt_content.stdWrap.innerWrap.cObject.default tt_content.stdWrap.innerWrap.cObject.custom-21.20.10.value = csc-frame csc-frame-frame2 |
Eine Gegenüberstellung der alten mit den neuen Bezeichnungen der frames findet man hier.
Verwendet man allerdings fluid_styled_content, so kann man die alten Klassennamen nur durch Änderung in der Datei Default.html (s.o.) erreichen, etwa so:
...
<div id="c{data.uid}" class="{f:if(condition:'{data.frame_class}==ruler-after',then:'csc-frame csc-frame-ruler-after')}" ... </div>
... |
Möchte man die Auswahl von Klassen auf bestimmte Contentelemente einschränken, so könnte dieser Link hilfreich sein.
S. auch hier.
Die Frames „Space before“ und „Space after“
… die es in TYPO3 8 ja wieder gibt. Gesetzt man möchte die Selectbox „Space before“ ausblenden und die Selectbox „Space after“ konfigurieren, dann kann man in etwa folgendes ins TSConfig schreiben (selbsterklärend):
TCEFORM.tt_content { space_before_class.disabled = 1 space_after_class { removeItems = small, medium, large, extra-large altLabels.extra-small = mein Abstand } } |
TYPO3 Standardframes in Gridelements verwenden
Wenn man die Extension Gridelements einsetzt und die TYPO3 Standardframes verwenden möchte, so benötigt man folgendes TypoScript (in diesem Beispiel wird wie oben die Selectbox „Space before“ nicht verwendet):
tt_content.gridelements_pi1.stdWrap.wrap = <div class="content-frame gridWrap frame-{field:frame_class} frame-layout-{field:layout} frame-space-after-{field:space_after_class}" id="c{field:uid}">|</div>
tt_content.gridelements_pi1.stdWrap.wrap.insertData = 1 |