Zusätzliches Backend Layout in Typo3 Threeme anlegen

Schema für das BackendLayout

Für ein Bachelor Projekt eines Freundes nutze ich eine Typo3 Instanz (7.6) mit einer Threeme Distribution aus dem Extension Repository. Ziel ist es eine Seite zu generieren, die Inhalte darstellt und redaktionell leicht für Leute bedienbar ist, die nicht so tief in Typo3 und Typoscript stecken. Später soll die Arbeit an einen Verein übergeben werden, der nach Anleitung die Inhalte pflegt. Threeme wirbt vollmundig mit einem einfachen Bedienkonzept und bringt auf den ersten Blick eine gute Dokumentation mit. Bei etwas größeren Anpassungswünschen wird allerdings einiges an Wissen vorausgesetzt. Daher dieses kleine Tutorial für alle die Threeme noch etwas erweitern wollen.

Nach der Installation fielen mir gleich einige Bugs mit den mitgelieferten Medien auf um die ich mich aber später kümmern will. Viel interessanter ist im Moment das Anlegen eines zusätzlichen Backend Layouts, da die drei mitgelieferten Layouts nicht unseren Verwendungszweck abdecken.

Einige Vorüberlegungen

Im Prinzip sollen Pflanzen flexibel auf Seiten und Unterseiten dargestellt werden. Zwar könnte man dafür auch eine Extension programmieren, aber in Hinblick auf die Flexibilität und spätere Pflegbarkeit fiel die Wahl dann doch auf klassische Inhaltselemente. Die Ansicht sollte dabei folgendermaßen aussehen:

Schema für das BackendLayout in Threeme
image-538

Schema für das Backend Layout

Die Idee ist es dabei ein Backend Layout zu generieren, welches das oben gezeigte Schema umsetzt.

Die Umsetzung in Threeme

Wo befinden sich die notwendigen Dateien?

Beim Einarbeiten in die Logik der Extension fiel mir zunächst auf, dass der Großteil der Änderungen innerhalb der Extension selbst vollzogen wird. Das ist dahingehend ungünstig weil mögliche Updates über den Extensionmanager die getätigten Änderungen einfach überschreiben. Das lässt sich zwar sicherlich auch umgehen, für den schnellen Erfolg arbeiten wir für den Moment allerdings unter:

typo3conf/ext/threeme

Threeme nutzt die Extension Mask um Backend Layout zu generieren und im Frontend auszugeben. Allerdings haben sich die Entwickler entschieden anstatt auf die Drag&Drop Lösung von Mask auf separate Dateien innerhalb der Extension zu setzen. Um ein neues Backend Layout anzulegen muss man in folgende Ordner:

typo3conf\ext\threeme\Configuration\TSconfig\BackendLayout
typo3conf\ext\threeme\Resources\Private\Fluid\Frontend\Templates
typo3conf\ext\threeme\Resources\Private\Fluid\Languages\
typo3conf\ext\threeme\Resources\Public\Images\BackendLayout

What’s up copycat?

Anstatt das Rad neu zu erfinden, erarbeiten wir uns anhand bestehender Dateien einfach ein neues Backend Layout. Dazu kopieren wir die:

typo3conf\ext\threeme\Configuration\TSconfig\BackendLayout\Default.ts

und nennen diese Datei in Pflanzen.ts um. Wir erhalten damit folgende Struktur:

Pflanzen.ts
image-539

Die Struktur in der TSconfig

Das gleiche Verfahren wenden wir mit der:

typo3conf\ext\threeme\Resources\Private\Fluid\Frontend\Templates\Default.html

an. Hier erhalten wir folgende Ansicht:

Pflanzen.html
image-540

Die Ordnderstruktur der Templates

Die Pflanzen.ts

Widmen wir uns zunächst der Pflanzen.ts.

Struktur der Pflanzen.ts
image-541

Struktur der Pflanzen.ts

Zunächst ändere ich:

