Backend-Layouts verwenden und anpassen
Backend-Layouts verwenden
Das Musterprojekt bringt zwei verschiedene Layouts mit. In den Seiteneigenschaften können Sie über die Felder für die Backend-Layouts steuern, welches Layout verwendet wird.
Welches Layout verwendet wird, legen Sie in den Eigenschaften einer Seite fest. Im Reiter "Erscheinungsbild" finden Sie zwei Auswahlfelder für die Backend-Layouts. Hier können Sie das verwendete Layout für die aktuelle Seite sowie für untergeordnete Seiten wählen.
Bei einem leeren Auswahlfeld wird das Layout einer übergeordneten Seite geerbt.
Wenn Sie auf einer Seite mit bestehenden Inhalten ein anderes Backend-Layout wählen, kann es sein, dass die Inhaltselemente im Frontend und auch im Backend nicht mehr zu sehen sind.
Hier müssen Sie die Zuordnung zu den "Spalten" über das Listen-Modul korrigieren.
Wechseln Sie dazu in das Backend-Modul "Liste".
In der Tabelle "Seiteninhalt" sehen Sie dann alle vorhandenen Inhaltselemente. Klicken Sie auf das Stiftsymbol, um ein Inhaltselement zu bearbeiten.
Im Reiter "Allgemein" können Sie bei Auswahlbox "Spalte" auswählen, in welchem Bereich des Layouts das Inhaltselement erscheinen soll.
Backend-Layouts anpassen
Die vorhandenen Layouts können natürlich auch angepasst werden. In diesem Beispiel wird zu den 3 Inhaltsspalten des Startseiten-Layouts eine vierte Spalte hinzugefügt.
Wechseln Sie in das Listen-Modul und wählen Sie den Ordner "Backendlayouts" aus. Hier sehen Sie alle im Musterprojekt vorhandenen Backendlayouts.
Klicken Sie auf das Stiftsymbol neben dem Layout "Startseite".
Neben dem Feld "Konfiguration" können Sie durch einen Klick auf das Icon den "Assistenten" starten.
Es öffnet sich ein neues Fenster mit dem sogenannten "Grid Wizard".
Durch einen Klick auf das Pfeilsymbol am rechten Rand können Sie eine weitere Spalte hinzufügen.
Anschließend klicken Sie bei "Inhalt oben" auf den rechten Pfeil, um im oberen Bereich die Spalten wieder zu verbinden.
Die neu hinzugefügte Spalte muss jetzt noch editiert werden. Klicken Sie dazu auf das Stiftsymbol in der Spalte.
Vergeben Sie dann einen Namen und eine Spaltennummer. Diese Spaltennummer muss eindeutig sein. Merken Sie sich diese Nummer, diese wird in einem späteren Schritt noch einmal benötigt.
Als nächstes muss das Typoscript für die Ausgabe der Seiten angepasst werden.
Gehen Sie dazu in das Dateiliste-Modul und bearbeiten Sie die Datei page.10.ts (In Version 6.2.2: page.10.setup.ts) im Verzeichnis fileadmin/jweilandnet_musterprojekt/Resources/Typoscript/
Fügen Sie hier den Code für die neue Spalte hinzu. Hier müssen Sie einen eindeutigen Namen für diesen Inhaltsbereich wählen, in diesem Beispiel verwenden wir contentBox4.
Beim Wert für colPos ergänzen Sie die Spaltennummer, die Sie im vorigen Schritt vergeben haben.
contentBox4 < .contentBox1
contentBox4 {
select.where = colPos = 13
}
Die Variable contentBox4 muss jetzt auch im HTML-Template ausgeben werden.
Bearbeiten Sie dazu die Datei homeTemplate.html im Verzeichnis fileadmin/jweilandnet_musterprojekt/Resources/Fluidtemplates/templates/
Über einen Fluid-Viewhelper können Sie die Variable an der entsprechenden Stelle im Template ausgeben lassen.
<f:format.raw>{contentBox4}</f:format.raw>
Damit jetzt alle vier Spalten korrekt nebeneinander ausgegeben werden, müssen Sie in der gleichen Typoscript-Datei in Zeile 23 die verwendete CSS-Klasse ändern.
Ändern Sie col-md-4 um in col-md-3.
Details zu diesen CSS-Klassen finden Sie in der Dokumentation des Bootstrap-Frameworks.