Display Suite für Drupal 7 - Tutorial
Eine Einleitung was Display Suite ist und wie es funktioniert.
Wie sollte es anders sein es ist ein Drupal Modul welches dir die volle Kontrolle über über die Ausgabe des Inhalts gibt. Wenn du dir die page.tpl anschaust und soweit verstanden hast wie und wo du deine CSS Klassen einbauen kannst, dir dann aber die Frage gestellt hast wie dies innerhalb
render($page['content']);
möglich ist. Oder du nicht viel PHP coden möchtest und auch nicht mit dem Devel Modul arbeiten möchtest nur um eine bestimmte Anordnung von z.B. Überschrift, Bild, Text o.ä. zu erreichen. Dann ist Display Suite das richtige Modul für dich. Es hat ein einfaches Drag & Drop Interface und schon einige vordefinierte Layouts. In der aktuellen Version ist es nun auch möglich Panels einzusetzen. Jeder der sich mit Drupal Theming beschäftigt sollte auch Display Suite einsetzen.
Wie man Display Suite benutzt.
Zuerst ein kurzer Blick auf die Möglichkeiten die Drupal mitbringt.
Es gibt die Felder "image, body, tags" man kann hier auch nach belieben weitere Felder hinzufügen. (Drupal 6 Benutzer kennen das vom CCK-Modul). Zudem gibt es auch noch "view-modes" (CUSTOM DISPLAY SETTINGS) diese sind: full content, Teaser, RSS, Search index, Search result. View modes sind also verschiedene Darstellungsmöglichkeiten für die Bereiche einer Webseite. Ein Teaser soll sicherlich anders aussehen als eine Artikelansicht. Man kann nun die Position der Felder durch Drag and Drop ändern und es ist möglich das Label anzuzeigen oder zu verstecken. Zudem gibt es ein paar "Format settings"
Ein beispielhafter Usecase könnte also sein:
- Teaser: nur den Text und die Tags anzeigen
- Full content: zeige Text, Tags und Bilder
Siehe die Beispiele in den nächsten Screenshots:
Welche Vorteile bietet Display Suite
Auf dem nächsten Screenshot ist das "Manage Display" Fenster zu sehen nachdem Display Suite aktiviert wurde (vergl. Screenshot oben unter "Wie man Display Suite benutzt")
Wie man sehen kann besteht nun die Möglichkeit verschiedene Layouts die one column, two columns, three columns usw. auszuwählen. Es ist ist sogar möglich eigene zu erstellen und in der Aktuellen Version kann man Panels verwenden. Was fast mit das beste ist - Das sollte man unbedingt mal ausprobieren.
Also ohne Display Suite kann man die horizontale Position der Felder verändern (was schon mehr ist als in Drupal 6) –und mit kann man eigene Layouts für die Ausgabe der Inhalte erstellen. Es war noch nie so einfach Einfluss auf die Darstellung der Inhalte zu nehmen.
Vielleicht kommt dir ja diese Situation bekannt vor:
– Ich konnte das noch nie leiden. Man ist ständig nur am rumsuchen und wenn bei einer älteren Webseite mal neue Felder hinzukommen braucht man einfach viel zu lange um diese einzubauen.
Als nächstes werde ich folgendes aufzeigen:
- Wähle ein Layout und füge deinen eigenen CSS-Code ein
- Felder den Regionen zuweisen und die Semantik ändern
- Einen eigenen Viewmode erstellen
- Display Suite mit Views verwenden
- Display Suite Felder erstellen
1. Wähle ein Layout und füge deinen eigenen CSS-Code ein
Es Beispiel wählen wir das "three column stacked" Layout aus dem pull-down Menu aus.
Wie man auf dem Screenshot sehen kann bekommt man von DS "template suggestions" und auch den Pfad wo man diese finden kann. Diese kopiert man nun einfach in seinen Themes Ordner und benennt sie entsprechen um. Dafür gibt es drei Optionen:
- für alles nodes (ds-3col-stacked--node.tpl.php)
- nur für den Inhaltstyp "article" (ds-3col-stacked--node-article.tpl.php)
- nur für den view-mode "full" (ds-3col-stacked--node-full.tpl.php).
Wenn man mehr view modes angelegt hat stehen diese hier natürlich auch als option zur Verfügung.
Auf dem folgenden Screenshot sieht man nun die Möglichkeiten die nun zur Formatierung vorhanden sind
Und so kann man diese beeinflussen:
Hier ist das geänderte Template mt den Classen vom 960gs zu sehen:
Ich hoffe das ist Verständlich un leicht nachzuvollziehen.
Es besteht auch die Möglichkeit eigene CSS Classen zu definieren: "admin/structure/ds/styles" - hier erstellt man sein gewünschte Classe ohne den "." (.classname = falsch | classname = richtig). Unter Display Settings bei "Extra classes for regions"stehen diese Classen dann zur Auswahl bereit.
2. Felder den Regionen zuweisen und die Semantik ändern
Es ganz einfach Möglich per Drag und Drop die vorhandenen Felder den gewünschten Regionen zuzuweisen. Um die Sematikt zu ändern muss man vorher die Extra Einstellungen aktivieren. Unter "admin/structure/ds/extras" einfach "Enable Field Templates" aktivieren. Auch sehr hilfreich ist: "Other" and check "Hide page title" – das ist ein sehr hilfreiches Feature.Wenn man den Titel einer Region zuweis erscheint dieser doppelt da er bereits in der page.tpl.php (<?php print $title; ?>) ausgegeben wird. Nun hat man allerding eine checkbox und kann den Titel ausblenden!
In diesem Beispiel ändern wir das Feld "subline" und geben es als H3 aus. Nachdem man das Feld der gewünschten Region zugewiesen hat klickt man auf den Link "Field display". Siehe Screenshot:
Nach dem Klick auf "Field Dusplay" stehen weitere Optionen zur Verfügung. Wie auf dem Screenshot zu sehen ist "Outer wrapper" und H3 unter Element eingetragen.
Und wie man hier sehen kann stimmt das Mark-up.
Man kann z.B. auch span oder div Tags mit Classen hinzufügen ein Usecase wäre:
<span class="readmore-link"><a href="url">Read more</a></span>
vorher/nachher
3. Einen eigenen Viewmode erstellen
Wie in diesem Beispielhaften Mockup zu erkennen benötig man of mehrere view-modes:
Hier brauchen wir vier verschiedene Teaser mit unterschiedlichen Bildgrößen, und Semantik. Mit Display Suite ist das sehr leicht zu realisieren.
Dafür klickt man einfach auf "manage view modes" und erstellt diese:
Nun haben wir mehrere View-Modes zu Verfügung und können entsprechend Templates erstellen, das könnte so aussehen:
ds-2col--node-article-teaser.tpl.php ds-2col--node-article-teaser-2.tpl.php ds-2col--node-article-teaser-3.tpl.php ds-1col--node-article-teaser-4.tpl.php ds-3col-stacked--node-article-full.tpl.php
4. Display Suite mit Views verwenden
Um die Teaser zu erstellen benötig man natürlich das Modul "views". Wer sich mit views auskennt weis das man sich hier die Felder zusammenklicken kann. Mit Display suite ist das aber noch einfacher. Man erstellt die Teaserausgabe direkt mittes DS und wählt diese dann in views aus,
Unter Format (in Views) wählt man Display Suite und stellt noch den gewünschten view mode ein. Dann kann man noch Filtereinstellungen usw. vornehmen ...
5. Display Suite Felder erstellen (In diesem Beispiel erstellen wir ein Block-Feld)
Erstmal möchte ich einen Usecase aufzeigen warum man DS-Fields manchmal benötigt.
Dieses Mock-up ist eine Node-Ansicht. Unterhalb der Bilder sieht man zwei Teaser - das könnte sowas sein wie "ähnlliche Artikel" oder referenzierte Artikel. Man baut sich also eine View mit einem Argument o.ä. zusammen und erstellt einen Block. Mit Display Suite kann man diesen Block in ein Feld "legen".
Navigiere zu: admin/structure/ds/fields/manage_block hier nun, unter Label, eine Bezeichnung vergeben. Unter Entities "Node" markieren. Den gewünchten Block auswählen, speicher und das Feld steht in DS unter "manage display" zu Verfügung..
Bei Fragen zum ganzen könnt ihr geren Kommentare hinterlassen. Ich brauche aber immer ein bisschen zu Beantworten.