Sprache
Hotspot-Bilder in Ghost-Blog-Posts, Pages und Newsletter-Editionen — über die HTML-Karte direkt im Editor.
Funktioniert in selbstgehostetem Ghost und auf Ghost(Pro).
Foto hochladen, Marker setzen, Tooltips füllen. Auto-Save übernimmt das Speichern.
Im picpins-Dashboard die zwei Zeilen HTML kopieren.
Im Ghost-Editor das Plus-Symbol klicken, „HTML"-Karte wählen, Embed-Code reinpacken.
Ghost setzt auf einen sauberen Block-Editor, der Markdown und HTML gleichermaßen unterstützt. Embeds gehen über die HTML-Karte — eine spezielle Block-Art, die rohen HTML+JS-Code akzeptiert.
Im Ghost-Admin den Post oder die Page öffnen. An der gewünschten Stelle das +-Symbol klicken (oder / tippen). Im Karten-Menü HTML wählen.
Im Code-Feld den Embed-Code einfügen, einmal außerhalb klicken zum Speichern. Ghost rendert den Code direkt in der Vorschau — du siehst dein Bild bereits im Editor.
Wenn du auf vielen Posts Embeds nutzt: Im Ghost-Admin unter Settings → Code injection das <script src="https://picpins.com/embed.js" async></script>-Tag in „Site Footer" einfügen. So wird das Skript automatisch auf jeder Seite geladen.
In den HTML-Karten der einzelnen Posts reicht dann nur noch der <div class="picpins-embed" data-token="..."></div>-Container. Spart Skript-Duplikate.
Ghost-Newsletter werden aus dem gleichen Post-Editor heraus erstellt. Wenn du eine HTML-Karte mit picpins-Embed in einen Post einfügst, der per Newsletter verschickt wird: Im Newsletter-E-Mail funktioniert das Embed nicht — E-Mail-Clients erlauben kein JavaScript.
Workaround: Im Newsletter ein statisches Bild plus Link zur Web-Version des Posts platzieren, wo das interaktive Embed dann funktioniert.
Bei selbstgehostetem Ghost kannst du das Embed-Skript fest ins Theme einbauen. In default.hbs (Standard-Layout) vor dem schließenden </body>-Tag das Skript einfügen.
Bei Ghost(Pro) hast du keinen direkten Theme-Zugriff — dort die Code-Injection-Variante nutzen.
Screenshot deines Tools, Marker auf Features mit Erklärung und Demo-Link. Mehr Engagement als Fließtext.
Foto vom Reiseziel mit Hotspots auf Sehenswürdigkeiten, Tipps, Restaurants. Web-Version des Newsletters.
Werkzeug- oder Software-Screenshot mit Marker auf jeden Schritt. Klickbare Anleitung.
Premium-Posts mit detaillierten Hotspot-Bildern als zusätzlicher Mehrwert für Paid-Subscriber.
Settings → Code injection → Site Footer laden, in HTML-Karten nur den Container belassen.Ja, in beiden. Die HTML-Karte ist eine Standard-Funktion des Ghost-Editors und in jeder Variante verfügbar. Bei selbstgehostetem Ghost hast du zusätzlich Theme-Zugriff für tiefere Integration.
Nein. E-Mail-Clients (Gmail, Outlook, Apple Mail) blockieren JavaScript komplett — das Embed läuft nur in der Web-Version des Posts. Im Newsletter selbst stattdessen ein statisches Bild plus Link zur Web-Variante einsetzen.
Die Markdown-Karte rendert Markdown-Syntax (Überschriften, Links, Listen) und filtert HTML-Tags zum Teil. Die HTML-Karte akzeptiert rohen HTML- und JavaScript-Code unverändert. Für Embeds immer HTML-Karte nutzen.
Im Ghost-Admin unter Settings → Code injection → Site Footer das <script>-Tag einfügen. Es wird dann auf jeder Seite automatisch geladen — in den einzelnen Posts reicht der <div class="picpins-embed">-Container.
Ja. Du kannst beliebig viele HTML-Karten in einem Post platzieren, jede mit eigenem Embed. Skript wird einmal geladen, alle Container werden automatisch initialisiert.
Das offizielle Ghost-AMP-Plugin filtert <script>-Tags aus dem AMP-Output. Embeds sind in der AMP-Version des Posts also nicht sichtbar — in der Standard-Version laufen sie normal. Wenn AMP deaktiviert oder nicht installiert ist, ist das kein Thema.
Ghost-Sites sind generell schnell. Das picpins-Skript ist asynchron und blockiert das Rendering nicht. Lighthouse-Score wird kaum beeinflusst.
Embeds in Posts und Pages sind theme-unabhängig — sie bleiben beim Theme-Wechsel erhalten. Theme-eigene Skripte (z. B. via Code Injection) bleiben ebenfalls aktiv. Embeds direkt im Theme-Code (für Self-Hosted) musst du im neuen Theme erneut einbauen.
HTML-Karte rein, Code rein, fertig. Funktioniert auf Ghost(Pro) wie auf Self-Hosted.