Tel. 06151 / 39 10 793

Display Suite - Layout für Entities, Views und Fields

21.05.2012  • Christian Schramm 1
Display Suite - Layout für Entities, Views und Fields

Mit dem Modul Display Suite besteht die Möglichkeit, die Darstellung von Nodes, Usern, Taxonomien, Kommentaren, Views und Formularen zu übernehmen und zu bestimmen. Wo man sonst die Templates des Themes überschreiben musste, kann man nun mit Display Suite über gut bedienbare Oberflächen im Backend die Darstellung von Entities beeinflussen.

Features von Display Suite

Das Display Suite Modul (Version 1.5) besteht aus einem Hauptmodul und drei Submodulen (Extras, Forms und Search Display).

Das Hauptmodul bietet die Möglichkeit, die Darstellung innerhalb der Content Area nach eigenen Wünschen anzupassen, indem dieser Bereich in Regionen aufgeteilt und die Felder eines Entities beliebig in diese Regionen verteilt werden können. Somit hat man volle Kontrolle über das Layout innerhalb der Content Area. Ein weiterer Kernaspekt des Hauptmodules von Display Suite ist die volle Kontrolle über das HTML-Markup jedes einzelnen Feldes eines Entities sowie die Erstellung eigener View Modes.

Im Extras Modul sind sehr nützliche Zusatzfunktionen enthalten, wovon manche fast bei jedem Einsatz von Display Suite genutzt werden, wie beispielsweise die "Contextual Links" Funktion, welche die Klickwege bei der Arbeit mit Display Suite erheblich verkürzt. Wenn das Views Modul installiert ist bietet "Display Suite" die Möglichkeit auch das Layout von Views zu beeinflussen. Diese Funktion muss jedoch erst über die Konfigurationsoberfläche des Display Suite "Extras" Modules aktiviert werden. Das Submodul "Search Display" dient der Übernahme des Displays der Suche und Suchergebnisse und braucht nur bei Bedarf eingeschaltet werden. "Forms" dient der Anpassung des Layouts von Formularen.

Aufbau von Display Suite

Die Konfiguration des Display Suite Modules erfolgt über "Structure" > "Display Suite". Hier findet man folgende Möglichkeiten:

Extras: Ein- und Ausschalten der zusätzlichen Funktionalitäten aus dem "Extras" Submodule
Fields: Hinzufügen von Code-, Dynamic-, Block- oder Preprocess Feldern zum Display
Layouts: Bearbeiten der Displays von Nodes, Kommentaren, Taxonomien, Usern
Search: Übernahme der Darstellung der Suche
Styles: Definition von CSS-Klassen die dann unter "Layouts" eingesetzt werden können
View modes: Erstellen und Bearbeiten von eigenen View Modes, welche die "Full Content" und "Teaser" View Modes erweitern
Views display: Bearbeiten der Displays von Views

Übernahme des Displays von Entities

Um beispielsweise die Darstellung eines Node vom Typ "Article" anzupassen, kommt man über "Layout" > "Manage Display for Article" auf die entsprechende Konfigurationsoberfläche. Es handelt sich dabei um genau die gleiche Oberfläche die man über "Content Types" > "Article" > "Manage Display" erreichen kann. An dieser Stelle hat das Display Suite Module einige neue Funktionen hinzugefügt.

Zuerst findet man im oberen Bereich die gewohnte Darstellung der Felder des Content Types mit den üblichen Einstellmöglichkeiten. Im Menu unterhalb der Felder findet man nun jedoch eine neue Option "Layout for article in default". Dort bietet sich nun die Möglichkeit ein Layout für den Content-Bereich auszuwählen. Die Auswahl reicht von einspaltig bis vierspaltig mit oder auch ohne Header und Footer. Nach der Auswahl ändert sich der obere Bereich und man hat nun die Möglichkeit jedes einzelne Feld des Inhaltstyps in den verschiedenen Regionen des eben gewählten Layouts zu platzieren. Somit bekommt man eine vorher nie dagewesene Möglichkeit über das Backend das Layout und die Platzierung der Felder im Content Bereich zu beeinflussen, ähnlich wie in Panels, jedoch hier sehr Feldbezogen.

Display Suite bietet nicht nur die einzelnen Felder des Inhaltstypes zur Platzierung an, sondern auch sonst über die Oberfläche nicht zugängliche Elemente wie "Read more", "User picture", "Links", "Post date", "Author", "Comments" und "Tags" sind frei in den Regionen platzierbar. Für die verschiedenen Regionen werden von Display Suite im HTML Div-Container erzeugt, die eine schöne Struktur für das CSS-Styling erzeugen. An jedem Container und Element können zusätzlich eigene CSS-Klassen vergeben werden. Es gibt eine Funktion "Hide empty regions", die dafür sorgt, das leere Bereiche nicht im HTML gerendert werden. Display Suite ist auch in Drush integriert wodurch es möglich ist, via Drush eigene Layouts mit Regionen zu erstellen.

Hinzufügen von eigenen Feldern zum Display

Über "Display Suite" > "Fields" besteht die Möglichkeit zum Display (z.B. eines Nodes) weitere Felder hinzuzufügen. Hierbei gibt es die Möglichkeit des Hinzufügens von Code-, Dynamic-, Block- oder Preprocess Feldern.

