Einfache Bildergalerie mit Colorbox

In diesem Tutorial wird erklärt, wie man für Drupal 7 mit wenig Aufwand eine schöne Bildergalerie mit Lightbox-Effekt erstellen kann.
Module
Folgende Module müssen für die Bildergalerie installiert werden / sein.• Field*
• Image*
• Colorbox
* Diese Module sind bereits bei der vollständigen Drupal-7-Core-Installation dabei.
Colorbox uploaden und Module installieren
Bevor das Modul Colorbox installiert wird, sollte das Plug-In Colorbox hochgeladen werden. Das Plug-In ist hier zu finden: http://www.jacklmoore.com/colorbox. Lade das Plug-In herunter, entpacke es vollständig und lade es über eine ftp-Verbindung in das Verzeichnis "sites/all/libraries". Ist das Verzeichnis noch nicht vorhanden, muss es erstellt werden.Anschließend können die Module der Reihe nach installiert werden. Dazu einfach den Pfad zum Download kopieren und unter Module>Neues Modul installieren einfügen.
Neue Bildstile für die Galerie definieren
Bildstile können im Adminbereich unter Konfiguration>Bildstile definiert werden. Klicke dort auf + Stil hinzufügen. Als Erstes definieren wir, wie das Vorschaubild (Thumbnail) aussehen soll.Nach dem Erstellen des neuen Stils gelangt man direkt auf die Bearbeitungsseite. Dort wird auf der rechten Seite angezeigt, wie das Bild aussehen wird. Unten können die Effekte eingestellt werden. Für das Vorschaubild wählen wir den Effekt Skalieren und zuschneiden und fügen diesen hinzu.
Dasselbe machen wir nun für das effektive Bild. So stellen wir sicher, dass später alle Bilder gleich groß angezeigt werden, und dass zu große Bilder automatisch zugeschnitten werden. Wir erstellen also einen weiteren Stil "galerie_view" und lassen das Bild so auf 800x600 px zuschneiden und verkleinern (-> wie vorher Skalieren und zuschneiden).
Neuen Inhaltstyp "Galerie" erstellen
Die Inhaltstypen werden im Admin-Bereich unter "Struktur>Inhaltstypen" definiert. Wir fügen einen neuen Inhaltstyp für die Galerie hinzu. Stelle den Inhaltstyp wie gewünscht ein und klicke auf "Speichern und Felder hinzufügen".In diesem Inhaltstyp wird nun unter Felder verwalten ein neues Feld mit "Galerie Bilder" hinzugefügt.
Feldtyp und Steuerelement = Bild. Unter Bearbeiten muss hier der maximale Wert auf Unbegrenzt gesetzt werden, ansonsten kann pro Seite nur 1 Bild hochgeladen werden.
Ebenfalls unter Bearbeiten können diverse Einstellungen für den Upload vorgenommen werden, z.B. ein spezielles Uploadverzeichnis, zugelassene Dateiendungen, Standard-Bild usw. Ich habe daran nichts verändert.
Das vorher erstellte neue Feld "Galerie Bilder" wird hier nun angezeigt. Die Feldbeschriftung kann auf <Versteckt> geändert werden, das Format wird auf Colorbox eingestellt. Wird das Format auf Colorbox geändert, können noch weitere Einstellungen gemacht werden.
Hier können jetzt die vorher definierten Bildstile verwendet werden:
Danach alles speichern.
Verwenden
Fügt man jetzt einen neuen Inhalt ein, kann neben Artikel und Einfache Seite ebenfalls Bildergalerie ausgewählt werden.Und hier taucht dann auch das definierte neue Feld Galerie Bilder auf. Dort können die Bilder für die Bildergalerie eingefügt werden.
Der installierte CSS Injector ist nach dem Installieren im Admin-Bereich unter Konfiguration>CSS Injector zu finden. Damit die Bilder nicht mehr untereinander angezeigt werden, habe ich folgenden Code eingefügt:
.field-name-field-galerie-bilder img { float: left; margin-right: 10px; margin-bottom: 10px; padding: 5px !important; } .field-name-field-galerie-bilder { clear: left; display: block; }
"field-galerie-bilder" ist hier der Feldname von "Galerie Bilder". Dieser Name kann bei den Inhaltstypen nachgeschaut werden.

Passend zum Inhalt empfehlen wir:
PHP Tutorial – objektorientierte Programmierung: Grundlagen & Praxis
Hallo,
danke für das tolle Tutorial. Hat super geklappt.
Nur bei einer Sache hänge ich momentan noch.
Wenn ich auf einer Seite einen Text schreibe, dann setzt sich direkt darunter eine kleine Linie. Wenn ich jetzt Bilder über die Colorbox hinzufüge, dann bleibt die Linie direkt unter dem Text und verschiebt sich nicht mit unter die Bilder. Sieht irgendwie blöd aus.
Kann mir hier noch jemand einen Tipp geben?
Danke!
Ist es jetzt richtig? In der PDF ist der Code jetzt sichtbar, aber ob es inhaltlich richtig ist, kann ich leider nicht beurteilen. ;-)
Also das Tutorial ist echt gut. Leicht verständlich und gut umgesetzt. Nur eins wundert mich, am Ende wird bei mir im PDF der Code den du beim CSS eingefügt hast, dass die Bilder nicht untereinander sondern nebeneinander sind nicht angezeigt. Liegt das an mir oder geht das allen so?
Vielen Dank für das Tutorial.
Vielen Dank.
Danke fürs feine tutorial.
Kommt grad zur rechten Zeit! ;-:)
LG und allzeit "gut LIcht"!
Vielen Dank für das gut erklärte Tutorial.