Drupal: Bilder effektiv einbinden
In früheren Drupal-Versionen war das Einbinden von und die Arbeit mit Bildern eher umständlich. Ohne zusätzliche Module gestaltet sich das alles viel zu kompliziert und man hatte kaum sinnvolle Optionen zur Verfügung. In Drupal 7 stellt sich das gänzlich anders dar. Hier gibt es endlich Möglichkeiten zur effizienten Bildverarbeitung.
Wenn ihr einen Artikel erstellt, wird euch dort das Feld Image auffallen.
Über dieses Feld könnt ihr ganz einfach Bilder auswählen und auf den Server laden. Klickt dazu auf die Datei-auswählen-Schaltfläche. Auswählen könnt ihr in dem sich daraufhin öffnenden Dialogfenster standardmäßig Bilder in den Formaten PNG, Gif, JPEG oder JPG. Als Maximalgröße der Bilder sind 2 MB festgesetzt. Mit Hochladen bestätigt man die Auswahl.
Das Bild wird dann schon mal in der Vorschau angezeigt. Ihr solltet nun noch einen Alternativtext vergeben. Dieser Text wird intern dem alt-Attribut des img-Elements zugewiesen. Wenn ihr nach dem Speichern des Artikels das Frontend aufruft, ist dort das eingefügte Bild zu sehen.
Das Bild wird nicht in seiner Originalgröße angezeigt, sondern skaliert. Diese Art der Anpassung und auch andere Bildoptionen lassen sich explizit angeben.
Den Upload konfigurieren
Um die Bilderfunktion von Drupal anzupassen, ruft man Struktur>Inhaltstypen auf und klickt bei Article auf Felder verwalten. In dem sich daraufhin öffnenden Dialogfenster klickt ihr bei Image auf Bearbeiten.
Jetzt können die Einstellungen für das Bilderfeld angepasst werden. Interessant ist zunächst das Feld Zugelassene Dateiendungen, in dem der Eintrag png, gif, jpg, jpeg steht. Enthalten sind hierin die Suffixe der Dateitypen, die mittels der Upload-Schaltfläche auf den Server geladen werden dürfen. Ihr könnt hier zusätzliche Dateitypen angeben. Entscheidend ist allerdings, dass es sich dabei auch tatsächlich um einen Dateityp handelt, der von den Browsern angezeigt werden kann.
Weiter geht es mit dem Feld Dateiverzeichnis.
Hierüber legt man das Verzeichnis fest, in das die Bilder geladen werden sollen. Standardmäßig handelt es sich dabei um field/image. Bei einer herkömmlichen Installation findet ihr dieses Verzeichnis unter sites/default/files.
Die möglichen Einstellungen zur maximalen und minimalen Bildauflösung sind sicherlich selbsterklärend. Tragt hier die gewünschten Werte ein. Vorsicht ist beim Feld Maximale Dateigröße zum Hochladen geboten. Standardmäßig ist der Wert auf 2 MB eingestellt. Ebenso könnt ihr auch 4 MB eintragen. Dann können Bilder bis zu einer Größe von 4 MB hochgeladen werden. Eine Begrenzung nach oben wird dann letztendlich durch PHP gesetzt.
Über die Optionen Alt-Feld verwenden und Titel-Feld einschalten wird bestimmt, ob Felder angezeigt werden, über die sich Werte für das alt– und das title-Attribute der Bilder angeben lassen.
Interessante Möglichkeiten verbergen sich hinter der Option Bildstil-Vorschau.
Standardmäßig wird thumbnail verwendet. Den Effekt habt ihr gesehen. Im Artikel ist eine kleine Version des Bildes zu sehen.
Um die Einstellungen anzupassen, ruft man Struktur>Inhaltstypen auf und klickt bei Article auf Anzeige verwalten. Beim Feld Image steht bei Format der Wert Bild.
Um die Einstellungen anzupassen, muss auf das Zahnradsymbol geklickt werden. Hier kann man zunächst einmal den Bildstil einstellen. Gebt dort beispielsweise thumbnail an. Im Feld Bild verlinken mit könnte man jetzt noch Datei einstellen. Dadurch wird die Vorschaugrafik mit dem Originalbild verlinkt. Mit Aktualisieren und Speichern werden die Einstellungen übernommen.
Stellt sich nun natürlich die Frage, was die vorgenommenen Einstellungen eigentlich bewirken? Ruft dazu das Frontend der Seite auf. Dort ist zunächst das Bild in einer Thumbnail-Version zu sehen. Neu ist nun allerdings, dass dieses Thumbnail angeklickt werden kann. Folgt man diesem Hyperlink, wird das Bild in seiner Originalgröße angezeigt.
Colorbox einsetzen
Die zuvor gezeigten Dinge machen nun schon eine ganze Menge mehr Dinge möglich, die man im Zusammenhang mit Bildern anstellen kann. Aber selbstverständlich ist noch viel mehr drin. Exemplarisch sei hierfür das jQuery-Plug-In Colorbox genannt. Dieses lässt sich ganz einfach in Drupal verwenden. Dafür muss das Plug-In (http://colorpowered.com/colorbox/) selbst und das Modul (http://drupal.org/project/colorbox) installiert werden. Nach dem Download des Plug-Ins muss das Archiv entpackt werden. Anschließend kopiert man das Verzeichnis colorbox nach sites/all/libraries.
Gibt es dieses libraries-Verzeichnis noch nicht, muss man es selbst anlegen. Das Modul kann anschließend wie üblich über das Backend installiert werden. Nach der Installation und der Aktivierung muss man das Modul noch konfigurieren. Klickt dazu in der Modulübersicht bei Colorbox auf den Konfigurieren-Link. Interessant ist in dem sich öffnenden Dialogfenster zunächst einmal Style. Denn darüber legt man letztendlich die Präsentation der Bilder fest. Hiermit solltet ihr in jedem Fall etwas experimentieren.
Wenn unter Optionen der Eintrag Benutzerdefiniert aktiviert wird, kann man Angaben zum Übergangstyp zwischen den einzelnen Bildern machen. Auch das ist letztendlich sicherlich Geschmacksache. Über die Felder Previous, Weiter und Close lässt sich die Beschriftung der Bildnavigation anpassen.
Das soll es an dieser Stelle zunächst einmal mit der Grundkonfiguration gewesen sein. Jetzt wird das Modul direkt in Aktion getestet. Übernehmt dazu die Einstellungen mit Konfiguration speichern. Ruft Struktur>Inhaltstypen auf und klickt bei Article auf Anzeige verwalten. Bei Image kann als Format Colorbox ausgewählt werden.
Über das nun schon bekannte Zahnradsymbol wird die Detailkonfiguration aufgerufen. Bei Node image style könnte man thumbnail einstellen. Im Feld Colorbox image style ist die Einstellung large eine gute Wahl. Die übrigen Einstellungen können mit Speichern übernommen werden.
Legt nun über Inhalt>Inhalt hinzufügen>Article einen neuen Artikel an. Fügt in diesen Artikel – so wie das bereits beschrieben wurde – ein Bild ein. Nehmt auch noch die anderen Einstellungen vor und speichert den Artikel letztendlich ab. Wenn ihr den Artikel im Frontend aufruft, ist dort zunächst einmal wieder der gewohnte Anblick zu sehen.
Das Besondere an dieser Anwendung wird nun erst deutlich, wenn man das Thumbnail anklickt.
Dann wird das Bild nämlich in einer größeren Version angezeigt. Und das geschieht in Form einer klassischen Galerieform. Und wie bereits beschrieben, gibt es zahlreiche Optionen, die ihr anpassen könnt.
