Views-Theming, Anpassung der Templates view.tpl.php (Felder, Zeilen, Blöcke, Seiten). Einbindung des jQuery-Plugins EasySlider

In diesem Artikel beschäftigen wir uns mit dem Abfrage-Builder für Drupal – dem Modul Views (http://drupal.org/project/views). Views ermöglicht die Anzeige von Feldern verschiedener Inhaltstypen, Kommentaren, Taxonomie-Begriffen, Benutzerinformationen und weiteren Daten aus der Datenbank. Für dieses Modul gibt es eine grafische Benutzeroberfläche, die das einfache Erstellen von Datenbankabfragen per Mausklick erlaubt.

Achtung!!! Wenn Sie easySlider jetzt innerhalb einer Stunde nutzen wollen, empfehle ich dringend die Verwendung eines Moduls. Dieser Artikel ist in erster Linie dazu gedacht, sich mit den Templates des Views-Moduls und deren Theming auseinanderzusetzen. Um dann das Aussehen von easySlider anzupassen, müssen Sie CSS bearbeiten.

Nachdem wir die benötigten Felder ausgegeben haben, müssen wir sie so anordnen, wie wir es wünschen. Dafür gibt es Template-Dateien zur Ausgabe. Standardmäßig werden die Dateien aus dem Ordner theme verwendet.

Lassen Sie uns das jQuery-Plugin EasySlider für die von Views ausgegebenen Daten konfigurieren. Es gibt natürlich ein fertiges Modul, das in Views integriert ist, um EasySlider auszugeben, hier der Link dazu: http://drupal.org/project/easySlider

Wenn Sie Bilder als Slider ausgeben wollen, können Sie einfach das Modul installieren. Dieser Artikel zeigt jedoch, wie man mit Views-Templates umgeht.

Um zu starten, benötigen wir die Module Views, CCK, Imagecache, sowie die EasySlider-Plugin-Dateien, die Sie hier herunterladen können oder über eine andere Seite via Suche finden. Wie man das Plugin in ein Drupal-Theme einbindet, beschreibe ich weiter unten, nach der Beschreibung der CCK-Feldeinstellungen.

Die Module sind installiert, los geht’s:

1. Erstellen Sie einen neuen Inhaltstyp

Fügen Sie diesem Inhaltstyp ein neues Feld für das Hochladen von Bildern hinzu und speichern Sie. Die Position des Feldes können Sie auch weiter nach oben verschieben.

Bei den Feldeinstellungen erlauben wir eine unbegrenzte Anzahl hochladbarer Bilder und fügen Bildbeschreibungen hinzu.

2. Erstellen Sie einen Knoten (Inhalt) des Inhaltstyps Banner und laden Sie einige Bilder hoch, die im Banner angezeigt werden sollen.

3. Nun erstellen wir ein Preset (Voreinstellung) für die Bilder, die wir anzeigen möchten. Ich erstelle ein Preset mit 200x200 Pixel, Sie können die Größe wählen, die Sie brauchen.

Fügen Sie die Bildbearbeitung „And scale And crop“ hinzu. Meine Größe ist 200x200, bei Ihnen wird es wahrscheinlich eine andere sein:

4. Alles bereit, um die Ausgabe dieses Feldes mit Bildern (via Views) als Liste in einem separaten Block zu machen:

Neuen View (Ansicht) hinzufügen

Fügen Sie das Feld Bild hinzu

Folgende Einstellungen wählen: Gruppierung der Werte entfernen, Feldüberschrift entfernen, Bildgröße auf das Preset setzen.

Bei den Filtern einstellen:
Inhalt: Veröffentlicht – Ja
Inhalt: Typ – Banner

Bei den Grundeinstellungen:
Stil: HTML-Liste

Anzeige im Block hinzufügen.

Das Ergebnis sieht so aus:

Im Vorschaufenster sollten die Bilder für den Banner angezeigt werden.

5. Fügen Sie den Block einer Region hinzu und schauen Sie sich das Ergebnis an.

Hm… Das sieht nicht nach einem Slider aus. Wir werden easySlider installieren.

6. Entpacken Sie easySlider, den Sie am Anfang des Artikels herunterladen konnten. Im Plugin-Ordner gibt es Beispiele, wie der Slider aussieht. Wir nehmen Beispiel 2 aus der Datei 2.html. Den CSS-Code kopieren wir in die style.css Ihres Themes, die Bilder aus dem Plugin-Ordner images kopieren wir in den images-Ordner Ihres Themes.

7. Im Ordner js des Plugins liegt die Datei easySlider1.5.js, diese kopieren wir ebenfalls in den aktuellen Theme-Ordner von Drupal, am besten in einen js-Ordner für JavaScript-Dateien. Die Datei binden Sie in der Theme-Datei theme-name.info ein, indem Sie diesen Code hinzufügen:

Cache aktualisieren, die Datei easySlider1.5.js sollte eingebunden sein:

Wenn Sie diese Datei öffnen, sehen Sie Hinweise, wie der Block aussehen muss, damit der Slider funktioniert.

Nun schauen wir uns den Block mit Firebug für Firefox, Dragonfly für Opera oder DOM-Inspector in Chrome an. Ich benutze Firebug, weil er am bequemsten ist.

Views hat viele div-Elemente hinzugefügt, die normalerweise beim Layout helfen, hier aber stören. Diese müssen wir entfernen.

8. Zurück zum erstellten View: Klicken Sie auf den Link Theme: information. Eine Liste der Templates erscheint, die Sie anpassen können.

Fett gedruckt sind die Templates, über die die Ausgabe standardmäßig läuft. Diese liegen im Theme-Ordner des Views-Moduls. Neben den fett gedruckten sind Dateien aufgeführt, mit denen Sie die Standardausgabe überschreiben können, z. B. views-view-fields--view-banner.tpl.php.

Schauen wir uns zuerst die Datei views-view-fields.tpl.php an:

Oben ist der Kommentar der Datei (grün hervorgehoben). Die Ausgabe ist in einer foreach-Schleife, so wird jeder Datensatz ausgegeben. $field->separator sind Trennzeichen, die wir nicht brauchen, also entfernen wir sie. Wir löschen aber nicht die Originaldatei, sondern erstellen eine Kopie namens views-view-fields--view-banner.tpl.php im Theme-Ordner. $field->label ist die Überschrift des Feldes, die wir nicht brauchen und ebenfalls entfernen. $field->inline_html ist normalerweise ein umschließendes div, das wir ebenfalls löschen, ebenso die schließende Zeile des div-Tags:

<?php print $field->inline_html; ?>

Speichern Sie das Template, leeren Sie den Drupal-Cache und prüfen Sie die Ausgabe erneut mit Firebug:

Jetzt sind die Listenelemente (li-Tags) näher an den Bildern. Entfernen wir noch die span-Tags im Template:

<?php print $field->element_type; ?> class="field-content">

und

<?php print $field->element_type; ?>

Nach der Bereinigung bleibt folgender Code:

Das ist nur noch wenig vom Standardtemplate übrig, aber ausreichend. Speichern Sie und schauen Sie sich die Ausgabe an:

Deutlich besser. Jetzt nutzen wir ein anderes Template, um folgende Tags zu entfernen:

<div class="view-content"><div class="item-list">

Das erreichen wir mit dem Template views-view--view-banner.tpl.php, das wir im Theme-Ordner anlegen. Den Code dafür kopieren wir aus views-view.tpl.php. Dieses Template enthält viele hilfreiche Elemente, z.B. einen Block mit Klassen, der das gesamte Template umschließt:

<div class="<?php print $classes; ?>">

Der View-Titel (nicht das Feld, sondern der separate View-Titel):

<?php if ($header): ?>
  <div class="view-header">
    <?php print $header; ?>
  </div>
<?php endif; ?>

Exponierte Filter (ermöglichen dynamische Filterung der View-Ausgabe):

<?php if ($exposed): ?>
  <div class="view-filters">
    <?php print $exposed; ?>
  </div>
<?php endif; ?>

Anhänge vor der View-Ausgabe:

<?php if ($attachment_before): ?>
  <div class="attachment attachment-before">
    <?php print $attachment_before; ?>
  </div>
<?php endif; ?>

Die über Views ausgegebenen Felder:

<?php if ($rows): ?>
  <div class="view-content">
    <?php print $rows; ?>
  </div>
<?php elseif ($empty): ?>
  <div class="view-empty">
    <?php print $empty; ?>
  </div>
<?php endif; ?>

Pager (Seitenumbruch):

<?php if ($pager): ?>
  <?php print $pager; ?>
<?php endif; ?>

Anhänge nach der View-Ausgabe:

<?php if ($attachment_after): ?>
  <div class="attachment attachment-after">
    <?php print $attachment_after; ?>
  </div>
<?php endif; ?>

Link „mehr lesen“:

<?php if ($more): ?>
  <?php print $more; ?>
<?php endif; ?>

Footer der View, separat konfigurierbar:

<?php if ($footer): ?>
  <div class="view-footer">
    <?php print $footer; ?>
  </div>
<?php endif; ?>

RSS-Feed-Icon:

<?php if ($feed_icon): ?>
  <div class="feed-icon">
    <?php print $feed_icon; ?>
  </div>
<?php endif; ?>

Ich lasse nur das Nötigste stehen, hier das Ergebnis:

Jetzt entfernen wir noch

<div class="item-list"></div>

Dieser Block wird im Template views-view-list.tpl.php definiert (Datei befindet sich im Ordner sites/all/modules/views-6.x-2.12/views/theme/). Wir überschreiben es mit dem Template views-view-list--view-banner.tpl.php.

Um alle anderen unnötigen div-Tags zu entfernen, fügen wir Code in das Template block.tpl.php ein. Falls dieses Template in Ihrem Theme nicht existiert, kopieren Sie es aus dem Modul Block in Ihr Theme, um es überschreiben zu können.

Wir ändern den Code in block.tpl.php, um unnötige Blöcke zu entfernen und fügen dem Block die id="slider" hinzu, indem wir eine if-Bedingung ergänzen:

Die Variable $block->delta wird von Drupal je nach Modul, das den Block erstellt, generiert. In meinem Fall ist diese Variable für den Banner so (blau markiert):

Cache leeren und die Seite prüfen. Sie sollte so aussehen:

Wie oben beschrieben folgt zuerst div id="slider", dann eine ul (Liste) mit li-Elementen.

Jetzt fügen wir ein kleines JavaScript hinzu, um den Slider zu initialisieren:

JavaScript kann direkt in page.tpl.php eingefügt oder in eine separate Datei z.B. js/custom.js ausgelagert werden.

EasySlider funktioniert jetzt, aber das CSS muss noch angepasst werden, damit alles korrekt dargestellt wird:

Natürlich ist es einfacher, ein fertiges Modul für eine Karussell- oder Slider-Anzeige zu nutzen. Aber was, wenn es kein Modul gibt, das Sie brauchen, und Sie nur ein jQuery-Plugin haben? Dann warten Sie sicher nicht darauf, dass jemand ein Modul dafür schreibt.