Drupal: Bilder in Beiträgen einfügen und verwalten

Bilder in HTML Seiten einzufügen ist eine Sache für sich. WYSIWYG-Editor und CMS-System machen die ganze Geschichte einfacher, allerdings ist die Generierung von Thumbnails und Anpassung der Bildgröße auf den Seiten dann nicht mehr ganz so einfach.
Eine wirklich optimale Lösung hierzu bietet mittlerweile Drupal mit einigen Modulen. Viele dieser von Anwendern erstellen Modulen sind mittlerweile so gefragt, dass sie direkt in die zukünftige Drupal7 Core integriert werden. Für Drupal 6 fasse ich auf der folgenden Seite alle Infos zusammen, da ich bisher noch keinen detaillierten Artikel gefunden haben.

Vorbereitungen

Drupal mit den unten aufgeführten Modulen sollte eingerichtet werden. Jetzt erstellen wir einen neuen Inhaltstypen und legen ein neues Dateifeld (Bild) an.

Ablage und Struktur der Bilderablage

Normalerweise werden alle Bilderuploads unter Drupal im dafür angegeben Ordner abgelegt. Eine Strukturierung findet nicht statt, alles wird fein im gleichen Ordner abgelegt. Bei Hunderten von Bilder kann schnell den Überblick verlieren. Ordnung ins Chaos bringt das Modul FileField Path, mithilfe von Tokens kann der Speicherort von Uploads verändert werden. So können Datei nach Jahren, Monaten, Beitragstypen oder nach Beitragsnummer [nid] (mein Favorit) im Uploadordner abgelegt werden.
Möchte man dann noch den Dateiname anpassen z.B. um Sonderzeichen, Leerzeichen und Groß-/Kleinschreibung zu entfernen, hilft das Module Transliteration weiter.

Bilderanhäge in den Beitrag

Damit die angehängten Bilder über das CCK-Feld in das Textfeld eingefügt werden können, brauchen wir das Module Insert (ehemals FileField Insert). Es stellt neben jedem Bildanhang einen Button bereit. Per Knopfdruck wird das gewünschte Bild mit eventuell definierten Thumbnails (ImageCache) eingefügt werden kann.
Zum Aktivieren dieses Buttons muss für es für das CCK-Feld aktivieren. Dazu wechselt man in die Inhaltstypen, zur Feldverwaltung und wählt das gewünschte Feld aus.

automatische Thumbnails

Thumbnails mit ImageCache

Um Thumbnails in Drupal zu generieren bietet sich das Modul ImageCache an. Über sogenannte Presents können Vorlage erstellt werden, die dann weiter verknüpft (CCK und Lightbox2) werden können.

Zoomoverlay

Nimmt man zur Generierung von Bilder ImageCache, so kann man die Thumbnails im Aussehen sehr gut anpassen. Neben den normalen Actions stellt das Module Imagecache Actions noch einige weitere zur Verfügung, unter anderem Overlays. So wird über das Thumbnail-Bild ein weiteres Bild gelegt. Ich nehme hier immer einer Lupe mit PNG und einer halbtransparenz. Das Bild kann über die Eigenschaften center, left und right auf dem eigentlichen Bild positioniert werden und muss im files Ordner von Drupal liegen.

dynamische Bildergrößen aus WYSIWYG-Editor erstellen

WYSIWYG-Editor sollten heutzutage zum Standard gehören im jedem CMS-System. Somit ist die Erstellung von HTML-Seiten so leicht, wie Texte über Textverarbeitungsprogramm zu erstellt. Dazu gehört es auch, dass Bilder in der Größe einfach per Maus-ziehen verändert werden können. Normalerweise werden die verkleinerten Bilder allerdings nur per HTML verkleinert, soll heißen Bilder werden immer in orignaler Größe heruntergeladen und vom Browser dann verkleinert. Dies erzeugt natürlich unnötigen Traffic und Ladezeit. Sinnvoller ist es das Bild nicht größer bereitzustellen als es benötigt wird. Per klick auf das Bild wird dann die größere Fassung geladen.

Bewerkstelligen kann man das mithilfe des Image Resize und Lightbox2 Modul. Nach Aktivierung des Image Resize Module müssen wir es für einen Eingabeformat aktivieren. Alle Bilder werden dann durch dieses Modul beim Seitenaufruf entsprechend angepasst und generiert. Will man zusätzlich noch Lightbox einbinden, so muss in den Filtereinstellungen unter rel der Wert lightbox angeklickt. So kann auf jedem verkleinerten Bild per klick die größere Darstellungen aufgerufen werden.

Zoombutton für Image Resize

Werden Bilder mit dem Image Resize Module in Beiträgen verkleinert, so sollte der Anwender direkt erkennen können, dass er sich eine vergrößerte Version anzeigen lassen kann. Nimmt man hierfür keine ImageCache, weil man sich nicht auf eine Größe festlegen will, so kann unterhalb des Bildes einen Lupe oder sonstiges per CSS hinzufügen.

Wir versehen unser eigentlich Bild einfach mit einem Hintergrundbild, dass wir unten rechts platzieren. Durch ein Abstand per padding zwischen dem Bild und dem "Rand", wird das Hintergrundbild dann auch angezeigt. Damit jedem verkleinerten Bild eine CSS-Klasse angehängt wird, müssen wir in den Resize Image Module das Textfeld (siehe oben) ausgefüllt werden.

CSS

.image_resize_class img {
 background-color:white;
 padding-bottom:9px;
 background-image:url(images/resize_img.png);
 background-position:right bottom;
 background-repeat:no-repeat;
}

alternative für Newsseiten mit Label

Auf Startseiten werden oft Beiträge mit Neuigkeiten veröffentlicht, die nach Möglichkeit ziemlich gleich aussehen. Dafür erstelle hierfür einen eigenen Inhaltstyp, welcher die Bilder Einbindung in den Beitrag etwas eingrenzt. Die angehängten Bilder werden über CCK als Gruppe z.B. fließend rechtsbündig in den Text eingebunden. Zusätzlich kann dem Bild ein kurzer Labeltext angeben werden.

node-news.tpl.php

  <div class="content clear-block">
  <?php if (isset($node->content['field_news_pictures']['#children'])): ?>
    <?php print $node->content['field_news_pictures']['#children']; ?>
  <?php endif; ?>
    <?php print $content ?>
  </div>

mehrere Bilder hochladen

Uploads von Bildern oder Dateien können in Browsern immer nur einzeln durchgeführt werden. Möchte man mehrere Bilder gleichzeitig in Drupal hochladen, so kann das Module Image FUpload installiert werden. Es erweitert die Uploadfunktion von Drupal mithilfe einen kleines Flashapplet (SWFUpload). Dadurch können im Dialogfenster mehrere Bilder vom lokalen PC markiert werden und im Paket hochgeladen werden.

Zusammenfassung der genutzten Module