Backend-Layout einsetzen
Seit der TYPO3 Version 4.5 ist es möglich die zur Verfügung stehenden Spalten zur Befüllung mit Inhalten für den Redakteur anschaulicher anzuzeigen. Ohne großen Aufwand können diese jetzt individuell benannt werden und auch weitere Spalten hinzugefügt werden.
Backend-Layout erstellen
Der Ordnung wegen sollte man eine Seite für die Speicherung der Backend-Layouts vorsehen. Wenn es sich um einen Auftritt handelt bei dem alle Redakteure auf den gesamten Seitenbaum Zugriff haben, kann dies die Startseite sein. Ansonsten wird ein Systemordner dafür erstellt.
In der Listenansicht kann man einen neuen Backend-Layout Datensatz anlegen.
In diesem kann über das Icon "Assistent" unter Konfiguration nun der Backend-Layout Assistent geöffnet werden. In diesem kann ein eigenes Backend-Layout gestaltet werden. Die Spaltennummer wird später im TypoScript verwendet um den Inhalt auszulesen.
Backend-Layout einrichten
Damit die Layouts auf allen Seiten in den Seiteneigenschaften angezeigt werden, muss im Page TSconfig die ID des Systemordners mit den Backend-Layouts angegeben werden:
##id storagepage of gridlayout
TCEFORM.pages.backend_layout.PAGE_TSCONFIG_ID=29
TCEFORM.pages.backend_layout_next_level.PAGE_TSCONFIG_ID=29
Beim Einrichten der Redakteure muss man darauf achten, dass diese auch auf den Systemordner zugreifen dürfen!
Auf der Startseite definiert man in den Seiteneigenschaften dann das Standardlayout für alle Unterseiten. So muss der Redakteur nicht für jede neu erstellte Seite ein Layout auswählen, sondern nur für die vom Standard abweichende Seiten.
Will man, dass der Redakteur nicht die Möglichkeit hat kein Layout, also "Keins" auszuwählen, um mit der alten Backenansicht arbeiten zu können, so versteckt man diese Option folgendermaßen:
##hide no backend layout label
TCEFORM.pages.backend_layout_next_level.removeItems= -1
TCEFORM.pages.backend_layout.removeItems= -1
Es gibt auch ein leeres Auswahlfeld für das Standardlayout. Dies kann ebenfalls mit einem Label versehen werden. So kann ein Redakteur auch erkennen, welches Layout voreingestellt ist.
##give empty label a definition
TCEFORM.pages.backend_layout.altLabels.0 = Vordefiniertes Layout
Backend-Layout mit Frontend verknüpfen
Zuerst wird im Setup abhängig vom gewählten Layout eine CSS Klasse für den body Tag definiert und page.bodyTagCObject zugewiesen:
##Backend grid view defines body class for css
temp.selectbodytag = CASE
temp.selectbodytag {
key.field = backend_layout
key.ifEmpty.data = levelfield:-2, backend_layout_next_level, slide
default = TEXT
default.value = layout1
1 = TEXT
1.value = layout1
2 = TEXT
2.value = layout2
3 = TEXT
3.value = layout3
stdWrap.wrap =
}
In dem Beispiel unten ist im HTML Template ein Subpart "contentWrap" definiert. Als COA kann es in mehrere Unterbereiche geliedert werden.
contentWrap.10 ist ein div welches in allen Backendlayouts vorkommt.
contentWrap.20 wird nur für die Layouts mit der ID 1 oder 2 ausgegeben.
contentWrap.20.20 wird nur für Layout mit der ID 2 ausgegeben.
contentWrap.20.30 wird nur für Layout mit der ID 3 ausgegeben.
contentWrap.30 kommt wieder in allen Backendlayouts vor.
Bei der if Abfrage wird der Wert zuerst in den darüber liegenden Seiten im Feld "Backend-Layout (für Unterseiten dieser Seite)" und auf den Value hin überprüft. Steht im Feld "Backend-Layout" ein Wert, so überschreibt dieser das vorhergehende Ergebnis und schaut ob dieser Wert mit dem Value übereinstimmt.
page = PAGE
page {
##css class in bodytag according to layout
bodyTagCObject < temp.selectbodytag
10 = TEMPLATE
...
10.subparts {
contentWrap = COA
##Top box
contentWrap.10 < styles.content.get
contentWrap.10.wrap = <div id="contentTop">|</div>
##floated boxes wrapped in a box
contentWrap.20 = COA
contentWrap.20.if {
## backend layout query by uid
value = 1,2
isInList.data = levelfield:-2,backend_layout_next_level,slide
isInList.override.data = TSFE:page|backend_layout
}
contentWrap.20.wrap = <div> | </div>
contentWrap.20.10 < styles.content.get
contentWrap.20.10.select.where = colPos = 1
contentWrap.20.10.wrap = <div id="contentLeft">|</div>
contentWrap.20.20 = COA
contentWrap.20.20 {
if {
value = 2
isInList.data = levelfield:-2,backend_layout_next_level,slide
isInList.override.data = TSFE:page|backend_layout
}
10 < styles.content.get
10.select.where = colPos = 2
10.wrap = <div class="contentMiddle">|</div>
}
contentWrap.20.30 = COA
contentWrap.20.30 {
if {
value = 3
isInList.data = levelfield:-2,backend_layout_next_level,slide
isInList.override.data = TSFE:page|backend_layout
}
10 < styles.content.get
10.select.where = colPos = 5
10.wrap = <div class="contentMiddle">|</div>
20 < styles.content.get
20.select.where = colPos = 6
20.wrap = <div class="contentMiddle">|</div>
}
contentWrap.20.40 < styles.content.get
contentWrap.20.40.select.where = colPos = 3
contentWrap.20.40.wrap = <div id="contentRight">|</div>
##bottom box
contentWrap.30 < styles.content.get
contentWrap.30.select.where = colPos = 4
contentWrap.30.wrap = <div id="contentBottom">|</div>
}
}