Layout-Raster für Inhaltselemente mit Grid Elements
Extension Key: gridelements
Einleitung
Die Extension Grid Elements überträgt das Konzept der seit TYPO3 4.5 bekannten Backend-Layouts auf Inhaltselemente. Ein gängiges Anwendungsbeispiel wären mehrspaltige Containerelemente, in denen dann wiederum Inhaltselemente platziert werden können.
In diesem Artikel erklären wir die Installation und zeigen ein Anwendungsbeispiel an Hand eines 2-spaltigen Containerelements.
Installation
Die Extension kann ganz normal über den Extension-Manager installiert werden. Suchen Sie dazu nach dem Extension-Key gridelements.
Statisches Template hinzufügen
Anschliessend fügen Sie das statische Template der Extension Ihrem Root-Template hinzu.
Neue Funktionen im Seitenmodul
Grid Elements bringt auch einige neue Funktionen für das Seitenmodul mit.
Über das Plus-Symbol am oberen Rand öffnet sich ein Drag-in-wizard, über den man per Drag'n Drop alle verfügbaren Inhaltselemente in die Seite ziehen kann.
Im Inhaltsbereich findet sich ein neues Icon. Hier kann man über den TYPO3-Element-Browser direkt Inhalte von anderen Seiten auf die aktuelle Seite kopieren.
Ordner anlegen
Um die später anzulegenden Grid Elemente irgendwo zu speichern, legt man am besten einen eigenen Ordner dafür an.
Achtung:
Falls Sie für die Website schon einen Ordner als "Allgemeine Datensatzsammlung" definiert haben, müssen die Grid Elemente dort gespeichert werden!
Grid Element erzeugen
In dem eben erzeugten Ordner legen Sie im Listen-Modul einen neuen Datensatz an. Sie finden dann den neuen Bereich Grid Elements. Klicken Sie dort auf CE Backend Layout.
In dem sich nun öffnenden Dialog können Sie da neue Grid Element konfigurieren.
Reiter "Allgemein"
Titel:
Hier müssen Sie einen Titel für das Grid Element vergeben.
Beschreibung:
Hier können Sie eine optionale Beschreibung hinterlegen.
Darstellung:
Hier können Sie ein Icon für das Grid Element festlegen. Dieses Icon ist dann später auch im Backend sichtbar. Bei der Verwendung von mehreren Grid Elements ist das durchaus sinnvoll, um so auch die Funktion zu visualisieren.
Reiter "Configuration"
Top Level Layout:
Grid Elemente können auch ineinander verschachtelt werden. Wenn Sie den Haken hier setzen, kann das so gekennzeichnete Grid Element nicht anderen Grid Elementen untergeordnet werden.
Raster-Konfiguration:
Das Herzstück der Konfiguration. Hier wird das Layout des Grid Elements definiert. Klicken Sie dazu auf das Icon rechts des Feldes. Es öffnet sich dann der Grid Assistent. Dieser funktioniert fast genau so, wie man es von der Erzeugung von Backend Layouts her kennt.
Der Grid Wizard
Mit dem Grid Wizard können Sie das Layout definieren.
Über die kleinen Pfeile am rechten und unteren Rand können Sie weitere Spalten oder Zeilen hinzufügen und diese auch wieder entfernen. Über die größeren grauen Pfeile in den Zellen lassen sich mehrere Zellen miteinander verbinden.
Klicken Sie dann bei jeder Zelle auf das Stift-Symbol, um die einzelnen Zellen weiter zu konfigurieren!
Zellenname und Spaltennummer festlegen
Geben Sie jeder Zelle einen aussagekräftigen Namen. Dieser wird dann später auch im Seiten-Modul sichtbar sein.
Ausserdem muss jede Zelle eine eindeutige Spaltennummer (ID) haben. Über diese wird die Ausgabe der Zelle später per Typoscript definiert.
Im Bereich "Zulässige CE" können Sie einschränken, was für Arten von Inhaltselementen in der Zelle abgelegt werden dürfen. Wenn Sie hier nichts auswählen, werden alle für den jeweiligen Backend-Benutzer verfügbaren Inhaltselemente erlaubt sein.
Klicken Sie anschliessend auf "In Zelle speichern".
Um den Grid Wizard zu beenden, klicken Sie am oberen Rand auf das Icon "Speichern und schliessen".
Beispiel für komplexere Grid Elemente
Natürlich lassen sich über den Grid Wizard auch wesentlich komplexere Layouts umsetzen. Im Screenshot ein Beispiel.
Nachdem Sie den Grid Wizard gespeichert und geschlossen haben, sehen Sie im Feld "Raster-Konfiguration" die eben erzeugte Konfiguration.
Im Prinzip handelt es sich hier um normales Typoscript, welches auch manuell editiert werden kann. Wenn Sie also zum Beispiel den Namen oder die ID (colPos) einer Zelle verändern möchten, können Sie das auch direkt in diesem Feld tun, ohne noch mal den Grid Wizard starten zu müssen.
Grid Elemente verwenden
Das erzeugte Grid Element kann jetzt schon im Backend verwendet werden.
Sie können es wie andere Inhalts-Elemente auch über den Plus-Button im Inhalts-Bereich anlegen, oder Sie nutzen den neuen Drag-in-wizard und ziehen das Element an die gewünschte Position (siehe Screenshot).
Abschliessend sehen Sie die verfügbaren Inhaltsbereiche im Backend und können hier wie gewohnt Inhalte platzieren.
Die Ausgabe des Grid Elements per Typoscript konfigurieren
Obwohl die Inhalte im Gridelement jetzt schon im Frontend sichtbar sind, fehlen noch einige Schritte.
In unserem Beispiel wollen wir ja die Inhalte in zwei Spalten nebeneinander ausgeben. Wir müssen also dafür sorgen, dass die Inhalte in einer HTML-Struktur ausgegeben werden, die anschliessend ein entsprechendes Styling per CSS erlaubt.
In diesem Beispiel soll die linke Spalte von einem <div> mit der Klasse col1 und die rechte Spalte von einem <div> mit der Klasse col2 umschlossen werden.
Zusätzlich soll das gesamte Elemente von einem <div> mit der Klasse element2cols umschlossen werden. Das ist jedoch nicht zwingend notwendig (je nach CSS der restlichen Website).
Das folgende Typoscript können Sie entweder in das Setup ihres Root-Templates schreiben, oder Sie legen ein Extension-Template an und binden dieses in das Root-Template ein. Die Vorgehensweise hier ist sozusagen Geschmacksache.
Achten Sie hier darauf, dass Sie die korrekte ID des Grid Elements angeben! In meinem Beispiel ist das die 3. Falls Sie bisher nur ein Grid Element erzeugt haben, wird es wahrscheinlich die 1 sein.
# Ausgabe der Grid Elemente anpassen
tt_content.gridelements_pi1.20.10.setup {
# ID des gridelements
3 < lib.gridelements.defaultGridSetup
3 {
columns {
# colPos ID
10 < .default
10.wrap = <div class="col1">|</div>
# colPos ID
20 < .default
20.wrap = <div class="col2">|</div>
}
# Optional kann das gesamte Element noch einen wrap bekommen
wrap = <div class="element2cols">|</div>
}
}
Ausgabe im Frontend per CSS anpassen
Obwohl nach dem letzten Schritt jetzt schon die korrekte HTML-Struktur im Frontend erzeugt werden sollte, fehlt jetzt noch das Styling per CSS.
Für das Beispiel-Grid Element könnte folgender CSS-Code verwendet werden.
Achtung:
falls Sie Wert auf die korrekte Darstellung in älteren Internet Explorern legen, müsste das CSS oder auch das per Typoscript erzeugte HTML eventuell noch modifiziert werden. Beim verwendeten Code handelt es sich nur um ein einfaches Beispiel!
.element2cols { overflow:hidden;}
.col1, .col2 { width:48%; float:left; }
.col1 { margin-right:2%; }
.col2 { margin-left: 2%; }Ergebnis
Der folgende Screenshot zeigt, wie das erzeugte Grid Element in unserem Musterprojekt aussehen könnte.
