Einfache Bildergalerie mit Colorbox

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.




Als Breite und Höhe definieren wir je 100px. Die Einstellungen werden alle bestätigt (dieses können im später natürlich auch wieder geändert werden).

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.

Ist das Feld erstellt, kann die Anzeige unter Anzeige verwalten richtig definiert werden:




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.




Nun muss aber noch das CSS angepasst werden, damit die Thumbnails nicht alle untereinander angezeigt werden. Dies kann entweder mit dem Modul CSS Injector (http://drupal.org/project/css_injector) oder direkt in der CSS-Datei auf dem Server angepasst 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.




Bei Klick auf ein Bild wird dann (vorausgesetzt, das Plug-In für die Colorbox wurde richtig installiert) die Colorbox angezeigt.