Quantcast
Channel: RedPanda - perfekt
Viewing all articles
Browse latest Browse all 3

Die beinah perfekte Bildergalerie mit Drupal

$
0
0

Meiner Meinung nach, ist Drupal nicht wirklich geeignet für die Verwaltung von vielen Fotos. Muss es auch nicht, da es dafür ja die Profis wie Picasa oder Flickr gibt. Dennoch kann man sich auf einfach Art und Weise mit Drupal eine Bildergalerie erstellen. Selbstverständlich gibt es auch für Drupal diverse Bildergalerien Module, welche eine Lösung einfach anbieten, selber machen ist aber mindesten genau so interessent und um ein vielfaches lehrreicher.

Drupalversion: 6.13

Für eine eigene Bildergalerie zu erstellen, braucht es folgende Module:

Die ersten drei Module gehören ja eigentlich zum Standard jeder Drupalinstallation, deswegen möchte ich zuerst auf das Image FUpload Modul eingehen. Zuerst muss man das Modul lokal runterladen, entpacken und ins Webverzeichnis hochladen. Nach diesem ersten Schritt muss man den SWFUpload-Core runterladen und entpacken.

Nun müssen folgende Files kopiert werden:

  • swfupload.swf
  • swfupload.js
  • swfupload.queue.js

Diese drei Files müssen in das Unterverzeichnis sites/all/modules/image_fupload/swfupload kopiert werden. Wird dies nicht gemacht, funktioniert das Upload Modul nicht. Die genau Anleitung steht auch im Readme.txt File des Modules.

