Erstellen einer Inline-Galerie

Diese Anleitung zeigt, wie man schnell und unkompliziert eine Inline-Galerie erstellt.

Ziel ist es, zu einem Inhalt (beispielsweise "Page") beliebig viele Bilder hinzuzufügen. Diese sollen dann frei im Text positioniert werden können und bei einem Klick auf das Bild soll sich eine vergrößerte Version öffnen.

benötigte Module

Schritt 1: ImageCache Presets anlegen

Als Erstes legen wir uns zwei ImageCache Presets an, über die einerseits das Thumbnail (welches später im Text erscheint) und andererseits eine vergrößerte Version des Bildes definiert werden.

ImageCache thumbnail settings
ImageCache display settings

Die hier gezeigten Einstellungen sind natürlich nur Beispielwerte und können je nach Belieben angepasst werden.

Schritt 2: Inhaltstyp um Feld erweitern

Nachdem die ImageCache Presets definiert sind, können wir den gewünschten Inhaltstypen erweitern. Ich verwende hier als Beispiel den Inhaltstypen Page.

add field to page

Die folgenden Einstellungen verwende ich hier mal als Beispiel: für die Bilder wird ein eigenes Verzeichnis unterhalb von sites/default/files verwendet und man kann für jedes Bild noch einen eigenen Titel vergeben.

Image path settings
Image title settings

Nun folgen die Einstellungen zum Einfügen des Bildes in den Inhalt. Dazu gibt es bei den Bildeinstellungen den Bereich "Insert", in dem ausgewählt werden kann, wie das Bild in den Inhalt eingefügt werden soll. Da wir mit Colorbox arbeiten, wird hier die Option "Colorbox" in Verbindung mit unserem Thumbnail-Preset von ImageCache ausgewählt.

Image insert settings

Abschließend werden noch ein paar allgemeine Einstellungen für das neue Feld getroffen. Hier kann unter Anderem festgelegt werden, wie viele Bilder in den Inhalt eingefügt werden können.

Image global settings

Als kleinen Zusatz sollte man dann auch noch in den Display Settings des Inhaltstypen festlegen, dass die Werte des Bildfeldes nicht ausgegeben werden. Ansonsten würden die Bilder ein zweites Mal direkt unterhalb des Inhaltes erscheinen.

Page display settings

Inhalt erstellen

Nachdem die Feldeinstellungen nun abgeschlossen sind, können wir Inhalte erstellen und dort Bilder einfügen.
Dazu wählt man das gewünschte Bild aus, vergibt optional einen Titel und klickt dann auf die Schaltfläche "Insert" neben dem Bild. Dadurch wird im Bodytext an der aktuellen Cursorposition der HTML-Code für das Bild eingefügt.

Da wir in den Einstellungen für das Bild festgelegt haben, dass wir Colorbox verwenden wollen, wird hier auch gleich ein Link um das Bild herum aufgebaut und die für Colorbox erforderlichen Klassen eingefügt.

Galerie erstellen - 01
Galerie erstellen - 02

Vor dem Speichern sollte darauf geachtet werden, dass als Eingabeformat ein Format gewählt wird, welches die eingefügten HTML-Elemente und Attribute nicht entfernt. Ich habe hier der Einfachheit halber "Full HTML" gewählt, dies sollte jedoch nicht auf einer Live-Seite für alle Benutzer freigeschaltet werden.

Sicherer ist es, speziell für diesen Zweck ein weiteres Eingabeformat zu definieren.

Ergebnis

Speichert man den Inhalt mit den eingefügten Bildern nun ab, sieht man die Bilder mitten im Text. Nach einem Klick auf eines der Vorschaubilder öffnet sich über Colorbox eine größere Version des Bildes und man kann durch alle im Text eingefügten Bilder navigieren.

Galerie Ergebnis - 01
Galerie Ergebnis - 02

Kommentare

Bild von Gast
Gast

Hallo,

habt Ihre eine Idee, ob vielleicht auch eine Zusammenarbeit zwischen dem ImageResizeFilter und ImageCache funktioniert?

Gruß,
Mike

Stefan Borchert user image
stefan.borchert

Hallo Mike.
Ja, diese beiden Module funktionieren auch in Kombination miteinander. Wenn Du http://drupal.org/project/insert installiert hast und dann in den Filter-Einstellungen den ImageResizeFilter aktiviert hast, kannst Du beim Einfügen von Bildern erst einen ImageCache-Preset wählen und dann die Größe des damit eingefügten Bild über die vom Filter bereitgestellte Funktionalität nach Belieben anpassen.
Der Preset von ImageCache dient somit nur als Vereinfachung, damit das Bild nicht in der vollen Größe in den Text eingefügt wird und dann umständlich auf die gewünschte Größe gebracht werden muss.

Stefan

Hallo Stefan, hallo Mike,

mein Vorschlag ist, nicht zwei ImageCache Presets sondern drei, eventuell auch vier Presets anzulegen: pagegallery image, pagegallery_thumb_left, pagegallery_thumb_right, pagegallery_thumb_center und diesen dann CSS-Eigenschaften für float und margin zuzuweisen. Ich kann dann die Bilder an beliebiger Stelle platzieren und vom Text umfließen lassen (Breite von pagegallery_thumb_center eventuell auf ganze Spaltenbreite des Textbereiches einstellen). Dies ginge natürlich auch über die Bild-Eigenschaften von IMCE in Wysiwyg-Editoren. Diese Lösung halte ich aber nicht für userfreundlich.
Beste Grüße
Lothar

Thomas Moseler user image
tommi

Es geht sogar alles in Kombination mit dem Media Modul, das ich überhaupt sehr empfehlen will. Die Basisfunktionalität ist recht fehlerfrei, und vom Komfort her ist das ne ganz neue Dimension.
http://drupal.org/project/media

Neuen Kommentar schreiben