Drupal 6 - Imagefield mit Imagecache und Colorbox

Ziel dieses Tutorials soll sein, dem Inhaltstypen Artikel (story) ein Bildfeld hinzuzufügen, dass die Anzeige eines vorangestellten Bildes zu jedem Artikel ermöglicht. Dabei soll das Bild im Teaser als Vorschaubild (also relativ klein) und in der Vollartikelansicht (nach einem Klick auf „weiterlesen“) in einem etwas größeren Format dargestellt werden. Zusätzlich soll man das Bild im Teaser und in der Vollansicht anklicken können, um das Bild dann in einer Lightbox in Originalgröße angezeigt zu bekommen. Das Bild kann vom Artikelschreiber vom heimischen PC hochgeladen werden.

Ich beschreibe hier meine Erfahrungen, also nicht nur einfach die Lösung, sondern auch die Probleme, die dabei aufgetreten sind, weil das Forum hier voll von ähnlichen Problemen ist.

Leider benötigt man gleich eine ganze Reihe von Modulen, die zunächst auf den heimischen PC herunterzuladen und zu entpacken sind:

CCK 6.x-2.7
Mit diesem Modul wird erst das Hinzufügen weiterer Felder möglich

Imagefield 6.x-3.7
Das ergänzende Bildfeld

ImageAPI 6.x-1.8 (enthalten auch ImageAPI GD2)
Ist Voraussetzung, damit Imagecache läuft (nur im Hintergrund)

Transliteration 6.x-3.x-dev
Ist Voraussetzung, damit Imagecache läuft (nur im Hintergrund; ist dafür verantwortlich, den Dateinamen in ein brauchbares Format, z.B. Leerzeichen zu entfernen, zu verwandeln)

Imagecache 6.x-2.x-dev (enthalten auch Imagecache ui)
Ermöglicht die automatische Bearbeitung der hochgeladenen Bilder, z.B. eine vordefinierte Bildgröße

Filefield 6.x-3.7
Ist für das Hochladen der Bilder zuständig

jQuery Update 6.x-2.x-dev
Wird von Colorbox benötigt

Colorbox 6.x-1.x-dev
Bindet das Fremd-Plugin in Drupal ein

Colorbox
Das Fremd-Plugin für die Lightbox
Zu finden unter der Internetadresse: http://colorpowered.com/colorbox/

Server-Konfiguration

Die Module erfordern zum Teil PHP5 (so zum Beispiel das Modul Filefield)
Außerdem muss der Hoster mod_rewrite für clean_urls zulassen, sonst funktioniert das Modul Imagecache nicht richtig.
Wie man diese Konfiguration hinbekommt, ist nun von Hoster zu Hoster unterschiedlich. Entweder kann man die Einstellung direkt in der Konfiguration des Accounts vornehmen, oder die Steuerung läuft über die htaccess-Datei (das ist die Datei mit einem „.“ am Beginn des Dateinamens).
Im Drupal-Paket wird eine htaccess-Datei mitgeliefert.
Für die Konfiguration meines Strato-Hosting-Pakets habe ich zunächst die folgende Zeile ergänzt, damit PHP5 läuft:

AddType application/x-httpd-php5 .php .php5

Bei der Installation von Drupal 6 wird geprüft, ob mod_rewrite laufen würde und man kann optional wählen, ob man clean_url aktiviert haben möchte.
Man kann diese Option auch noch nachträglich hinzufügen:
In der htaccess sind zwei Zeilen zu „entkommentieren“, dass heisst, die vorangestellte Raute ist zu entfernen:

RewriteEngine on
RewriteBase /

(also mit Slash; befindet sich Drupal in einem Unterverzeichnis, ist dieses noch hinter dem Slash anzufügen, z.B. /drupal)
Die geänderte htaccess-Datei muss nach der Bearbeitung in das Drupal-Root-Verzeichnis per FTP hochgeladen werden.
Anschließend kann man unter Verwalten/Einstellungen/Lesbare_Urls die clean_urls aktivieren

