Wenn man eine Webseite mit TYPO3 erstellt, muss man dem System ja irgendwie mitteilen, wo die im Backend eingegeben Content Elements mit Texten und Bildern bzw. Medien im HTML Code dargestellt werden sollen. Dazu erstellt man ein Backend Layout. Dieses erfüllt folgende Zwecke:
Dazu legen wir bei der Erstellung eines Backend Layouts zuerst das Muster fest, in dem die Elemente für redaktionell arbeitende Personen sichtbar sein sollen. Im nächsten Schritt geben wir Ihnen einen Namen, der am Element im Backend erscheint. Die zweite Variable ist die ColPos. Diese ist für Mitarbeitende der Redaktion im Normalfall nicht sichtbar, aber von enormer technischer Bedeutung, denn über diese Column Position steuern wo, welches Element wo im Frontend erscheint.
Der klassische Weg der Eingabe eines Backend Layout erfolgt über das Backend der TYPO3 Installation direkt in der Datenbank. Wenn man ein ausgefeiltes Layout erstellt, kann dies auch nach wie vor der erste Schritt sein. Mehr dazu auf der Webseiten unserer Agentur:
TYPO3 Tutorial zum Backend Layout beim Setup der Webseite
In jedem Fall purzelt bei der Erstellung eines Backend Layouts ein TypoScript Code zur Konfiguration des Sytems heraus. Unabhängig davon ob man diesen Schritt über das TYPO3 Backend geht kann man jedoch die Anbindung des resultierenden Codes auch über das TypoScript Setup erledigen.
Für die Anbindung des TypoScript Code und nicht den klassischen Weg über die Datenbank gibt es mehrere Gründe:
Gründe genug als dafür das System von Datenbank auf TypoScript umzustellen.
Wenn wir ein neues TYPO3 Projekt starten, können wir das Backend Layout wie gewohnt mit dem Editor erstellen. Gerade bei responsiven Layouts im Frontend ist dieser eine große Hilfe, denn als Entwickler können den redaktionell Arbeitenden ein Backend anbieten, in dem sie auch die Elemente wiederfinden, an denen sie arbeiten sollen, ohne lange suchen zu müssen. Haben wir dies getan, können wir uns im Backend den Quellcode für das neue Backend Layout anzeigen lassen. Dieser kann wie folgt aussehen:
mod.web_layout.BackendLayouts {
exampleKey {
title = Example
icon = EXT:providerkey/Resources/Public/Images/BackendLayouts/default.gif
config {
backend_layout {
colCount = 1
rowCount = 2
rows {
1 {
columns {
1 {
name = Überschrift und Text H1
colPos = 1
}
}
}
2 {
columns {
1 {
name = Überschrift und Text H2
colPos = 2
}
}
}
}
}
}
}
}
Diesen Codeblock können wir nun herauskopieren und in die neue Datei für das Page TS Config einfügen. Wichtig ist nun die Variable exampleKey für die Kopplung zwischen Backend Layout und Backend. Diese Variable müssen wir nun mit einer Zahl überschreiben, die als eindeutige ID funktioniert, die wir frei selbst bestimmen können und mit der wir im TYPO3 Setup später das Fluid Template anbinden. Wir können hier auch die automatisch von unserem System vergebene UID verwenden, denn diese Variable, an der wir gerade arbeiten, wird nicht in der Datenbank gespeichert. Wichtig für das TypoScript Setup des FluidTemplate ist hier, dass es dieselbe Zahl ist. Wenn wir so verfahren, erleichtern wir uns bei bestehenden System den Umbau enorm.
Wo aber schreiben wir unseren neu erstellten Quellcode nun hinein? Nun, im Regelfall einer TYPO3 Installation z. B. mit der Version 12 haben wir bereits eine Datei für die Konfiguration oder erstellen sie nun neu im Verzeichnis der Konfiguration unserer Provider Extension:
EXT:providerkey/Configuration/page.tsconfig
Per Konvention wird diese Datei vom System automatisch mit eingelesen. Da wir dort auch andere TypoScript Konfigurationen der gesamten Webseite ablegen, ist diese Datei möglicherweise bereits vorhanden.
Im nächsten Schritt müssen wir zwei Anpassungen am TypoScript Code vornehmen. In der Zeile exampleKey geben wir nun genau die Zahl ein, mit der wir dieses Backend Layout später an unser Fluid Template koppeln wollen. Um Nerven schonend zu arbeiten, empfiehlt es sich, die UID aus der Tabelle des Backend Layout zu übernehmen, falls die Vorlage mit dem Editor entstanden ist. Den Titel können wir nun ebenfalls frei vergeben. Wenn Sie zu den redaktionell arbeitenden Personen eine gute Beziehung pflegen, können Sie zudem einen Screenshot des Frontend in der Zeile icon hinterlegen, damit man bei der Auswahl des Frontend auf einen Blick weiß, ob es sich um die Bildergalerie oder die Textwüste der Datenschutzerklärung handelt.
mod.web_layout.BackendLayouts {
3 {
title = Zwei Elemente in dieser Seite
icon = EXT:providerkey/Resources/Public/Images/BackendLayouts/default.gif
config {
backend_layout {
colCount = 1
rowCount = 2
rows {
1 {
columns {
1 {
name = Überschrift und Text H1
colPos = 1
}
}
}
2 {
columns {
1 {
name = Überschrift und Text H2
colPos = 2
}
}
}
}
}
}
}
}
Wir sind nun nur noch zwei kleine, aber wichtige Schritte von der Vollendung der Anbindung des neuen Backend Layout entfernt. Wir müssen unserem System nämlich nun sagen, dass für eine Seite bzw. alle Folgeseiten das neue Backend Layout übernehmen soll. Je nach Größe und Komplexität des TYPO3 Projektes gibt es nun zwei Möglichkeiten:
Seiteneigenschaften → Erscheinungsbild und wählen dort das neue Backend Layout ausWelches Vorgehen man wählt, muss man nach Lage der Dinge selbst entscheiden. Hat man nur zwei Backend Layouts und nur zwei Seiten damit, empfiehlt sich wahrscheinlich der erste Weg. Wenn man keinen direkten Zugriff auf die Datenbank hat, ist die Entscheidung bereits gefallen.
Haben Sie sich für den direkten Zugriff auf die Datenbank entschieden, empfiehlt sich der folgende Weg:
backend_layout und backend_layout_next_level bis sie jeweils die Zahlenwerte sehenIm oben gezeigten Beispiel ändern Sie die
3
auf
pagets__3
Damit kommen wir zum letzten Schritt! Denn wenn wir mehrere Backend Layouts anbinden, müssen wir unserem System ja sagen, wo es denn die dazu gehörenden Fluid Templates finden soll. Dazu müssen wir die folgenden Anpassungen vornehmen, die wir hier in einem vereinfachten Beispiel darstellen.
page.10.file.stdWrap.cObject = CASE
page.10.file.stdWrap.cObject {
key.data = levelfield:-1, backend_layout_next_level, slide
key.override.field = backend_layout
3 = TEXT
3.value = EXT:providerkey/Resources/Private/Templates/Page.html
4 = TEXT
4.value = EXT:providerkey/Resources/Private/Templates/Kapitel.html
}
Mit der Anbindung der neuen Variablen ändert sich der TypoScript Code wie folgt:
page.10.file.stdWrap.cObject = CASE
page.10.file.stdWrap.cObject {
key.data = levelfield:-1, backend_layout_next_level, slide
key.override.field = backend_layout''
pagets__3 = TEXT''
pagets__3.value = EXT:providerkey/Resources/Private/Templates/Page.html''
pagets__4 = TEXT''
pagets__4.value = EXT:providerkey/Resources/Private/Templates/Kapitel.html''
}