Die beinah perfekte Bildergalerie mit Drupal

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.

Kommentare

 Hey, echt coole Sache, diese Galerie, vor allem die Presets finde ich gut.

Ich habe aber noch eine Frage:

Man erstellt ja für die Galerie eine eigene View mit einem Pfad zu dieser Galerie. In deinem Beispiel erstellst du also eine View für eine Terminator-Galerie und gibst als Pfad "Terminator.html" an.

Muss man also immer für jede Galerie manuell eine neue View basteln? Oder lässt es sich auch so einrichten, dass man eine neue Galerie mittels Freetagging anlegt und diese dann gleich schön im Raster angelegt wird usw?

Weil auf meiner Seite mehrere Leute Galerien anlegen können sollen, aber die sollten keinen Zugriff auf Views haben...

Am besten wäre, wenn die ihre Bilder alle hochladen, im Freetagging-Feld eine neue Galerie anlegen und dann kann man in den Hauptlinks auf den Punkt "Galerien" klicken und schwupps - die neue Galerie ist da.
Geht das?

mfg Exterior

 

Hi Exterior

Ja, in dieser Version musst du für jede Gallerie eine eigene View bauen. Eignet sich leider nicht für mehrere User. Bei einer Version für mehrere User, müsste man einen anderen Weg gehen. Da würde ich in Betracht ziehen, dass die User ihre Bilder in nur einen Node hochladen. So wäre dann jeder Node eine Gallerie. Dann müsste man nur noch eine View machen, in welcher die verschiedenen Nodes zu sehen sind. Das würde relativ einfach gehen, wenn du einen eigenen Content-Typ machst für die Gallerie-Nodes. Die Presets solltest du ja auch anwenden können, wenn die Bilder in einem Node sind.

Viel Spass beim Bauen.

Gruss
redpanda

Hallo redpanda, Deine Imagepresets sind Spitze. Damit bin ich jetzt in einem Projekt deutlich weiter gekommen. Ich baue allerdings die Gallerie über Taxonomie auf: - Titel der Galerie in Vokabular Photoalben eintragen - Bilder mit FTP hochladen - mit Imagefile_import alle Bilder mit einem Taxonomy-Tag versehen (dem Namen der Galerie) - Mein View arbeitet mit einem Argument (Namen der Gallerie als Taxonomy Term) und wird dann angezeigt mittels: Album/Name der Gallerie. Ich benötige also lediglich einen neuen Menüeintrag, um die Gallerie zu zeigen und keinen neuen View. Beste Grüße Werner

Hi wla, vielen Dank für dein Feedback.

Deine Idee tönt gut und scheint einfacher zu sein. Werde es bei Gelegenheit mal nachbauen. Wahrscheinlich heisst es darum die "Fast perfekte Bildergalerie" ;-)

Bis bald
Gruss
Michi

Hi
Leider ist die Galerie - trotz Anmeldung - nicht sichtbar...
 
LG
cyaneo

Dann scheinst du noch irgendwo die Berechtigungen nicht richtig vergeben zu haben. Schau dort doch mal nach.

Gruss
redpanda

Wo finde ich denn die Einstellungen für "one image per node" aus "Das Feld sollte die Einstellung erhalten, dass jedes Bild welches hochgeladen wird als eigener Node gespeichert wird"? Ich finde das nicht. Auch habe noch Probleme, Bilder hochzuladen. Ich kann zwar ein Bild auswählen, dann auf hochladen drücken. Bei "next step" heisst es dann jedoch, dass kein Bild in der Warteschlage wäre.....

Vorab danke für die Hilfe.

Gruß Mad Elk

Hallo Mad Elk

Im zweiten Bild im Tutorial siehts du, wo die Einstellung gemacht werden muss (Schau auch hier). Die Einstellung muss im Inhaltstyp gemacht werden, beim Feld welches du angelegt hast.

Das zweite Problem scheint ein wenig komisch. Du wählst die Bilder aus, klickst dann ganz unten auf Speichern, dann werden die Bilder hochgeladen...anschliessend passiert nichts, wenn du auf "Next Step" klickst? Kann das sein, weil du die Option "Ein Bild pro Node" noch nicht ausgewählt hast?

Gruss
RedPanda

Hi,

mir ist gerade aufgefallen, dass ich beim Erstellen des Feldes lediglich die Möglichkeit habe, "Dateiupload" zu wählen. "ImageFUpload" steht nicht zur Verfügung. Wie ich jetzt gesehen habe, steht bei den Modulen bei ImageFupload (CCK)

6.x-2.2 Allows uploading several images all at once to ImageField module
Abhängig von: Image FUpload (aktiviert), Content (aktiviert), FileField (aktiviert), ImageField (aktiviert), Not useable yet (fehlt)

Warum das jetzt "not useable" ist und was fehlt, steht nicht dort....Darum geht das auch mit dem Upload nicht richtig...

Haste hierfür noch einen Tipp?

Gruß

das Installieren des 6.x-3.0-rc2 von ImageFUpload brachte den Erfolg....hatte zuvor die 6.x.2.2 installiert.

So ein Modul-Update birgt manchmal wunder ;-)

Viel spass noch.

Aber weiter komme ich doch nicht. Wenn ich Bilder hochladen will erscheint "Bild erstellen
2 files uploaded. Please wait until all images have been processed..." und dann geschieht gar nix mehr. Das Bild hat eine Größe von 39kb. Wenn ich dann auf "speichern" klicke, heißt es, dass keine Bilder ausgewählt wären....

Komisch...ich habe auch schon mal gehört, dass das Tool Probleme macht, wenn du hinter einem Proxy arbeitest. Aber das wird es wohl nicht sein.

Danke für den Link. Werde mir das Video mal anschauen. Lullabots haben immer wieder gute Casts.

Hey,

danke für das howto. Bei mir zeigt er allerdings das "Select Images"-Icon nicht an, sodass ich keine Bilder hochladen kann. Wo habe ich vielleicht was vergessen?

Hey,

hab alles nochmal von vorn gemacht, es hilft nix. Drupal sagt zwar, dass ich das Icon anklicken soll, aber es ist ja nicht da :-( Woran kann das liegen?

Die Pfade in den Einstellungen stimmen...

So eine Fernanalyse ist noch schwierig. Hast du schon mal das ganze in einem anderen Browser versucht? Evtl. würde ich auch mal den Drupalcache löschen. Vielleicht bringt das noch etwas.

Ja, alles probiert. Habe das Problem bei zwei Projekten, vermute also, es fehlt ein Modul o.ä.