TYPO3: Verschiedene Seiten-Templates mit Fluid und BE Layout

Mit der Fluid Template Engine (ab TYPO3 Version 4.3) und dem Backend Layout (ab TYPO3 Version 4.5) kann man mit wenig Aufwand dem Redakteur verschiedene Seiten-Layouts zur Auswahl anbieten, die er über eine Select-Box in den Seiteneigenschaften einer Seite wählen kann (siehe Abbildung).

Das macht Erweiterungen wie z.B. rlmp_tmplselector unnötig. Hier die Schritt-für-Schritt-Anleitung für die Einrichtung und Konfiguration der Seiten-Templates:

1) Backend Layout anlegen

Backend Layouts legt man als Datensätze in einem beliebigen SysFolder ab (außer, man hat eine “General Record Storage Page” gewählt, dann muss man die Datensätze dort ablegen). Die Erstellung ist sehr einfach, TYPO3 stellt dafür in dem Datensatz einen Wizard zur Verfügung, hier am Beispiel eines einfachen zwei-spaltigen Layouts:

Als “Spaltennummer” wird eine Zahl vergeben. Diese wird weiter unten verwendet, um den Inhalt einzulesen. Meistens benötigt man als Seiten-Layout ein 1-spaltiges, ein 2-spaltiges und eines, das nur den Seiten-Inhalt (ohne Header, Footer, Randspalten usw.) ausgibt, z.B. für Popups oder Lightboxen.

2) HTML-Templates erstellen

Als nächstes legt man die HTML-Templates für die Seiten-Layouts an. Ich habe dabei folgende Struktur vorliegen:

fileadmin/templates/fluid/ für die Seiten-Templates
fileadmin/templates/fluid/layouts/ für die Templates, welche die grobe Struktur der Seite vorgeben (Rahmen-Layout)
fileadmin/templates/fluid/partials/ für die Templates, die Seiten-Teile enthalten (z.B. Subnavigationen oder den Kopfbereich). Diese Seiten-Teile können in unterschiedlichen Layouts oder Seiten-Templates eingebunden werden. In diesem Beispiel-Setup werden diese aber nicht benötigt.

fileadmin/templates/fluid/layouts/default.html

<div id="header">...</div>
<div id="content">
  <f:render section="content" />
</div>
<div id="footer">...</div>

fileadmin/templates/fluid/1col.html

<f:layout name="default" />
<f:section name="content">
  <div id="content_main">
    <f:format.html>{content}</f:format.html>
  </div>
</f:section>

fileadmin/templates/fluid/2col.html

<f:layout name="default" />
<f:section name="content">
  <div id="content_main">
    <f:format.html>{content}</f:format.html>
  </div>
  <div id="content_left">
    <f:format.html>{content_left}</f:format.html>
  </div>
</f:section>

fileadmin/templates/fluid/popup.html

<div id="content">
  <f:format.html>{content}</f:format.html>
</div>

Hinweis: Bei mir gab es Probleme mit dem Rendering. Standardmäßig jagt Fluid den Content durch die Rendering-Funktion “parseFunc” mit den Einstellungen von “lib.parseFunc_RTE”. Allerdings ist in diesen Einstellungen keine iframes, Formulare usw. vorgesehen (diese kann man und soll man über den RTE gar nicht einpflegen), so dass die Tags <iframe> und <form> sichtbar auf der Seite ausgegeben werden. Um das zu verhindern, gibt es mehrere Lösungen:

1) Verwendung von “f:format.raw” (Fluid Version > 1.3.0):

<f:format.raw>{content}</f:format.raw>

2) TypoScript-Objekt direkt einbinden:

<f:cObject typoscriptObjectPath="lib.content" />

Und in TypoScript:

lib.content < styles.content.get

3) Ein nicht existierendes Rendering-Setup angeben, z.B. lib.parseFunc_FLUID:

<f:format.html parseFuncTSPath="lib.parseFunc_FLUID">{content}</f:format.html>

Lösung 1 und 2 ist von marcoseiler.de

3) TypoScript Konfiguration

Allgemeine Konfiguration und Zuweisung der Platzhalter

TS Setup

page.10 = FLUIDTEMPLATE
page.10 {
  partialRootPath = fileadmin/templates/fluid/partials/
  layoutRootPath = fileadmin/templates/fluid/layouts/
  variables {
    content < styles.content.get
    content_left < styles.content.get
    content_left.select.where = colPos=1
  }
}

In die Platzhalter “content” und “content_left” werden nun die Inhalte eingelesen, die vom Redakteur im Backend in den entsprechenden Spalten angelegt wurde. Gei “content_left” lesen wir die Inhalte aus “Spaltennummer” 1 ein, also die Inhalte aus Spalte “Linker Rand”, die weiter oben im Backend Layout definiert wurde.

Zuweisung BE Layout zu HTML-Template

Je nachdem, welches Backend Layout in den Seiteneigenschaften ausgewählt wurde, sollte ein anderes Seiten-Template verwendet werden. Dies geschieht mit diesen TypoScript-Anweisungen:

TS Setup

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
  default = TEXT
  default.value = fileadmin/templates/fluid/2cols.html
  2 = TEXT
  2.value = fileadmin/templates/fluid/1col.html
  3 = TEXT
  3.value = fileadmin/templates/fluid/popup.html
}

Standardmäßig wird dabei das 2-Spalten-Layout verwendet (dieses sollte deshalb auch auf der Root-Seite in zwei Select-Boxen für das Backend-Layout ausgewählt werden). Die Templates werden über die IDs der Backend-Layouts zugewiesen. In meinem Fall hat das 1-spaltige Backend-Layout die ID 2, das Popup-Backend-Layout die ID 3.

Optional: CSS Datei einbinden, abhängig von gewählen Layout

page.headerData.10 = CASE
page.headerData.10 {
  stdWrap.wrap = !!<==/=///|=>
  key.data = levelfield:-1, backend_layout_next_level, slide
  key.override.field = backend_layout
  default = TEXT
  default.value = layout_2col.css
  2 = TEXT
  2.value = layout_1col.css
  3 = TEXT
  3.value = layout_popup.css
}

Optional: body-Tag mit Klasse auszeichnen

Für das Layout ist es oft nötig, dass man in CSS weiß, welches Layout aktuell gewählt ist. Deshalb kann man dem body-Tag je nach gewählten Layout eine andere Klasse geben:

TS Setup

page.bodyTagCObject = CASE
page.bodyTagCObject {
  stdWrap.wrap = !!<=|>
  key.data = levelfield:-1, backend_layout_next_level, slide
  key.override.field = backend_layout
  default = TEXT
  default.value = layout-2col
  2 = TEXT
  2.value = layout-1col
  3 = TEXT
  3.value = layout-popup
}