\\ Aktuelles > Allgemeines > Detail

Templating mit Backend Layout

Created by sf | |   TYPO3

Die neue TYPO3 Version 4.5lts beinhaltet viele neue Funktionen die den Alltag und das Arbeiten erleichtern sollen. Dazu gehört auch das Backend Layout. Doch was kann damit erzielt werden? Ich möchte euch einen Überblick geben und erklären wie das eigene Templating damit erleichtert wird.

###NEWS_IMAGE_1######NEWS_IMAGE_2###Viele Funktionen der neue TYPO3 Version 4.5lts sind offensichtlich und erschliessen sich dem Nutzer direkt nach dem Login. Darunter wären so Nettigkeiten wie das Laden der einzelnen Modulinhalt per Ajax, Indiz dafür ist der Loadspinner, oder der neue Seitenbaum der auch per Ajax arbeitet und damit dann nicht mehr alle Seiten vorhalten muss und schneller reagiert.

Doch es gibt auch Features, die erst bei genauem Hinsehen auffallen, die dann aber um so mehr begeistern, nachdem man sie sich auf der Hirnrinde hat zergehen lassen. Zu einer der Neuigkeiten gehört das Backend Layout mit der Gridview.

Das Schmuckstück versteckt sich in den Seiteneigenschaften auf dem Tab Erscheinungsbild. Die beiden Selectboxen "Backend-Layout (nur für diese Seite)" und "Backend-Layout (für Unterseiten dieser Seite)" ermöglichen die Auswahl für genau die Eigenschaften die in den Klammern dahinter stehen. Das beinhaltet gleichzeitig auch das Vererbungsverhalten der beiden Felder.

"nur für diese Seite" wirkt sich nur auf der Seite aus auf der das Layout ausgewählt wird. "für Unterseiten dieser Seite" wirkt sich dahingegen aber nur auf den Unterseiten aus und sorgt dafür, dass alle Seiten unterhalb der aktuellen Seite ein Layout zugewiesen bekommen. Allerdings wird das Layout der aktuellen Seite dadurch nicht beeinflusst.

Wird auf einer Unterseite jetzt ein Layout in der Selectbox "nur auf dieser Seite" ausgewählt bewirkt das, dass genau auf dieser einen Seite das Layout wirkt. Alle weiter drunter liegenden Seiten behalten dabei das vorher ausgewählte Layout für die Unterseiten bei. Ein wenig komplex aber sehr hilfreich wenn man nur für eine einzelne Unterseite eine andere Aufteilung braucht.

Wie wirkt sich jetzt ein ausgewähltes Layout aus? Nun, wie man auf der rechten Seite an den Abbildungen eins und zwei sieht, werden die verfügbaren Spalten im Web > Seiten Modul verändert. Wärend Abbildung eins die standard Aufteilung dastellt, verdeutlich Abbildung zwei bereits einen ersten Vorteil. Werden nur wenige Spalten benötigt steht mehr Platz für den Inhalt der verbleibenden Spalten.

###NEWS_IMAGE_3###Nachdem klar geworden ist was einem das Backend Layout bietet und wie es zugewiesen wird zeige ich jetzt wie es angelegt wird. Im Gegensatz zu ähnlichen Ansätzen wie bei TemplaVoila braucht man in diesem Fall nur Bord Mittel. Im Listen Modul fügt man einen Backend-Layout Datensatz hinzu. Damit diese für den aktuellen Seitenbaum verfügbar sind, müssen diese Layouts auf obersten Ebene, in der Regel die Rootseite einer Website, angelegt werden.

###NEWS_IMAGE_4###In diesem Datensatz kann man die Spalten- und Zeilenaufteilung entweder von Hand im Feld Konfiguration bearbeiten oder aber man nutzt den Grid Wizard. Dieser Assisten befindet sich rechts neben dem Konfigurationsfeld und öffnet ein Popup. Dieser Wizard ermöglicht es Spalten und Zeilen hinzuzufügen, Namen und Spaltennummern zu bearbeiten und mindestens genauso interessant ermöglich es Felder zu verbinden. Abbildung drei und vier verdeutlicht dies.

Auszugsweise sieht ein Layout dann so aus:

backend_layout {

colCount = 2

rowCount = 1

rows {

1 {

columns {

1 {

name = Inhaltsspalte

colPos = 0

}

2 {

name = Sidebar

colPos = 2

}

}

}

}

}

In Summe haben wir jetzt die Möglichkeit das Layout für die Backend Spalten zu wählen. Doch das ist nur die Hälfte der Miete. Denn bisher hat das keinen Einfluss auf die Ausgabe im Frontend. Doch da die getroffene Auswahl in der Seite und den Unterseiten verfügbar ist, spricht nichts dagegen auch die Templatewahl für das Frontend davon abhängig zu machen.

Das hat sich auch das Core Team gedacht und vorsorglich das Feld backend_layout_next_level der Seiteneigenschaften für das sogenannte sliden durch den Rootline vorbereitet. In Kombination mit der Auswahl des Layouts individuell auf einer Seite ohne Vererbung haben wir ein rundes Packet an Template Auswahlmöglichkeiten.

Das folgende TypoScript bildet eine solide Grundlage um mit verschiedenen Templates zu arbeiten:

page = PAGE

page.10 = TEMPLATE

page.10.template = CASE

page.10.template {

key.cObject = TEXT

key.cObject {

field = backend_layout

 ifEmpty.cObject = TEXT

ifEmpty.cObject.data = levelfield: -2, backend_layout_next_level, slide

}

 // clears the complete page, useful for popups

-1 = TEXT

-1.value =

 // alternative template, 2 is the uid of the backend layout record

2 = FILE

2.file = fileadmin/templates/without_sidebar.html

 // default template used as a fall back if no template is selected or was not mapped

default = FILE

default.file = fileadmin/templates/index.html

}

An diesem Beispiel wird gut sichtbar, dass zunächst versucht wird das backend_layout auszuwerten. Sollte dieses leer sein (ifEmpty) wird dann über backend_layout_next_level geslided. Der daraus resultierende Wert wird als Auswahlziffer für das Template verwendet. Wobei die Ziffer der uid des Backend-Layout Datensatz entspricht. Default sollte immer gesetzt werden damit in jedem Fall ein Template für die Seiten Ausgabe verwendet wird.

standard Spaltenansicht des Web > Seite Moduls
Spaltenansicht mit ausgewähltem Backend Layout
Backend Layout Grid Editor mit geöffnetem Element
komplexes Layout mit verbundenen Elementen