Im ersten Teil bin ich auf die Einbindung des FLUIDTEMPLATEs eingegangen, heute will ich speziell den Content-Bereich eines Templates eingehen.
Dabei kommt uns eine Extension zugute, die seit TYPO3 4.5 im Core ist. Diese heißt „backend_layout“ und als neuer Datensatz heißt er „Backend Layout“:
Backend Layout Datensatz
Ein neues Backend Layout können wir unsere eigene oder vom Kunden gewünschte Inhaltsstruktur mittels des Wizards erstellen. Wir erstellen heute ein Layout, welches in der oberen Hälfte aus zwei Spalten und in der unteren Hälfte aus einer Spalte über die gesamte Breite besteht:
Backend Layout Wizard
Hier sieht man schön die zukünftige Struktur. Man sieht auch, dass ich jeden Bereich mit einer Zahl fest definiert habe. Diese Zahlen müssen wir uns merken für das TypoScript später.
Nachdem wir das Backend Layout gespeichert haben, können wir uns sogleich mal an das TypoScript machen. Merken müssen wir uns noch die UID des Backend Layouts. Und so geht es los:
# Ein CASE Objekt schaut, welcher Fall eintritt und handelt dementsprechend. temp.contentStructure = CASE temp.contentStructure { # Durch den Key können wir festlegen, auf welches Feld er prüft, in diesem Fall das Feld # "backend_layout" im Seiten-Datensatz. key.field = backend_layout # Falls das Feld leer ist, schaut er rekursiv bis zur Root Page, ob irgendwo das Feld gesetzt ist. key.ifEmpty.data = levelfield:-2, backend_layout_next_level, slide # Die UID des Backend Layout Datensatzes, in unserem Falle die 1 1 = COA 1.10 = COA 1.10.wrap = <div class="maincolumns">|<div class="clear"></div></div> # Spalte oben links 1.10.10 < styles.content.get 1.10.10.select.where = colPos = 1 1.10.10.wrap = <div class="column first">|</div> # Spalte oben rechts 1.10.20 < styles.content.get 1.10.20.select.where = colPos = 2 1.10.20.wrap = <div class="column second">|</div> # Spalte unten 1.20 < styles.content.get 1.20.select.where = colPos = 3 1.20.wrap = <div>|</div> } # Wir kopieren das Objekt in die Variable content page.10.variables.content < temp.contentStructure |
Damit setzen wir für jede Spalte (colPos = vorher gesetzte Spaltennummer) auch direkt das HTML. Mit den verschiedenen Klassen können wir dann auch im Frontend per CSS die Struktur nachbauen, wie wir sie im Backend erstellt haben:
div.first { float: left; width: 50%; } div.second { float: right; width: 50%; } div.clear { clear: both; } |
Natürlich hat man Unmengen von Möglichkeiten, um sich mittels der Spalten verschiedene Backend Layouts zusammenzustellen.
Ach, und die Auswahl erfolgt über den Seiten-Datensatz im Backend. Dort gibt es die Möglichkeit ein Backend Layout für die Seite, aber auch rekursiv für alle darunterliegenden Seiten zu setzen:
Backend Layout Auswahl
Viel Spaß beim Probieren! 🙂
Steffen Müller am 20. März 2012 um 21:01
tinu am 21. März 2012 um 09:22
Tobi am 21. März 2012 um 10:40
fff am 22. März 2012 um 10:13
Roland am 22. März 2012 um 19:56
Philipp Bräutigam am 27. März 2012 um 17:33
Julian am 05. April 2012 um 09:06
Jan-Henrik Hempel am 16. April 2012 um 13:11
Jenny am 05. August 2014 um 11:33