Mit einem Code-Field kann man beliebigen PHP Code ausführen dessen Resultat dann in diesem Feld ausgegeben wird. Das entity-Objekt des aktuell angezeigten Entities steht hierbei zur Verfügung. Ein dynamisches Feld kann beliebigen Content von bestehenden Nodes, Forms, Widgets, Menus als Feld zum angezeigten Objekt hinzufügen. Ein Block-Feld kann beliebige existierende Blöcke als Feld hinzufügen. Mit Preprocess Feldern kann man beispielsweise "Node url" angeben und diese Syntax wird dann beim preprocessing des Nodes aufgelöst.

View Modes

In einer Standard Drupal Installation hat man nur die View Modes "full content" und "teaser" zur Verfügung. Weitere View Modes können bisweilen nur programmatisch erstellt werden. Display Suite bietet nun eine Oberfläche zur Erstellung eigener View Modes zur Verfügung.

Die Ausprägung und Darstellung der selbst erstellten View Modes können über die Oberfläche angepasst werden. Die fertig definierten eigenen View Modes können z.B. in Views, Panels oder der Suche zur Darstellung von Content ausgewählt werden. Hierfür wird für Views von Display Suite ein Row-Plugin zur Verfügung gestellt mit dem man die eigenen View Modes selektieren kann.

Darstellung von Suchergebnissen

Mit dem Submodul "Search Display" kann die Drupal-Suche besser konfiguriert werden und man kann Einfluss auf die Darstellung der Suchergebnisse nehmen. Die Suchergebnisse können mit eigenen View Modes dargestellt werden, die man in Display Suite selbst definieren kann.

Bei mehrsprachigen Auftritten ist es möglich, eine Suche nur in der aktuellen Sprache auszuführen. Des Weiteren besteht die Möglichkeit das Suchwort in den Suchergebnissen zu highlighten. Die Erweiterte Suche kann im Backend über eine Checkbox ein und ausgeschaltet werden. Suchergebnisse können nach Content Type gruppiert werden. Auch die Darstellung der Benutzersuche kann angepasst werden.

Field templates

Mit field templates kann für jedes einzelne Feld, dass dargestellt werden soll, ein eigenes HTML-Markup definiert werden. Auch hierfür wurde eine gut zu bedienende Oberfläche geschaffen und man muss nicht mehr die Field-Templates im Dateisystem überschreiben. Das Feature muss über die Extras "Enable Field Templates" aktiviert werden. Danach findet man an jedem Feld einen Link zum bearbeiten des "Field display". Die Labels können auch über die Oberfläche angepasst werden.

Für die Felder selbst gibt es vier Einstellungen: "Default" rendert das Feld ohne Änderungen, "Full Reset" entfernt jegliches HTML-Markup um das Feld selbst herum, "Minimal" lässt genau ein Div-Element um das Feld herum und entfernt alle übrigen und "Expert" überlässt einem die volle Anpassung jeglicher Container um das Feld herum bis hin zum eingesetzten HTML-Tag. Des Weiteren gibt es noch eine Einstellung zur Unterdrückung des manchmal nervigen Doppelpunktes nach dem Label. Zu jedem Feld können dann auch CSS-Klassen vergeben werden, die man vorher über die Styles definiert hat.

View Displays

Eine schönes Feature sind noch die Views Displays, mit denen man über ähnliche Oberflächen die Darstellung von Views anpassen kann. Auch hier kann wieder ein Layout gewählt werden und die Darstellung von Views mit ganzen Teasern oder auch die Platzierung einzelner Felder von Views in verschiedene Regionen des Content-Layouts ist möglich. Dies gibt der Darstellung von Views auch eine Flexibilität die bisweilen nur über das Bearbeiten von View-Templates möglich war. Sogar die Auslagerung der Exposed View Filter in andere Regionen ist mit Display Suite möglich.

Region to Block

Des Weiteren bietet Display Suite noch das Region to Block Feature, mit dem man einzelne Felder in einen Block auslagern kann, den man dann wiederum in anderen Regionen ausserhalb des Content-Bereiches auslagern kann.

Exportierbarkeit

Display Suite bietet die Möglichkeit die Einstellungen in Code zu exportieren und ist voll integriert in Features.

Fazit

Display Suite ist ein ausgereiftes Modul für Site-Building und Theming. Es ist enorm flexibel und bietet mannigfaltige Konfigurationsmöglichkeiten. Den Rest des Designs kann man anschliessend einfach mit CSS fertig themen.

Prädikat: Wertvoll

Vielen Dank für diesen phantastischen Artikel!

Ich suche gerade nach einer Möglichkeit, die Experten-Einstellungen aus den Anzeige-Einstellungen der einzelnen View-Modes in Features zu exportieren und finde keine Einstellung dazu. Habt Ihr einen Tipp?

Viele Grüße,
Ralf

Kommentar hinzufügen

Der Inhalt dieses Feldes wird nicht öffentlich zugänglich angezeigt.

Suchen


Newsletter

Melden Sie sich zu unserem kostenlosen Newsletter an. Wir informieren Sie regelmässig über unsere Leistungsangebote, Drupal Best-Practices, Mobile Apps, ERPAL Updates und Veranstaltungen.

Unsere Partner
comm-press comm-press
Drupal Spezialisten aus Hamburg
neosmart - Digital Media, Webdesign & Webentwicklung<br />
aus Darmstadt neosmart
Digital Media, Webdesign & Webentwicklung aus Darmstadt
trinomica - Software Solutions trinomica
Software Solutions
Sponsoring und Mitgliedschaften

Drupal Initiative Deutschland - Firmen-Mitglied

Wir sind Diamant Sponsors für das DrupalCamp Frankfurt 2014

So finden Sie uns