Interaktive Bilder in Ghost: HTML-Karte, Embed und der direkte Weg zu Hotspots

Ghost und die HTML-Karte

Ghost ist auf das Schreiben ausgerichtet — schlanker Editor, schöne Typografie, gute Performance. Klickbare Bildbereiche sind nicht der Kernfokus, aber sie lassen sich problemlos integrieren. Hier sind die Optionen.

Voraussetzung: HTML-Karte aktiviert

Im Ghost-Editor (Koenig) findest du beim Klick auf das Plus-Symbol ein Menü mit Block-Typen. Eine davon ist die HTML-Karte. Diese Karte erlaubt beliebigen HTML-Code direkt im Beitrag.

Methode 1: Klassische Imagemap in der HTML-Karte

Im Beitrags-Editor an der gewünschten Stelle eine neue Zeile beginnen. + klicken, HTML wählen. Im Code-Feld den Imagemap-Code einfügen. Auf eine andere Stelle im Editor klicken — die Karte rendert die HTML-Vorschau. Beitrag speichern oder veröffentlichen.

Diese Methode funktioniert in jedem Ghost-Theme. Wie überall: Imagemaps sind nicht responsive, also Vorsicht auf Mobilgeräten.

Methode 2: Embed-Code von externen Tools

Wenn du picpins nutzt, kommt der Embed-Code in dieselbe HTML-Karte. Tool deiner Wahl: Bild hochladen, Marker setzen, Embed-Code kopieren. In Ghost im Beitrags-Editor + → HTML. Code einfügen, Karte verlassen, speichern.

Ghost rendert HTML-Karten ohne weitere Filter — der Embed läuft direkt durch. Auch script-Tags werden nicht entfernt, anders als in vielen anderen CMS.

Methode 3: Theme-Anpassung mit Custom Code

Im Ghost-Admin unter Settings → Code injection kannst du JavaScript site-weit laden. Wenn dein Hotspot-Tool ein einmaliges Skript braucht, das auf mehreren Beiträgen verwendet wird, ist hier der richtige Ort. picpins braucht das nicht — der Embed-Code lädt das Skript selbst.

Bildquelle: Ghost-CDN oder extern?

Ghost speichert Beitragsbilder in seinem internen Storage. Das ist gut für Ladezeiten, aber problematisch, wenn du eine Imagemap baust und das Bild später durch eine neue Version ersetzt wird (Ghost ändert dann den Pfad). Bei externen Tools liegt das Bild beim Anbieter — dort ist die URL stabil, solange du das Projekt nicht löschst.

AMP und interaktive Bilder

Ghost unterstützt AMP für Beiträge. AMP-Seiten haben strikte Einschränkungen für JavaScript und beliebigen HTML-Code. Wenn du AMP aktiv hast, werden externe Embeds in der AMP-Version deines Beitrags meist nicht angezeigt — Besucher von Google-AMP-Suchergebnissen sehen das Bild dann ohne Hotspots. Lösungsoptionen: AMP für die betroffenen Beiträge deaktivieren oder eine alternative Darstellung mit Markdown-Links bieten.

Theme-CSS

Manche Ghost-Themes packen alle Inhalte in einen Container mit fester Breite. Wenn dein interaktives Bild dadurch zu klein wirkt, kannst du in der HTML-Karte das Bild mit width:100%; max-width:none; versehen oder im Theme-CSS den Content-Container für HTML-Karten überschreiben.

Empfehlung für Ghost

Ghost ist primär ein Blog-Tool. Für Blogposts mit gelegentlichen interaktiven Bildern reicht die HTML-Karte plus Embed-Code. Wenn du regelmäßig komplexe Hotspot-Inhalte produzierst, ist ein dediziertes Tool wie picpins die saubere Wahl — du erstellst das interaktive Bild dort einmal, bindest es per Embed ein, und kannst es ändern, ohne den Beitrag erneut zu öffnen.