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.

Wir empfehlen:
Drupal-Training

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.

Wir empfehlen:
Dreamweaver-Video-Training

Unsere Empfehlung für dich

Bootstrap für modernes Webdesign

Bootstrap für modernes Webdesign

Ob Smartphone, Tablet oder PC – Größe spielt keine Rolle mehr! Mit Bootstrap schmiegen sich Content und Design wie von Geisterhand an jedes Format. Lerne in 12 Lektionen und 2,5 Stunden Video-Training, wie dir das beliebte Framework Bootstrap den Weg zur responsiven Website erleichtert.

  • Funktionen, Komponenten, Möglichkeiten: Bootstrap kennenlernen und bedienen
  • In der Praxis: Am Live-Beispiel von der Basis bis zur responsiven Website
  • Zum Mitmachen und Nachvollziehen inklusive der Arbeitsdateien

Zum Training