Fotogalerie und Fotoalben in Drupal
Fotoalben und Fotogalerien verschönern jede Website, sei es ein persönlicher Blog oder eine Unternehmensseite. Schöne Fotos halten Besucher auf sozialen Netzwerken wie VKontakte, Facebook und anderen. Deshalb fügen wir unserem Drupal-Portal eine Fotogalerie hinzu.
Ich schlage vor, eine einfache Galerie mit den Effekten von Colorbox zu erstellen. Colorbox ist ein jQuery-Plugin, das besser als Thickbox oder Lightbox funktioniert. Es passt die Fotos automatisch an die Bildschirmgröße an. Das ist sehr praktisch, da es heutzutage viele verschiedene Monitorgrößen und Auflösungen gibt.
Los geht's. Ich zeige, wie man eine Fotogalerie in Drupal 7 erstellt, in Drupal 6 funktioniert es ähnlich.
Wir benötigen folgende Module:
- Colorbox - http://drupal.org/project/colorbox
- Libraries API - http://drupal.org/project/libraries
- Views - http://drupal.org/project/views
- Fields API (für Drupal 7 im Core enthalten, für Drupal 6 das Modul CCK)
- Imagecache - http://drupal.org/project/imagecache
- File (für Drupal 7 im Core enthalten, Filefield für Drupal 6)
- Image (für Drupal 7 im Core enthalten, Imagefield für Drupal 6)
Für Drupal 6 wird außerdem das Modul jQuery update benötigt, um jQuery auf Version 1.3.2 zu aktualisieren.
Laden Sie diese Module herunter und installieren Sie sie.
Nun müssen wir Colorbox selbst herunterladen. Es wird separat auf folgender Seite angeboten:
http://colorpowered.com/colorbox/
Entpacken Sie das Archiv mit Colorbox und kopieren Sie den Ordner in sites/all/libraries. Falls der Ordner libraries nicht existiert, erstellen Sie ihn und kopieren Sie Colorbox dort hinein.
In libraries liegt dann der Colorbox-Ordner:
Ich habe Colorbox inklusive aller Beispiele kopiert, um jederzeit sehen zu können, wie Colorbox funktioniert.
Wenn alles korrekt installiert wurde, zeigt der Statusbericht folgende Meldung:
Super, Module aktiviert, Vorbereitung abgeschlossen – nun erstellen wir die Galerie.
Die Galerie gestalten wir als Alben. Erstellen Sie einen neuen Inhaltstyp „Fotoalbum“ unter
/admin/structure/types/add
Füllen Sie die Felder auf der Seite aus:
Gehen Sie anschließend zur Bearbeitung der Felder Ihres neuen Inhaltstyps unter
/admin/structure/types
Fügen Sie ein neues Feld „Fotos“ hinzu. Der Datentyp ist Bild.
Im Feld-Setup erlauben Sie unbegrenztes Hochladen oder begrenzen Sie z.B. auf 10 Fotos pro Album.
Speichern Sie das Feld. Ihr Inhaltstyp „Album“ ist bereit. Wenn Sie die Rechte zur Erstellung von Alben einschränken möchten, konfigurieren Sie diese auf der Berechtigungsseite:
/admin/people/permissions
Erstellen wir eine neue Album-Node:
/node/add
Füllen Sie Titel, Beschreibung und laden Sie Fotos hoch:
Speichern Sie die Node.
Aktuell werden die Bilder in Originalgröße angezeigt. Für eine schöne Galerie verwenden wir das Modul ImageCache.
ImageCache ermöglicht das Zuschneiden, Skalieren und Anpassen von Bildern, die an Nodes angehängt sind, wie z.B. in unserem Fotoalbum. Nach Aktivierung steht Ihnen die Seite mit Bildvorgaben (Presets) zur Verfügung. Ein Preset ist eine vordefinierte Bildbearbeitung, z.B. Zuschneiden auf 100x100 Pixel.
In der Konfiguration finden Sie ImageCache unter:
admin/config
Klicken Sie auf „Stil hinzufügen“ und vergeben Sie einen Namen, z.B. crop150x150 für das Zuschneiden auf 150x150 Pixel. Fügen Sie die Bildbearbeitung hinzu:
Setzen Sie Breite und Höhe auf 150, speichern Sie den Effekt. Das Preset crop150x150 steht jetzt bei der Anzeige der Nodes zur Verfügung.
Gehen Sie zur Seite aller Inhaltstypen:
/admin/structure/types
Wählen Sie „Anzeige verwalten“ (Manage display):
Stellen Sie die Anzeige des Bilderfeldes auf „Colorbox“ ein:
Setzen Sie im nächsten Schritt den „Node image style“ auf crop150x150, also das von uns erstellte Preset.
Speichern Sie die Einstellungen.
Jetzt werden die Fotos mit Colorbox-Effekt angezeigt und auf 150x150 Pixel zugeschnitten. Um das Layout zu optimieren, fügen Sie noch folgenden CSS-Code hinzu:
.field-name-field-photos .field-item{
float: left;
margin-bottom: 15px;
margin-right: 15px;
}
Sie können das CSS anpassen, falls Ihr Foto-Feld eine andere Klasse hat oder andere Abstände gewünscht sind.
Das Ergebnis ist ein Fotoalbum als eigene Node mit schöner Galerieansicht:
