Das Problem, das in diesem Beitrag beschrieben werden soll und für das einen Lösungsweg aufgezeigt werden soll, ist bei größen Webprojekten meistens unvermeidbar. Im Designentwurf sind für verschiedene Untermenüpunkte unterschiedliche Spalten-Layouts vorgesehen, mal ein 2-Spalten-Layout und mal ein 3-Spalten-Layout. Wie kann man dieses Problem also mit TYPO3 lösen?

Zunächst einmal muss gesagt werden, dass es für dieses Problem viele Wege und verschiedene Möglichkeiten gibt. Ich habe mich dafür entschieden, die unterschiedlichen Multi-Column-Layouts über eigene Template Dateien zu realisieren.

Eine einfache CSS-Klasse am BODY-Tag würde für die meisten Anwendungsfälle sicherlich auch reichen, aber da der „Teufel meistens im Detail steckt“ finde ich die Variante mit den eigenen Templates für unterschiedliche Layouts am elegantesten und hält den Wartungsaufwand langfristig gering.

Layout an einem Seiten-Objekt einstellen

Um pro Seite ein individuelles Layout auszuwählen gibt es in TYPO3 bereits eine Einstellungsoption im Backend. Im Seiten-Bearbeiten-Modus gibt es unter dem Reiter Erscheinungsbild die Auswahlbox Frontend-Layout, wie auf dem nachfolgenden Bild zu sehen ist.

TYPO3: Frontendlayout auswählen mit Default-Werten

TYPO3: Frontendlayout auswählen mit Default-Werten

Höhere Benutzerakzeptanz durch individuelle Bezeichnungen

Da die Standardbezeichner in der Frontend-Layout-Auswahlbox nicht gerade sprechend sind und ein späterer Benutzer nicht viel mit Begriffen wie Layout1 und Layout2 anfangen kann, wenn er nicht explizit darauf hingewiesen wird, sollten die Bezeichner einen passenden Namen bekommen.

TYPO3: Frontend-Layout auswählen mit individuellen Bezeichnern

TYPO3: Frontend-Layout auswählen mit individuellen Bezeichnern

Um diese Ansicht zu erhalten, könnt ihr folgendes Typoscript verwenden:

TCEFORM.pages.layout {
	altLabels {
		0 = 3 Spalten
		1 = 2 Spalten
		2 = Startseite
	}
	removeItems = 3
}

Das Typoscript fügt ihr am besten auf der root-Seite eures Menübaumes unter Seite bearbeiten -> Ressourcen -> TypoScript-Konfiguration ein.

2-Spalten, 3-Spalten, etc

Der Benutzer kann jetzt einfach und schnell das Layout einer beliebigen Seite im Backend ändern, aber bis jetzt dürfte noch nicht viel im Frontend passieren.

Um jetzt je nach Auswahl des Layouts im Backend eine unterschiedliche Template-Datei einzubinden, wird das nachfolgende TypoScript im Setup eures Wurzeltemplates eingetragen.

page.10 = TEMPLATE
page.10.template = FILE
page.10.template.file = fileadmin/template/3-columns.html

# FRONTEND Layout Switch
[globalVar = TSFE:page|layout = 1]
page.10.template.file = fileadmin/template/2-columns.html
[globalVar = TSFE:page|layout = 2]
page.10.template.file = fileadmin/template/2-columns-startseite.html
[global]

Das TypoScript sorgt dafür, dass per Default die Datei 3-columns.html eingebunden wird. Ist im Backend unter Frontend-Layout etwas anderes ausgewählt worden, so wird entweder 2-columns.html oder 2-columns-startseite.html eingebunden.

In den Template-Dateien können jetzt die für das jeweilige Layout notwendigen Anpassungen vorgenommen werden.