Installation der Module

Colorbox
Vor den eigentlichen Drupal-Modulen würde ich zunächst das Fremd-Plugin Colorbox per FTP hochladen.

Achtung !!

Denn jetzt kommt etwas ungewöhnliches, was aber inzwischen auch andere mit jQuery arbeitende Drupal-Bausteine betrifft.
Das ganze Plugin-Verzeichnis muss per FTP in das Verzeichnis sites/all/libraries hochgeladen werden.
Ggf. muss das Verzeichnis“ libraries“ selbst im FTP-Programm erstellt werden, falls es nicht schon da ist.

Alle anderen Module

Die übrigen Module sind wie gehabt per FTP in das Verzeichnis sites/all/modules hochzuladen und dann zu aktivieren. Immer schön der Reihe nach und nicht alle auf einmal, sonst kann auch mal der Server schlapp machen und eine Fehlermeldung wegen phpscript-Zeitüberschreitung rausgeben.

Vorbereitung

Bevor es losgeht, muss man sich noch Gedanken machen, wie hochgeladene Bilder überhaupt abgelegt und verwendet werden dürfen/sollen.
Unter Verwalten/Einstellungen/Dateisystem ist voreingestellt, in welchem Verzeichnis die hochgeladenen Dateien abgelegt werden.
Standardmäßig ist sites/default/files vorgegeben.
Für jedes Imagefield wird später ein dazugehöriges Unterverzeichnis erstellt werden, wenn man nicht alle Bilddateien in einem Verzeichnis haben will.
Die Downloadmethode sollte auf öffentlich stehen.
Die Haken für die Konfiguration des Transliteration-Moduls sollten so bleiben.

Imagecache einrichten

Mit dem Modul Imagecache besteht die Möglichkeit, hochgeladene Bilder automatisch zu bearbeiten und dabei in die richtige gewünschte Form zu bringen.
Nach der Installation ist das Bearbeitungsformular unter Verwalten/Strukturierung/Imagecache zu finden.
Zunächst ist eine neue Voreinstellung (Preset) hinzuzufügen; nennen wir sie „Artikelteaserbild“.
Anschließend ist eine Aktion hinzuzufügen. Wir nehmen hier mal nur „Rezise“ und stellen die Breite auf 180px und die Höhe auf 120px ein.
Wenn die Installation der Module, wie oben beschrieben geklappt hat, wird bereits jetzt ein Testbild im neuen Format angezeigt.
Dann fügen wir ein zweites Preset „Artikelvollbild“ mit den Maßen 320px breit und 240px hoch hinzu.
Im Hintergrund hat Imagecache für die Ablage der entsprechenden neu erzeugten Bilddateien, also für jedes Preset, eine neue Verzeichnisstruktur hinzugefügt, die auch mittels FTP-Programm nachvollzogen werden kann:

sites/default/files/imagecache/Artikelteaserbild
und
sites/default/files/imagecache/Artikelvollbild

Für jedes Imagefield, dass diese Presets verwendet werden später entsprechende Unterverzeichnisse hinzugefügt, in die die bearbeiteten Bilddateien abgelegt werden.

Imagefield hinzufügen
Nun können wir dem Inhaltstypen Artikel (story) ein Imagefield hinzufügen.
Also wechseln wir ins Formular Verwalten/Inhaltsverwaltung/Inhaltstypen/story/Felder verwalten und fügen ein neues Feld hinzu:

Name: Artikelbild
Feldname: field_artikelbild
Feldtyp: Datei
Steuerelement: Bild

