Dank Weiterentwicklungen im TYPO3 und einigen Erweiterungen, lassen sich heutzutage komfortable Layouts im Seiten-Modul erstellen, die der gewünschten Frontend-Ausgabe sehr nahe kommen.
Davon profitiert schließlich eine Benutzergruppe am meisten: die Redakteure. Inhalte können im Seiten-Modul optisch fast genau so wie auf der Website strukturiert werden, womit die Zuordnung und damit die inhaltliche Pflege deutlich vereinfacht wird.
Dabei kommen zwei Bausteine zum Einsatz:
- Backend-Layouts und
- Raster-Elemente
Backend-Layouts
Backend-Layouts haben mit TYPO3 Version 4.5 Einzug gehalten und erinnern etwas an die Backend-Gestaltungsmöglichkeiten von TemplaVoila. Zur Verwendung legt man einen neuen Systemdatensatz vom Typ Backend-Layout an.
Neben Titel, Symbol und Beschreibung stellt das Feld Konfiguration den Kern des Layouts dar. Auch wenn die Syntax zur Einrichtung von Spalten und Zeilen grundsätzlich nicht kompliziert ist, empfiehlt sich dennoch der Einsatz des Assistenten.
In diesem können beliebige Konstellationen von Zeilen und Spalten angelegt, zusammengeführt und auch wieder getrennt werden.
Der Zellenname wird später im Seitenmodul angezeigt, die Spaltennummer entspricht der colPos-Spalte der tt_content-Tabelle. Inhaltselemente in diesem Feld erhalten also später die hier eingestellte Nummer.
Als Name kann statt einem statischen Text auch ein Verweis auf eine Übersetzungsdatei angegeben werden, womit die Bezeichnung abhängig von der Backend-Sprache übersetzt werden kann. Ein Beispiel:
Name: LLL:fileadmin/templates/locallang.xml:main.content
Inhalt dieser locallang.xml:
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3locallang>
<data type="array">
<languageKey index="default" type="array">
<label index="main.content">Content</label>
</languageKey>
<languageKey index="de" type="array">
<label index="main.content">Inhalt</label>
</languageKey>
</data>
</T3locallang>
Die eigentliche Ausgabe der Daten erfolgt dann wie gehabt abhängig von der gewünschten Technik.
Raster-Elemente
Raster-Elemente stehen nach der Installation der Erweiterung gridelements zur Verfügung und werden voraussichtlich mit einer späteren TYPO3-Version zum Standardrepertoire gehören. Der Vorteil dieser „Mini-Vorlagen“ ist, ähnlich wie Flexible Content Elements (FCE) in TemplaVoila, dass für Redakteure sichtbar ist, wie eine konkrete Anordnung von Inhalten im Frontend zustande kommt. Über die Auswahl eines anderen Layouts oder gar die veränderte Verarbeitung abhängig von der Seiten-ID gibt es diese Möglichkeit nicht.
Die Einrichtung gestaltet sich ähnlich der von Backend-Layouts; es wird ein Datensatz vom Typ CE Backend Layout (CE = Content Element) erstellt. Angegeben werden können auf dem Allgemein-Reiter neben Titel noch eine Beschreibung und ein Icon. Dies alles wird später im Wizard für neue Inhaltselemente angezeigt und kann der Orientierung hilfreich sein. Ein gutes Icon ist daher sehr empfehlenswert.
Auf dem Reiter Konfiguration kann dann die bekannte Backend-Layout-Konfiguration eingegeben odermit dem Assistenten grafisch aufgebaut werden. Da es sich hierbei um exakt dasselbe Vorgehen wie bei Backend-Layouts handelt, wollen wir darauf nicht noch einmal näher eingehen.
Die Einbindung des Statischen Templates der gridelements-Erweiterung ist für die folgenden Schritte unerlässlich:
Um nun auch im Frontend eine entsprechende Strukturierung und Formatierung der angelegten Felder zu erreichen, bedarf es etwas TypoScript. Hierzu wird die Spaltenkonfiguration um Einträge erweitert, deren numerischer Schlüssel der UID des betreffenden Raster-Elements entspricht.
So hat z.B. das Raster-Element „2-spaltig“ im Folgenden die ID 1, wird also auch darüber angesprochen:
tt_content.gridelements_pi1.20.10.setup {
// 2 columns grid CE
1 < .default
1 {
wrap = <div class="columns columns2">|</div>
columns {
// 1st column
0 < .default
0.wrap = <div class="column column1">|</div>
// 2nd column
1 < .default
1.wrap = <div class="column column2">|</div>
}
}
// ...
}
Die grundsätzliche Vorgehensweise ist immer gleich: man kopiert sich alles aus dem default-Zweig und ergänzt wraps für das Element selbst sowie die einzelnen Felder (columns). Auch hier empfiehlt sich wieder das Kopieren des default-Zweigs. Die numerischen Schlüssel entsprechen hier der Spaltennummer (colPos) wie im Layout definiert. Das konkrete Beispiel würde also folgende Ausgabe erzeugen:
<div class="columns columns2>
<div class="column column1">
<!-- Inhalt der 1. Spalte -->
</div>
<div class="column column2>
<!-- Inhalt der 2. Spalte -->
</div>
</div>
Dies kann dann nach Belieben formatiert werden; auch komplexere Anordnungen sind somit kein Problem.
Weitere Daten durch Extra-Felder
Eine Besonderheit bei Raster-Elementen im Vergleich zu Backend-Layouts ist das Feld Flexform-Konfiguration. Über dieses Feld können beliebige weitere Datenfelder zu Raster-Elementen hinzugefügt werden. Der Wert dieses Feldes muss hierbei eine vollständiges Flexform sein. So ist es mit folgendem Beispiel möglich, ein Textfeld für die Eingabe einer Zusammenfassung hinzuzufügen:
<T3DataStructure>
<meta>
<langDisable>1</langDisable>
</meta>
<ROOT>
<type>array</type>
<el>
<teaser>
<TCEforms>
<label>LLL:fileadmin/typoscript/locallang.xml:teaser</label>
<config>
<type>text</type>
<cols>30</cols>
<rows>5</rows>
</config>
</TCEforms>
</teaser>
</el>
</ROOT>
</T3DataStructure>
Das Feld teaser wird hiermit beim Bearbeiten des Raster-Elements angezeigt:
Da es sich hierbei um regulären Flexform-Inhalt handelt, können beliebig komplexe Formulare aufgebaut werden. Auch Übersetzungen sind, wie im Beispiel zu sehen, kein Problem. Die im Beispiel referenzierte Übersetzungsdatei gestaltet sich minimal:
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3locallang>
<data type="array">
<languageKey index="default" type="array">
<label index="teaser">Teaser</label>
</languageKey>
<languageKey index="de" type="array">
<label index="teaser">Zusammenfassung</label>
</languageKey>
</data>
</T3locallang>
Um nun den Wert der zusätzlichen Felder auszuwerten, muss lediglich die Spaltenkonfiguration erweitert werden:
tt_content.gridelements_pi1.20.10.setup {
// 2 columns grid CE
1 < .default
1 {
wrap = <div class="columns columns2">|</div>
prepend = TEXT
prepend {
field = flexform_teaser
wrap = <div class="teaser">|</div>
required = 1
}
columns {
// 1st column
0 < .default
0.wrap = <div class="column column1">|</div>
// 2nd column
1 < .default
1.wrap = <div class="column column2">|</div>
}
}
// ...
}
Im konkreten Beispiel wurde die stdWrap-Eigenschaft prepend genutzt, um die Zusammenfassung vor den eigentlichen Spalten auszugeben.
Wichtig: Zu beachten ist, dass der ursprünglich angegebenen Feldnamen teaser durch die gridelements-Erweiterung automatisch in flexform_teaser umbenannt wurde.
Die Ausgabe des Raster-Elements würde sich damit wie folgt verändern:
<div class="teaser"><!-- Zusammenfassung --></div>
<div class="columns columns2>
<div class="column column1">
<!-- Inhalt der 1. Spalte -->
</div>
<div class="column column2>
<!-- Inhalt der 2. Spalte -->
</div>
</div>
Drag-and-Drop
Neben der Möglichkeit, Raster-Elemente zu erzeugen, bietet die gridelements-Erweiterung noch weitere Features, die insbesondere die Arbeit für Redakteure vereinfacht. Dazu zählt zum einen die Möglichkeit, neue oder bestehende Inhaltselemente per Drag-and-Drop an die gewünschte Stelle zu ziehen. Dazu wird die Schaltfläche „Neues Inhaltselement anlegen“ umfunktioniert:
Inhaltselemente können nun per Drag-and-Drop aus einem dieser Reiter gezogen und an der gewünschten Position abgelegt werden:
Das Ergebnis ist wie gewünscht und erwartet:
Bestehende Inhaltselemente können beliebig zwischen regulären Seitenspalten und Raster-Elementen hin und her gezogen werden. Beim Gedrückt-Halten der Strg-Taste wird eine Kopie des gezogenen Elements angelegt.
Ähnlich wie die Reiter-Anordnung von Inhaltselementen für die Seite, wird auch der Assistent für Inhaltselemente für Spalten übersichtlicher dargestellt:
Fazit
Mit diesen neuen Elementen zur Strukurierung von Inhalten im TYPO3-Backend können selbst ausgefallene Anordnungen von Inhalten nachgebildet und damit besser zugänglich gemacht werden.
Sie sind ein TYPO3-Entwickler und suchen Herausforderungen?
Dann bewerben Sie sich in unserer Agentur. Zu den Stellenangeboten unserer Agentur.