Nachdem nun alle Modul einsatzbereit sind, können wir mit unserer Bildergalerie beginnen:

  • Als erstes erstellen wir einen eigenen Inhalts-Typ. Vorzugsweise nennen wir diesen Bildergalerie
    • Als zusätzliches Feld muss ein Feld für den Upload der Bilder erstellt werden.

      Node-Typ

      Das Feld sollte die Einstellung erhalten, dass jedes Bild welches hochgeladen wird als eigener Node gespeichert wird

      Einstellung des Multiuploads
    • Der Inhalts-Typ sollte so eingestellt sein, dass die Nodes veröffentlicht sind aber nicht auf der Startseite erscheinen
  • Jetzt erstellen wir zwei Taxonomie-Vokabulare, eines für die Galerie selbst und eines für die Titelbilder der Galerie
    • Das Galerien Vokabular muss als Freetaging eingestellt werden und die Eingabe ist erforderlich
    • Das Vokabular für die Titelbilder beinhaltet einfach dir Werte "Ja" und "Nein" und die Eingabe ist erforderlich
  • Vor dem Ersten hochladen der Bilder sollten noch beliebige ImageCache Presets erstellt werden. Ich habe mich für die Version "Polaroid" entschieden. Wie dieses Preset erstellt wird, kann man hier nach lesen.
  • Nun können die ersten Bilder hochgeladen werden.

    Upload

    Bilder auswäheln

    Nach dem Klick auf "Öffnen" stehen alle hochzuladenen Bilder in einer Queue. Mit dem Speichern des Nodes werden die Bilder hochgeladen.

    Hochladen der Bilder

    Nach dem hochladen der Bilder klickt man auf den Button "Next Step" und man gelangt auf die nächste Seite, wo die Individuellen Einstellungen pro Bild gemacht werden können.

    Einstellungen pro Bild ändern

    Wenn jetzt ganz unten auf "Done edit" geklickt wird, wird jedes Foto in einen eigenen Node gepeichert. Dies ist ein grosser Vorteil, da wir später mit Views auf diese Nodes zugreifen werden.
  • Nun geht es an die Views, welche aber relativ einfach aufgebaut sind.
    • Als erstes erstellen wir eine View für die komplette Übersicht der Bilder

      Bildergalerie
    • Zuerst wählen wir den richtigen Filter aus. Dies ist der Begriff aus der Taxonomie "Galerie", welcher ja allen vorhin hochgeladenen Bilder derselbe ist

      Taxonomie Einstellungen

      Filter Einstellungen
    • Jetzt sollten wir das Bild einblenden lassen. Dies geschieht beim Bereich Felder und dort wird das Inhaltsfeld ausgewählten, welches beim Nodetyp für die hochzuladenden Bilder erstellt wurde.

      Inhaltsfeld

      Beim Format wird noch ein ImageCache Preset ausgewählt. Eine Bezeichnung sollte keine verwendet werden. Nun noch "Aktualisieren" klicken und die Hälfte ist schon geschafft.
    • Jetzt geht es an die Basiseinstellungen. Beim Design wählen wir das Raster aus.

      Basiseinstellungen der View

      Jetzt noch die anzuzeigenden Beiträge auswählen, einen schönen Kopfbereich und einen passenden Seitentitel

      Die Basiseinstellungen
    • Nun muss noch eine Seiten Anzeige hinzugefügt werden. Hier ganz wichtig, dass der Pfad der View so heisst, wie der Galerientitel.

      Pfadeinstellungen
    • Jetzt noch die View speichern und fertig ist die Galerie
  • Da ja schlussendlich nicht nur eine Galerie auf der Webseite wird, müssen wir noch eine View bauen, welche alle Bildergalerien zusammenfasst.
    • Als erstes muss ein Titelbild ausgewählt werden. Dazu öffnet man den Node welches das Titelbild sein soll und wählt in der Taxonomie "Titelbild" ganz einfach "Ja" aus.
    • In der neuen View, wird nun ganz ähnlich der ersten View, wird nun beim Filter die Taxonomie "Titelbild" ausgewählt und wiederum der Begriff "Ja".
    • Bei den Feldern wird es nun ein wenig komplizierter. Zuerst wählen wir die Gruppe Taxonomie aus und kreuzen den obersten Begriff "Alle Begriffe" an

      Taxonomie Einstellungen

      Da wir den Begriff nur für einen Link brauchen, wählen wir anschliessend "Von der Anzeige ausschliessen"

      Einstellungen
    • Nun wird wiederum das zu beginn erstellte Bildfeld ausgewählt, damit das Bild erscheint. Beim Konfigurieren des Bildes muss noch der Haken bei "Output this field as a link". Der Link Pfad sollte wie unten im Bild erstellt werden. Der Platzhalter [tid] erscheint, weil wir zuerst wie oben beschrieben, die Taxonomie ausgewählt haben.

      Pfadeinstellungen

      Bei dem Format kann dann auch wieder ein ImageCache Preset ausgewählt werden. Hier nochmals der Link, wie ein ImageCache Preset erstellt werden kann.

      Foramt auswählen
    • Nun wollen wir noch den Titel der Galerie anzeigen lassen. Hier können wir die Gruppe Global auswählen und konfigurieren dieses Feld wieder ähnlich wir vorhin beim Link für das Bild.

      Titel der Bildergalerie
    • Zu guter letzt lassen wir nun noch das Beitragsdatum der Galerie einblenden.
    • Auch sollte jetzt noch die View nach dem Beitragsdatum sortiert werden.

      Diverse Einstellungen
    • Jetzt geht es noch an die Basiseinstellungen.
      • Beim Desgin "Tabelle" auswählen
      • Anzuzeigende Beiträge auf eine gewissen Betrag stellen
      • Einen schönen Kopfbereich wählen
      • Einen aussagekräftigen Titel erstellen

        Basiseinstellungen
    • Zu guter letzt, muss auch hier noch eine Seiten Anzeige hinzugefügt werden. Sollte die Galerie per Menüpunkt erscheinen, kann dieser gleich hier erstellt werden.
    • Die View sollte jetzt so aussehen:

      Die komplette View

That's all.

So haben wir nun mit wenigen Modulen und einfachen Mitteln eine nützliche und schöne Bildergalerie erstellt. Da sämtliche Bilder in eigenen Nodes abgespeichert sind, kann man jederzeit auf jedes einzelne Bild zugreifen. Dies ist der ganz grosse Vorteil dieser Art von Bildergalerie.


Viewing all articles
Browse latest Browse all 3

Latest Images

Trending Articles