Nach dem Speichern folgt die nächste Formularseite, in der wir das neue Feld konfigurieren können:
Maximale und minimale Auflösung sollten sich nach Wunsch an den späteren Darstellungen orientieren. Hier im Beispiel wählen wir mal als maximale Größe 1024x768 und minimal 640x480. Wenn sich die Originalgröße des Bildes in dieser Größenordnung bewegt, sollte jedes Originalbild auf einem normalen 17-Zoll-Monitor vernünftig angezeigt werden.
Auch die Dateigröße sollte man einstellen. Mehr als 2MB je Bild macht php nicht mit. Außerdem wird nicht so viel Speicherplatz belegt. Je größer die Dateien, desto mehr Ladezeit wird auch benötigt.
Damit man ein wenig Ordnung in seine Bilder bekommt, sollte man in den Pfadeinstellungen für jedes Imagefield ein extra Verzeichnis angeben, das beim ersten Bild dann automatisch angelegt wird. Ich schlage „Artikelbilder“ vor.
Der gleiche Verzeichnisname wird von Imagecache , wie oben beschrieben für die Presets angelegt. So kann man die Presets auch für mehrere Imagefields verwenden.
Die restlichen Einstellungen, z.B. Alt-Text und Titel sind nach Geschmack einzurichten.
Damit das Bild vor dem Teasertext angezeigt wird, muss das Feld noch hach ganz oben unter den Titel verschoben werden.

Achtung !!

Bis jetzt wird noch nichts von unseren Einstellungen für die Anzeige der Bilder verwendet, alles geschieht nur im Hintergrund.

Der wichtige Schritt ist nun, von „Felder verwalten“ zu „Felder anzeigen“ zu wechseln !!

Erst in diesem Formular wird eingestellt, welches Preset im Teaser und in der Vollansicht des Artikels angezeigt werden soll. Da die Colorbox ins Spiel kommen soll, wählen wir also für den Teaser die Auswahl „Colorbox: Artikelteaserbild Image“ und für die Artikelansicht die Auswahl „Colorbox: Artikelvollbild Image“

CSS für die Bildausgabe
Das Bild soll natürlich links vom Text angezeigt werden. Manche Themes haben diese Einstellung bereits in den CSS-Dateien enthalten.

.imageklasse {
float : left;
margin : 0px 10px 10px 0px;
}

Das Wort „imageklasse“ muss natürlich durch die zutreffende CSS-Klasse ersetzt werden. Den Klassennamen kann man ggf. mit Firebug ermitteln.

Colorbox konfigurieren
Jetzt muss die Colorbox noch eingestellt werden; dazu wechseln wir zum Formular Verwalten/Einstellungen/Colorbox
Bereits ganz oben finden sich die Einstellungen für das Modul Imagefield.
Zu wählen ist zum einen welche/wie viele Bilder angezeigt werden sollen (alle des betreffenden Artikels, alle der angezeigten/aktiven Seite, alle des Imagefields oder nur ein Einzelnes) und zum anderen, welches Imagecache-Preset genommen werden soll.
Durch unsere Voreinstellung für das Imagefield (max und min) ist Original sinnvoll.
Weiter unten im Formular kann dann unter „Styles and Options“ noch eine der zur Verfügung gestellten Darstellungsarten der Lightbox ausgewählt werden.

Ergebnis

Wenn alles geklappt hat, kann der Artikelschreiber nun einen neuen Artikel schreiben und dabei ein Bild hochladen. Dieses Bild wird, wenn es den Größenvorgaben entspricht, angenommen und durch Imagecache bearbeitet. Das Originalbild wird unter sites/default/files/Artikelbilder gespeichert.
Die Preset-Bilder werden unter sites/default/files/imagecache/Artikelteaserbild/Artikelbilder und sites/default/files/imagecache/Artikelvollbild/Artikelbilder gespeichert.
In der Teaseransicht wird das Bild nun jeweils links gefloatet in den Maßen 180x120 bzw. in der Vollansicht mit den Maßen 320x240 angezeigt.
Wenn man auf das Bild klickt, öffnet sich die Lightbox und das Bild wird in der Originalgröße angezeigt.
Ausbaumöglichkeiten
Ein weiteres Imagefield hinzufügen, das mit dem Modul Insert in den Artikeltext eingefügt werden kann.
Das Modul Image für Bildergalerien verwenden und mit Colorbox anzeigen lassen.