Drupal: Bilder einbinden und verwalten

Natürlich will man seine Texte und Artikel auch optisch ansprechend gestalten. Was liegt da näher, als Bilder einzubinden? Stellt sich zunächst allerdings die Frage, wie die Bilder eigentlich auf den Server und dann letztendlich in den Text kommen? Genau um solche Dinge geht es in diesem Tutorial.

Wir empfehlen:
Drupal-Training

In den bisherigen Tutorials wurden einfache Artikel angelegt. Bilder enthalten diese bislang noch nicht. Ob sich Bilder in einen Artikel einfügen lassen, hängt zunächst einmal davon ab, ob es für diesen Inhaltstyp bereits ein Bilderfeld gibt. Überprüfen lässt sich das über Struktur>Inhaltstypen. Klickt dort bei Article auf den Link Felder verwalten.

Entscheidend ist an dieser Stelle das Feld Image. Sollte dieses Feld bei euch nicht zu sehen sein, muss das betreffende Modul aktiviert werden. Das geschieht unter Module. Überprüft, ob dort tatsächlich das Image-Modul aktiviert ist. Achtet dabei unbedingt auch darauf, die zusätzlich benötigten Module File, Field und SQL storage zu aktivieren. Nachdem die Einstellungen gespeichert wurden, steht ein entsprechendes Auswahlfeld zur Verfügung, mit dem sich ein Bild in den Artikel einfügen lässt.

Bilder über den Editor einfügen

Wenn ihr – wie bereits beschrieben – den TinyMCE-Editor installiert habt, könnt ihr darüber Bilder direkt in eure Artikel einfügen. Damit das funktioniert, muss zunächst allerdings erst einmal die entsprechende Schaltfläche aktiviert werden. Ruft dazu Konfiguration>Wysiwyg profiles auf und klickt bei dem von euch favorisierten Eingabeformat auf Bearbeiten.

Unter BUTTONS & PLUGINS werden Bilder und Advanced image aktiviert. Nachdem diese Einstellung mit Speichern übernommen wurde, lassen sich Bilder in Artikel einfügen. Dazu platziert man den Cursor an der gewünschten Stelle im Artikel und klickt die Bilder-Schaltfläche an.

Darüber lassen sich jetzt Bilder einfügen. Sonderlich komfortabel ist das allerdings nicht. Denn weder gibt es eine Upload-Funktion, noch kann man Bilder direkt auswählen. Stattdessen muss man den Pfad zum Bild manuell eintragen. Das Bilderverzeichnis von Drupal liegt standardmäßig unter /sites/default/files/pictures/. Üblicherweise kopiert man die gewünschten Bilder per FTP in dieses Verzeichnis und muss dann den Pfad manuell angeben.

/drupal/sites/default/files/pictures/dummy.jpg

Wobei in diesem Fall davon ausgegangen wird, dass Drupal in das Verzeichnis drupal installiert wurde. Wie man sieht, ist das alles nicht sonderlich elegant. An dieser Stelle kommen zwei Zusatzmodule ins Spiel.

Der bessere Weg für Bilder

Die Variante über den Editor funktioniert zwar, ist allerdings etwas sperrig. Deutlich besser lässt sich die Sache über das Modul IMCE lösen. IMCE ist ein Dateimanager für Bilder. Dieses Modul erlaubt das Hochladen von Bildern. Man kann damit aber auch Vorschaubilder erzeugen und Bilder wieder löschen. Um IMCE in Drupal in Kombination mit einem WYSIWYG-Editor verwenden zu können, wird zusätzlich das Modul IMCE WYSIWYG Bridge benötigt. Dieses Modul verbindet IMCE mit dem WYSIWYG-Editor.

Ladet euch beide Module herunter, installiert und aktiviert diese. Ausführliche Informationen zum Umgang mit Modulen gibt es dann übrigens in einem späteren Tutorial. Ich beschreibe hier daher nur kurz die Installation von IMCE. Bei IMCE WYSIWYG Bridge funktioniert das dann genauso.

