Schöne, einfache Bilder Galerie mit Drupal – Teil 1


Es gibt wohl die verschiedensten Möglichkeiten, eine Bildergalerie zu machen (z.B. auch Fast Gallery). An dieser Stelle möchte ich jedoch zeigen, wie sich mittels CCK, Views und co. sehr einfach eine hübsche Galerie erstellen lässt. Diese schwarze Menu oben am Bildschirm ist das "Admin Menu". Die folgenden weiteren Menus werden benötigt:

  • CCK (Content Construction Kit)
  • Imagefield
  • Filefield
  • Lightbox
  • Views
  • Views UI (ist ein Teil von Views)
  • Imagecache

1. Neuer Inhaltstyp anlegen

Diesen nennen wir am Besten bild. Das Body Feld löschen wir, da wir dieses hier so nicht brauchen und gegebenfalls mittels CCK ein neues Feld hinzufügen können.

Jetzt haben wir lediglich einen Inhaltstyp erstellt. Dieser besteht im Moment nur aus einem Titelfeld. Wir müssen also noch die Möglichkeit schaffen, ein Bild hinzuzufügen. Diese Möglichkeit verschafft CCK und seine vielen Zusatzmodule.

2. Inhaltstyp erweitern

Jetzt fügen wir also ein Imagefield hinzu:

Auf der Konfigurationsseite unseres neuen Imagefieldes müssen wir noch einige Dinge vornehmen:

Hilfetext: Den können wir für unsere Seite weglassen.

Permitted upload file extensions: Hier geben wir jpg und png ein

Path settings: Können wir auf /galerie setzen -> dadurch werden unsere Bilder unter sites/all/files/galerie gespeichert.

Required: Aktivieren wir am Besten, da wir ja wollen, dass zwingend ein Bild hochgeladen werden muss.

Jetzt können wir schon mal ein paar Bilder hochladen. Was wir jetzt jedoch haben sind einfach Nodes, welche erstellt werden, aber noch keinen Zusammenhang haben. Dafür ist jetzt Views zuständig. Mit Views können wir die ganzen Bilder Nodes entsprechend gruppieren. Zuerst aber noch ein wenig "Kosmetik".

3. Imagecache einrichten

Imagecache erlaubt es, Bilder auf dem Server zu verändern, ohne dabei das Original anzutasten. Das coole dabei ist, dass die veränderte Version nicht immer on-the-fly erzeugt wird, sondern im Drupal Cache gespeichert wird. Dazu müssen zuerst die richtigen Bestandteile von Imagecache installiert werden.

Jetzt müssen wir zuerst einen neuen Preset hinzufügen. Ein Preset gibt an, was mit dem Bild gemacht werden soll. Wir legen also für unser Beispiel zuerst mal einen Preset für die Thumbnails an:

Jetzt sagen wir dem Preset, dass das Bild skaliert und gegebenfalls beschnitten werden soll, damit es schöne 120×100 Pixel gross wird. Dazu auf "Add scale and Crop" klicken Und dort bei der Höhe 100 und bei der Breite 120 eingeben. Das sollte dann so aussehen:

Jetzt fügen wir noch einen weiteren Preset ein und zwar "big". Als Aktion fügen wir bei diesem jedoch nur ein Scale hinzu, da wir nicht wollen, dass das Bild beschnitten wird. Wichtig ist, wenn wir auf Scale gehen, dass nur ein Wert (entweder Breite oder Höhe) notwendig ist. Wir können also gut sagen, wir wollen einfach alle Bilder maximal 800 Pixel breit.

So, jetzt haben wir zwei Imagecache presets.

4. CCK und Imagecache

Nur ganz kurz dazwischen. Wenn wir wieder auf unseren Bild Inhaltstypen gehen und dort auf Display fields, können wir noch angeben wie dieser Inhaltstype angezeigt werden soll.

Wenn wir jetzt einen der hochgeladenen Nodes anschauen, dann wir entweder das kleine Thumbnail (wenn wir im Teaser sind) angezeigt oder aber das Grosse, wenn wir die Vollansicht des Nodes anschauen.

Damit ist jetzt auch alles parat um mit Views und Lightbox das ganze richtig schön und cool zu machen. Fortsetzung folgt.