Backend Layouts 

Backendlayouts flexibel im TYPO3 System einrichten - ein Step by Step Tutorial Beitrag.

06.04.2016 1313

Backendlayouts einrichten

In diesem Abschnitt erkläre ich wie man Backandlayouts für unterschiedliche Seitentypen einrichtet und mit Fluid Templates für die Frontendausgabe verknüpft. Innerhalb eines Contentmanagement Systems ist das Frontendstyling vom Inhalt getrennt. Dennoch wollen wir natürlich unterschiedliche Seitentypen wie z.B. 1- oder 2-spaltige Ansichten einsetzten und in Backend auf Seitenebene auswählbar machen. Damit das funktioniert, speichert TYPO3 mit jedem Inhaltselement die Seite ID (auf dem der Content ausgegeben wird) und die Spaltennummer. Die entsprechenden Felder in der Datenbanktabelle tt_content sind pid und colPos. Aus der Historie hat sich eingebürgert, das der Hauptinhalt in Spalte "0" gespeichert wird, Inhalte einer linken Spalte in colPos "1", rechte Spalte colPos "2". Die Zuordnung ist nicht in Stein gemeißelt, es bietet sich aber an den Hauptinhalt in allen Backendlayouts in der gleichen Spalte zu speichern. Wird im nachhinein ein einspaltiges Layout in ein Zweispaltiges geändert, ist dann der Content immer noch in der Hauptspalte ;) Genug der Theorie, Backendlayouts werden im Ordner
my_extension/Configuration/PageTS/Mod/WebLayout/BackendLayouts/ gespeichert.

Die TYPO3 BackendLayout Datei 

mod {
    web_layout {
        BackendLayouts {
            twocols {
                title = 2-spaltige Layout 70/30
                config {
                    backend_layout {
                        colCount = 3
                        rowCount = 1
                        rows {
                            1 {
                                columns {
                                    1 {
                                        name = Content
                                        colPos = 0
                                        colspan = 2
                                    }
                                    2 {
                                        name = Sidebar
                                        colPos = 2
                                    }
                                }
                            }
                        }
                    }	
                }				
		icon = EXT:t3dev_template/ext_icon.gif
            }
        }
    }
}
Schauen wir uns die Datei im einzelnem an. In Zeile 4 "steht "twocols". Das ist der interne Name des Backendlayouts, der Dateiname sollte praktischer Weise genauso lauten, also twocols.txt. Ansonsten seit ihr frei wie ihr das Template intern bezeichnet. In Zeile 5 steht der Titel des Layouts, so wie er auch im Backend angezeigt wird. Hier kann auch genauso gut ein Language File referenziert werden. 
title = LLL:EXT:my_extension/Resources/Private/Language/Backend.xlf:backend_layout.twocols
colCount und rowCount: wieviele Spalten und Zeilen euer Layout insgesamt hat.Ein BAckendlayout ist vergleichbar mit einer Tabelle. Damit könnt ihr auch colspan und rowspan benutzen. In diesem Beispiel wird komplette Breite im Backend auf 3 Spalten verteilt, die Contentspalte hat ein colspan = 2 und ist somit doppelt so breit wie die Sidebar. Als letztes wird noch das Icon ausgewählt das in den Seiteneigenschaften später als Vorschau angezeigt wird. Im Backend habt ihr dann später eine solche Aufteilung:
Für jedes gewünschte Layout wird jetzt nach gleichem Schema eine Datei angelegt, wobei der interne Name (twocols) natürlich unterschiedlich sein muss.

Backendlayouts in TYPO3 integrieren

Damit wir nicht jede einzelne Backendlayoutdatei ins System integrieren müssen, setzten wir folgendes TypoCript Schnippsel in den Ordner my_extension/Configuration/PageTS/Mod/WebLayout/ 
<INCLUDE_TYPOSCRIPT: source="DIR:EXT:my_extension/Configuration/PageTS/Mod/WebLayout/BackendLayouts" extensions="txt">
Wir können somit später jederzeit eine weitere Backendlayoutdatei hinzufügen und diese wird automatisch im eingebunden. Bevor wir zum letzten Schritt kommen, bitte prüft nochmal euer Verzeichnis und ob die Dateinamen der BE Layouts den carray Schlüsseln in den Layoutdateien entsprechen. Verzeichnisbaum: 
my_extension
-- Configuration
---- PageTS
------ Mod
------ | web_layout.txt
------ | WebLayout
---------| BackendLayouts
-----------| onecol.txt
-----------| twocols.txt
-----------| .....
Wir müssen jetzt nur noch die Backendlayouts über die ext_localconf.php dem System hinzufügen.
Dazu ergänzen wir die Datei my_Extension/ext_localconf.php 
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPageTSConfig('<INCLUDE_TYPOSCRIPT: source="FILE:EXT:'.$_EXTKEY.'/Configuration/PageTS/Mod/web_layout.txt">');
Nachdem ihr alle Caches gelöscht habt, solltet ihr unter den Seiteneigenschaften im Backend die neuen Backendlaouts in der Auswahl sehen.
Im nächsten Beitrag werden wir die TYPO3 Backendtemplates mit individuellen Frontendtemplates verknüpfen.