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.
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.
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.
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.
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.
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.
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.
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.