mod.web_layout.BackendLayouts {
Default {
icon = EXT:threeme/Resources/Public/Images/BackendLayout/Default.png
title = LLL:EXT:threeme/Resources/Private/Language/locallang_pagets.xlf:BackendLayouts.default.title
...

in

mod.web_layout.BackendLayouts {
Pflanzen {
icon = EXT:threeme/Resources/Public/Images/BackendLayout/Pflanzen.png
title = LLL:EXT:threeme/Resources/Private/Language/locallang_pagets.xlf:BackendLayouts.pflanzen.title
...

um. Das ursprüngliche Layout besteht in unserem Beispiel aus drei Zeilen und zwei Spalten:

Raster Default Backend Layout
image-542

Raster Default Backend Layout

Dabei sind die beiden ersten Zeilen über je zwei Spalten verbunden:

Verbundene Zeilen
image-543

Verbundene Zeilen

Das spiegelt sich auch im folgenden Code-Schnipsel wieder:

config {
backend_layout {
colCount = 2
rowCount = 3
rows {
1 {
columns {
1 {
...
colspan = 2

In meinem Backend Layout möchte ich anstatt einer Inhaltsspalte zwei Inhaltsspalten nebeneinander haben. Dafür ändere ich zunächst unter:

2 {
columns {
1 {
name = LLL:EXT:threeme/Resources/Private/Language/locallang_pagets.xlf:tt_content.colPos.altLabels.0
colPos = 0
colspan = 2
}
}
}

den colspan von 2 auf 1 und füge eine weitere Spalte ein:

2 {
columns {
1 {
name = LLL:EXT:threeme/Resources/Private/Language/locallang_pagets.xlf:tt_content.colPos.altLabels.1
colPos = 1
colspan = 1
}
2 {
name = LLL:EXT:threeme/Resources/Private/Language/locallang_pagets.xlf:tt_content.colPos.altLabels.2
colPos = 2
colspan = 1
}
}
}

In der threeme/Resources/Private/Language/locallang_pagets.xlf befinden sich die Label für die Spalten und der jeweilige Code gibt einen Hinweise zur Anpassung. Aus:

name = LLL:EXT:threeme/Resources/Private/Language/locallang_pagets.xlf:tt_content.colPos.altLabels.0
colPos = 0

im Original Default Backend Layout wird dabei:

name = LLL:EXT:threeme/Resources/Private/Language/locallang_pagets.xlf:tt_content.colPos.altLabels.1
colPos = 1
...
name = LLL:EXT:threeme/Resources/Private/Language/locallang_pagets.xlf:tt_content.colPos.altLabels.2
colPos = 2

Die Pflanzen.html

Kommen wir nun zur Pflanzen.html. Hier passen wir zunächst die folgende Zeile an:

Spaltenübergreifender Inhalt
image-544

Spaltenübergreifender Inhalt

und ändern diese in:

zwei Inhalte
image-545

zwei Inhalte

Damit stehen die beiden Inhalte zunächst untereinander. Die entsprechende Anpassung nehmen wir später vor.

Die de.locallang_pagets.xlf

Die Label und ihre Übersetzungen werden in der de.locallang_pagets.xlf vorgenommen. Hier binde ich noch den Namen des neuen Backen Layouts ein:

Sprachdatei mit zusätzlichem Eintrag für das neue Backend Layout
image-546

Sprachdatei mit zusätzlichem Eintrag für das neue Backend Layout

Ein eigenes Icon für das Backend Layout

Last but not least benötigt unser Backend Layout noch ein eigenes Icon. Dazu kopieren wir uns aus dem Ordner:
typo3conf\ext\threeme\Resources\Public\Images\BackendLayout
die Default.png heraus und erstellen in einem Grafikprogramm eine Pflanzen.png

Pflanzen.png
image-547

Pflanzen.png

Ein erster Test

Im Backend von Typo3 sieht man unter den Seiteneigenschaften nun unser neues Layout zur Auswahl:

Seiteneigenschaften Backend Layout Pflanzen
image-548

Seiteneigenschaften Backend Layout Pflanzen

Sollte „Pflanzen“ im Auswahlfeld nicht erscheinen, hilft das Leeren des Caches im Install Tool.

Im Backend sieht das dann so aus:

Backend mit Planzen Layout
image-549

Backend mit Planzen Layout

Nebeneinander statt aneinander vorbei

Füllen wir nun mal die neuen Inhaltsspalten mit Inhalt:

Testinhalt
image-550

Testinhalt


Im Frontend erscheinen die Inhalte untereinander anstatt nebeneinander:
Inhalt untereinander
image-551

Inhalt untereinander


Also müssen wir die Pflanzen.html noch etwas anpassen. Aus:
zwei Inhalte
image-552

zwei Inhalte


machen wir:
Zusätzliche DIV Tags
image-553

Zusätzliche DIV Tags


Damit sieht das Frontend so aus:
Frontendausgabe
image-554

Frontendausgabe