Ladet das IMCE-Modul von der Seite http://drupal.org/project/imce herunter. Das Archiv bitte nicht entpacken, sondern direkt in Drupal Module aufrufen und auf Neues Modul installieren klicken. Über die Schaltfläche Datei auswählen wird das Archiv ausgewählt. Mit Installieren bestätigt man die Auswahl abschließend. Klickt auf den Link Enable newly added modules. Im unteren Fensterbereich findet ihr IMCE.

Aktiviert das vorangestellte Kontrollkästchen und bestätigt das mit Konfiguration speichern. Diese Schritte müssen nun auch noch für das Modul http://drupal.org/project/imce_wysiwyg wiederholt werden.

 

Damit sind die Vorarbeiten erledigt und der Dateimanager kann verwendet werden. Ruft dafür zunächst Konfiguration>Wysiwyg profiles auf und klickt bei Full HTML auf den Bearbeiten-Link. Aktiviert dort das Kontrollkästchen vor dem Eintrag IMCE.

Mit Speichern wird die Konfiguration übernommen.

 

Um zu überprüfen, ob IMCE jetzt tatsächlich im Editor verfügbar ist, öffnet man über Inhalt einen beliebigen Artikel. Klickt im Editor auf das Bildsymbol. Neu hinzugekommen ist in dem sich öffnenden Fenster neben dem Eingabefeld Image URL ein kleines Icon.

Klickt man dieses Symbol an, wird die eigentliche IMCE-Funktionalität sichtbar. Zunächst einmal hat man über den linken Fensterbereich Zugriff auf alle Verzeichnisse der Drupal-Installation. Um ein Bild, das bereits auf dem Server liegt, einzufügen, navigiert man einfach zu dem gewünschten Verzeichnis, markiert das Bild und klickt auf Insert.

Daraufhin wird der Pfad automatisch ermittelt und in das Feld Image URL eingetragen. Gebt nun noch eine Beschreibung und einen Titel an. Mit Insert wird das Bild letztendlich in den Artikel eingefügt.

Die gezeigte Funktionalität ist natürlich nicht das Einzige, was mit IMCE möglich ist. Herzstück ist vielmehr die Upload-Möglichkeit. Denn tatsächlich kann man mit IMCE Bilder vom lokalen Rechner direkt auf den Server laden, ohne dabei auf FTP zurückgreifen zu müssen. Um ein Bild hochzuladen, ruft man das Tool wie beschrieben auf.

Interessant ist jetzt die Schaltfläche Hochladen. Klickt man diese an, wird ein zusätzlicher Bereich geöffnet. Über den kann man das Bild auswählen. Zusätzlich lassen sich automatisch Thumbnails generieren. Wählt dazu einfach das gewünschte Format aus. Mit Hochladen werden die Einstellungen bestätigt. IMCE lädt das Bild automatisch auf den Server und generiert ein Thumbnail.

Ebenso lassen sich auch von allen bereits auf dem Server liegenden Bildern kleine Vorschaubilder erzeugen. Markiert dazu das gewünschte Bild und klickt auf Thumbnails. Jetzt muss nur noch das gewünschte Format ausgewählt und auf Create thumbnails geklickt werden.

IMCE konfigurieren

Die Einstellungen von IMCE lassen sich explizit anpassen. Ruft dazu Konfiguration>IMCE auf. Um sich die aktuellen Einstellungen eines der Profile anzusehen, klickt man auf Bearbeiten.

 

In diesem Dialogfenster kann man explizit angeben, wie IMCE arbeiten soll. Hier lässt sich beispielsweise festlegen, wie groß die Dateien maximal sein dürfen, die man auf den Server lädt. Unter Directories lassen sich außerdem die durchsuchbaren Verzeichnisse angeben.

Auf der Hauptseite kann man unter Role-profile assignments den Rollen ganz bestimmte Rechte zuweisen. So kann man dort beispielsweise der Rolle Authentifizierter Benutzer das Profil Sample profile geben. (Was es mit diesem Profil auf sich hat, könnt ihr euch anzeigen lassen, indem ihr unter Profile name bei Sample profile auf Bearbeiten klickt).

Nachdem die Änderungen gespeichert wurden, können Mitglieder der Rolle Authentifizierter Benutzer Bilder hochladen. Dazu müssen sie in ihre Kontoeinstellungen wechseln, in denen es jetzt das Register File browser gibt.

Und über jenen Datei-Browser wird der Upload ermöglicht.

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