picpins für TYPO3: Hotspots im Inhaltselement einbinden

In drei Schritten zum eingebetteten Bild

1

picpins-Bild aufbauen

Foto hochladen, Marker setzen, Tooltips füllen. Auto-Save ist aktiv.

2

Embed-Code holen

Im picpins-Dashboard die zwei Zeilen HTML kopieren.

3

Inhaltselement „Reiner HTML"

Im Page-Modul „Neues Inhaltselement → Reiner HTML" wählen, Code einfügen, speichern.

So bindest du picpins ein

TYPO3 trennt klar zwischen RTE-Inhalten (mit HTML-Filter) und reinen HTML-Elementen. Für Embeds nimmst du immer das Element „Reiner HTML" — das umgeht den Filter komplett. Alternativ kann man RTE-Profile so konfigurieren, dass sie Embed-Tags durchlassen.

1. Inhaltselement „Reiner HTML" anlegen

Im Backend unter Web → Seite die Zielseite öffnen. Im gewünschten Bereich (Spalte) auf + Inhaltselement klicken. Im Wizard unter Spezial findest du Reiner HTML.

Im erscheinenden Editor-Feld den Embed-Code einfügen. Speichern und auf der Frontend-Seite prüfen.

Hinweis: Das Inhaltselement „Reiner HTML" ist standardmäßig nur für Backend-Benutzer mit entsprechenden Rechten verfügbar. Falls es im Wizard fehlt, im User-TSconfig die Berechtigung freischalten.

2. Im RTE eines Standard-Text-Elements

Wenn du den Embed im laufenden Text einer Standard-„Text"- oder „Text & Medien"-Komponente einbinden willst, musst du den RTE-HTML-Filter anpassen. In der TYPO3-Konfiguration unter page TSconfig oder dem RTE-YAML-Profil die processing-Regel erweitern, sodass script und div.picpins-embed erlaubt sind.

Bei einer Standard-CKEditor-Konfiguration in der YAML-Datei (z. B. EXT:rte_ckeditor/Configuration/RTE/Default.yaml) die allowedContent-Liste erweitern.

Hinweis: Das ist Power-User-Territorium. Wenn du keinen Admin-Zugang oder TSconfig-Erfahrung hast: Lieber „Reiner HTML"-Element nutzen — schneller, sauberer.

3. Im Backend-Layout fest einbauen

Für Embeds, die auf vielen Seiten gleich sind (z. B. Karten im Footer): TypoScript- oder Fluid-Template anpassen. Im Template-Modul oder in der entsprechenden Fluid-Datei (Resources/Private/Templates/Page/Default.html) den Embed direkt platzieren.

So liegt das Embed im Theme, nicht im Content-Bereich — kein Pflegen pro Seite.

4. Mit eigener Extension (Custom Plugin)

Für umfangreichere Setups (z. B. picpins-Bild als Datenbank-Field eines Custom-Records) lohnt eine eigene Extension. Im Extension-Code das Embed-Markup in einem Fluid-Partial unterbringen und über das CMS-Backend pflegen.

Übertrieben für 2–3 Embeds, aber sauber für komplexe Sites mit vielen interaktiven Bildern.

Embed-Code zum Kopieren

<div class="picpins-embed" data-token="dein-token-hier"></div>
<script src="https://picpins.com/embed.js" async></script>

Wofür picpins auf TYPO3 gut ist

Hochschul- oder Universitätsseiten

Campus-Karte oder Gebäude-Foto, Hotspots auf Hörsäle, Bibliothek, Mensa, Verwaltungstrakt.

Behörden- und Verwaltungs-Sites

Foto vom Rathaus oder Amtsgebäude, Hotspots auf Anlaufstellen, Sprechzeiten, Aufzüge.

Industrie und Maschinenbau

Maschinenfoto mit Hotspots auf Komponenten, Sicherheitshinweise, Wartungsdokumente.

Tourismus und Kultur

Stadtkarte, Sehenswürdigkeiten als Polygon-Marker mit Foto, Öffnungszeiten, Audioguide-Link.

Tipps und Stolperfallen

Immer das Element „Reiner HTML" nutzen, nicht den RTE — spart Stunden mit Filter-Konfiguration.
Wenn das Element fehlt: User-TSconfig prüfen und Wizard-Item freischalten.
Skript-Optimierungen (Concatenation, Minify) für das picpins-Skript ausschließen, falls die Site sowas einsetzt.
Für globale Embeds: lieber Fluid-Template-Override als Inhaltselement auf jeder Seite.
Vor TYPO3-Major-Updates: Backup, dann Update, dann „Reiner HTML"-Elemente stichprobenartig testen.

Häufige Fragen

Funktioniert picpins in TYPO3 v11 und v12?

Ja, in beiden. Das Inhaltselement „Reiner HTML" gibt es in beiden Versionen unverändert. In v12 ist die RTE-Konfiguration etwas zugänglicher gemacht, der Workflow bleibt gleich.

Brauche ich eine Extension?

Nein. „Reiner HTML" ist ein Core-Inhaltselement, kein Plugin. Solange du im Backend Editierrechte für diesen Element-Typ hast, funktioniert es ohne weiteres Setup.

Mein „Reiner HTML"-Element fehlt im Wizard — warum?

Das Element ist in einigen Backend-Konfigurationen für nicht-Admin-User gesperrt. Lösung: Im User-TSconfig oder Page-TSconfig die mod.wizards.newContentElement.wizardItems.special.elements.html-Regel prüfen und freischalten. Admin-Rolle hat das standardmäßig.

Kann ich picpins direkt im RTE einfügen?

Theoretisch ja, praktisch ist es der mühsamste Weg. Der CKEditor in TYPO3 hat strikte Filter, die <script>- und manche <div>-Attribute herausstrippen. Du müsstest das RTE-Profil in YAML anpassen. Faustregel: „Reiner HTML"-Element nutzen.

Mehrere Embeds auf einer Seite — geht das?

Ja. Jedes Inhaltselement vom Typ „Reiner HTML" kann ein eigenes Embed enthalten. Beliebig oft auf der gleichen Seite einsetzbar.

Funktioniert es mit dem TYPO3-Cache und mit dem Static-File-Cache?

Ja, beide Cache-Strategien speichern das HTML-Output, in dem das Embed bereits enthalten ist. Das Embed-Skript läuft client-seitig, unabhängig vom Cache. Bei aggressiven Skript-Optimierungen das picpins-Skript ggf. von der Bundlung ausschließen.

Lässt sich picpins in TYPO3-Backend-Workflows integrieren?

Wenn du strukturierte Daten brauchst — z. B. ein Bild pro Eintrag in einer News-Extension — lohnt eine eigene Extension oder ein Custom-Field, das die picpins-Embed-ID speichert. Im Fluid-Template den Embed dann pro Datensatz rendern.

Was passiert bei TYPO3-Updates?

Inhaltselemente bleiben über Updates stabil. „Reiner HTML"-Inhalte sind reine Datenbank-Strings — sie werden nicht angefasst. Theme-Embeds (Fluid-Templates) immer als Override anlegen, damit sie bei Template-Updates erhalten bleiben.

Interaktive Bilder in TYPO3 einbinden