Bilder in Drupal

Zum Relaunch von bixa.cc möchte ich ein wenig die Möglichkeiten zur Platzierung von Bildern in Drupal vorführen. Die bisherigen Ansätze waren:

  • Vorgegebene Platzierung im Content, Upload direkt in dem Bearbeitungsformular des Artikels. Hierfür ist der Einsatz von CCK, Image Field und Image Cache notwendig. Die Bedienung ist einfach, jedoch unflexibel.
  • Freie Platzierung im Text, Bilder müssen vorher als seperater Inhaltstyp angelegt werden. Die Mittel der Wahl sind hier das Image Modul sowie Image Assist zur Platzierung.

Leider sind diese zwei Ansätze nicht kompatibel, daher war es immer notwendig, sich zu entscheiden und damit auf bestimmte Funktionen zu verzichten. Heute möchte ich eine Modulkombination vorführen, die beide Ansätze kombiniert und damit die freie Platzierung von CCK Bildern erlaubt.

Basics

Man benötigt folgende Module:

(um benutzerdefinierte Inhaltsfelder in einem Inhaltstyp zu ergänzen)

(um Bilder anhängen zu können)

(um Bilder in verschiedenen Größen auf der Seite einzufügen)

Mit diesen Modulen kann man jetzt Bilder hochladen und sie in voreingestellter Größe anzeigen lassen.

Allerdings ist es nicht möglich:

  • die Bilder individuell im Text zu platzieren
  • die Größe der Bilder anzupassen
  • Bilder von anderen Artikeln nochmals zu verwenden

Platzierung im Text

Das Modul Insert ermöglich es, die angehängten Bilder im Text an der gewünschten Position erscheinen zu lassen. Konkret wird Image Field um einen Button zum Einfügen eines <img> Tags an der Cursor Position ergänzt. Dabei kann man auch Image Cache Presets auswählen.

 Individuelle Größe

Der Image Resize Filter ermöglicht das individuelle Anpassen der Größe eines Bildes. Der Filter muss lediglich in den Eingabeformaten aktiviert werden und kann auch um Sonderfunktionen, wie Thickbox, erweitert werden.

Das Teaserbild

Wenn die eingefügten Bilder nicht unterhalb des Contents nochmals angezeigt werden sollen, aktiviert man

  • die Checkbox "Ausschließen" (in den Anzeigeeinstellungen des Inhaltstyps)

Hier kann trotzdem bestimmt werden, welche Darstellung in der node Variable gerendert wird.

Um im Teaser lediglich ein Bild anzuzeigen, ist ein kleiner Umweg über die Templates notwendig. Im Verzeichnis des jeweiligen Themes findet sich die Datei:

  •  node.tpl.php

Sie enthält Anweisungen zur Darstellung einer Node auch als Teaser. Hier findet sich u.a. die Anzeige der Teaserüberschrift:

  <?php if ($page == 0): ?>
  <h2 class="title"><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>
  <?php endif; ?>

Hier kann man an geeigneter Stelle das erste Bild des CCK Feldes einfügen:

  <?php if ($page == 0): ?>
  <h2 class="title"><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>
  <?php print $node->field_image[0]['view'] ?>
  <?php endif; ?>