Typo3 Backend-Layouts richtig nutzen

Wer großen Wert darauf legt, das Content Management System bis ins kleinste Detail anpassen zu können, hat mit Typo3 die richtige Wahl getroffen. Hier kann wirklich sehr penibele definiert werden, wie die Elemente im Frontend angezeigt werden. Doch nicht nur das Frontend von Typo3 ist sehr flexibel, auch im Backend kann sehr viel angepasst werden.

In diesem Artikel zeige ich Dir, wie Du ganz einfach das Layout der Inhalts-Spalten im Backend mit Backend-Layouts verändern kannst.

Backend-Layout anlegen

Normalerweise zeigt Typo3 im Backend alle vier Spalten nebeneinander an. Aber mit Backend-Layouts können wir die Position jeder Spalte anpassen. Zum Beispiel können wir zwei »Spalten« übereinander anzeigen lassen. Dazu müssen wir als erstes über das Listen-Modul einen neuen Datensatz, ein Backend-Layout, anlegen. Diesem geben wir dann den Titel »2 Reihen«. In das Feld »Konfiguration« können wir nun die Konfiguration für die Spalten und Reihen eintragen.

backend_layout {
	colCount = 1
	rowCount = 2
	rows {
		1 {
			columns {
				1 {
					name = Spalte Oben
					colPos = 0
				}
			}
		}
		2 {
			columns {
				1 {
					name = Spalte Unten
					colPos = 1
				}
			}
		}
	}
}

Dieser Code definiert, das es zwei Reihen mit jeweils einer Spalte gibt. Wir können zum Beispiel auch zwei Reihen mit zwei Spalten definieren:

backend_layout {
	colCount = 2
	rowCount = 2
	rows {
		1 {
			columns {
				1 {
					name = Links Oben
					colPos = 0
				}
				2 {
					name = Rechts Oben
					colPos = 1
				}
			}
		}
		2 {
			columns {
				1 {
					name = Links Unten
					colPos = 2
				}
				2 {
					name = Rechts Unten
					colPos = 3
				}
			}
		}
	}
}

Die colPos definiert, wie wir den Inhalt hinterher auslesen können, über getLeft, getRight usw.

Backound-Layout benutzen

Nun können wir in den Seiten-Eigenschaften unter Erscheinungsbild->Backend-Layout definieren, welches Backend-Layout wir benutzen wollen. Beim Bearbeiten der Seite werden die Spalten nun in der gewünschten Reihenfolge angezeigt.

Hinweis: Das Backend-Layout wirkt sich nicht auf die Darstellung im Frontend aus. Um die Elemente hier richtig zu positionieren, musst Du das Layout und das TypoScript anpassen.