Automatisch unterschiedliche Bildgrößen bei Teaser und Artikel mit den Modulen CCK und Imagecache

Immer wieder fragen sich nicht nur Anfänger, wie man mit Drupal möglichst automatisiert unterschiedliche Bildgrößen für den Teaser (Anrisstext) und den Node ( eigentlicher Artikel ) erreichen kann. Das Ganze lässt sich relativ einfach bei Drupal mit zwei Modulen umsetzen.

Zum einen benötigt man das Modul CCK ( Content Construction Kit ), um ein (Bild)Feld im entsprechenden Inhaltstyp anlegen zu können. Zum anderen das Modul Imagecache um automatisierte Bildgrößen zu erhalten. Um Bilder in einen Inhaltstyp einzufügen werden ausserdem noch die Module Imagefield, Fielfield und ImageAPI benötigt.

Benötigte und eingesetzte Module bei diesem Tutorial:

• Drupal 6.10
• Imagecache
• CCK
• Imagefield
• Filefield
• ImageAPI

Module installieren ...

Nach dem Download und Upload der benötigten Module wird Imagecache und Imagefield zur Installation ausgewählt.

Damit die beiden Module fehlerfrei laufen, wird in der nächsten Maske nachgefragt, ob auch die Module Content, FileField und ImageAPI aktiviert werden sollen.

Da diese Module alle benötigt werden, wird "Fortfahren" gewählt. Da das Modul ImageAPI noch entweder die nunmehr bereits vorhandenen Module ImageAPI GD2 oder ImageAPI ImageMagick benötigt, wähle ich unter Module noch das Modul ImageAPI GD2 und außerdem noch Imagecache UI um mit Imagecache arbeiten zu können und aktiviere beide.

Neuer Feldtyp Bild in den Inhaltstypen mit dem Modul Imagefield

Nun kann es eigentlich losgehen. Unter Startseite › Verwalten › Inhaltsverwaltung wähle ich einen "neuen
Inhaltstyp hinzufügen" Als Name wähle ich Bildbeitrag und als Typ bildbeitrag. Alle anderen Einstellungen können unberücksichtigt und unverändert bleiben. 

Auf der folgenden Seite wähle ich im neu erstellten Inhaltstyp die Option "Felder verwalten" Dort haben wir jetzt die Möglichkeit ein neues Feld neben den Standardfeldern Titel und Textkörper zu diesem Inhaltstyp hinzuzufügen. Als Bezeichnung wähle ich fü das neue Feld Bild, als Feldname bild, als Datentyp Bild und das Formularelement wird automatisch in das Element Bild umgewandelt.

Im darauf folgenden Punkt Bild belasse ich die vorgegebenen Standardeinstellungen und wähle einfach "Feldeinstellungen speichern" Soviel erst einmal zur Vorbereitung des Inhaltstypes und eines Feldes für ein Bild in einem Beitrag.

Automatische Bildgrößen mit dem Modul Imagecache

Nun geht es zur Bildgrößenbearbeitung. Für mein Beispiel möchte ich im Teaser ein Bild mit den Abmessungen 150*150 Pixel haben und das Bild soll dann im eigentlichen Beitrag immer 300 Pixel breit sein und die Höhe des Bildes entsprechend den Relationen des upzuloadenden Ursprungsbildes automatisch angepasst werden.

Jetzt kommt das Modul Imagecache ins Spiel. Unter Startseite › Verwalten › Strukturierung > ImageCache wähle ich "Add new preset" und lege als erstes die automatische Umwandlung meines Teaserbildes fest. Als Preset Namespace gebe ich den Namen "bild_teaser" ein.

Unter den angebotenen Möglichkeiten von Imagecache wähle ich die Option "Scale and Crop" und gebe den Wert 150 als absolute Abmessung für Höhe ( Height ) und Breite ( width ) ein. Damit ist das Vorschaubild auch schon fertiggestellt.

Als nächstes kommt das Bild für den Beitrag selbst ins Spiel. Erneut wähle ich unter Startseite › Verwalten › Strukturierung > ImageCache "Add new preset" und lege eine automatische Umwandlung meines Beitragsbildes fest. Als Preset Namespace gebe ich hier den Namen "bild_node" ein.
Da ich hier immer ein Bild mit der Breite von 300 Pixeln haben möchte und das Ursprungsformat beibehalten werden soll, nehme ich dieses Mal die Option "Scale". Für den Weite Wert ( Width) gebe ich 300ein, die Höhe ( Height ) lasse ich leer und erlaube die Opion "upscale:" mit Ja.

Die Bildanzeige im Teaser und im Node festlegen

Nun ist eigentlich alles soweit vorbereitet und wir müssen nur noch festlegen, welche Bilder im Teaser und dann im eigentlichen Artikel anzuzeigen sind.

Hierzu gehen wir zurück zu unserem erstellten Inhaltstyp  mit Startseite › Verwalten › Inhaltsverwaltung
Bildbeitrag und wählen erneut "Felder verwalten". Am oberen Rand der Folgeseite befindet sich auch der Punkt
"Felder anzeigen" ... das bringt uns zum eigentlichen Ziel.

Hier wählen wir nun für das Feld "Bild" bei der Bezeichnung "hidden" aus ( damit vor dem Bild nicht ein störendes Textfragement "Bild" gezeigt wird ), und für den Anrisstext wähle ich "bild_teaser image linked to node" ( damit wird zum einen das kleinere Bild gezeigt und auch noch automatisch mit dem Beitrag verlinkt ) Und beim vollständigen Beitrag wähle ich bild_node image. ( Damit sollte immer das gewünschte 300 Pixel breite Bild angezeigt werden ).

Tja und damit sind alle Vorbereitungen abgeschlossen und es kann an Beiträge mit Bildern gehen, deren Bilder automatisch im richtigen Format und der richtigen Größe angepasst werden.

Anordung der Bilder mit CSS

Wer jetzt sein Bild beispielsweise im Garland Theme linksbündig angeordnet haben möchte, kann dies dadurch erreichen, daß in den Felder Einstellungen das Bildfeld vor dem Textkörper-Feld steht und mit der kleinen CSS Anweisung

.node img{ float: left; margin-right: 10px;} werden die Bilder links im Text angezeigt und haben einen rechten Abstand von 10 Pixeln.

Video zum Thema

Bereits vor einigen Wochen habe ich auch ein tolles Video entdeckt und eingebunden, in dem Sean Effel von Drupaltherapy.com genau dieses Thema in einem tollen englischen Video-Podcast vorstellt. Das Video Tutorial zu Imagecache ist hier ...

Viel Erfolg beim Nachbau!