Joomla Logo

Interaktive Bilder in Joomla einbinden

Hotspots und klickbare Lifestyle-Fotos in Joomla-Beiträgen, Custom Modules und Templates. Über den HTML-Editor — JCE oder TinyMCE — und ein paar Editor-Filter-Einstellungen.

Funktioniert in Joomla 3.x und 4.x.

In drei Schritten zum eingebetteten Bild

1

picpins-Bild aufbauen

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

2

Embed-Code holen

Aus dem picpins-Dashboard die zwei Zeilen HTML kopieren.

3

In Joomla einfügen

Im Beitrags-Editor auf HTML-Quellansicht umschalten, Code einfügen, speichern.

So bindest du picpins ein

Joomla nutzt standardmäßig TinyMCE als WYSIWYG-Editor; viele Sites setzen alternativ auf JCE (mehr Features). Beide unterstützen HTML-Einbettung — der Trick ist, die Editor-Filter so zu konfigurieren, dass sie das script-Tag durchlassen.

1. In einem Beitrag (Article)

Im Joomla-Backend unter Inhalt → Beiträge einen neuen Beitrag erstellen oder bestehenden öffnen. Im Editor-Toolbar das HTML-Symbol klicken (in JCE meist </>, in TinyMCE „Quellcode").

Embed-Code an der gewünschten Stelle einfügen, „Speichern" oder „Übernehmen" klicken. Das Embed sollte direkt in der Beitragsansicht funktionieren.

Hinweis: Joomla filtert in einigen Editor-Profilen <script>-Tags automatisch. Wenn dein Embed nach dem Speichern verschwindet, liegt es an dieser Filter-Einstellung — siehe nächster Schritt.

2. Editor-Filter anpassen (falls Embed nicht angezeigt wird)

Im Backend unter System → Konfiguration → Beiträge → Editor-Filter (oder in Joomla 4: System → Konfiguration → Globale Filter) findest du eine Liste „Verbotene Elemente" pro Benutzer-Gruppe.

Standardmäßig steht hier oft script drin. Für die Gruppe, mit der du editierst (Super User, Administrator), das script aus der Liste entfernen oder den Filter-Typ auf Whitelist umstellen und script, div erlauben.

Hinweis: Achtung: Script-Filter haben einen Sicherheitsgrund — sie verhindern XSS durch User-Input. Ändere die Filter nur für vertrauenswürdige Benutzergruppen, nicht für „Public" oder „Registered".

3. Als Custom Module

Wenn du picpins-Embeds in Sidebars oder im Header platzieren willst: Unter Erweiterungen → Module → Neu → Custom (oder „Eigener HTML-Inhalt") ein neues Modul erstellen. Im Editor-Bereich denselben Embed-Code einfügen, Modul-Position wählen und einer Page-Zuweisung geben.

4. Im Template direkt (Power-User)

Für globale Embeds (z. B. auf der Startseite) kannst du den Code direkt in eine Template-Datei wie templates/[deintemplate]/index.php einfügen. Alternativ ein Override anlegen, um Updates des Templates nicht zu blockieren.

Vorher Backup machen — Template-Edits sind heikel.

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 Joomla gut ist

Behörden- oder Vereins-Site

Foto vom Gebäude, Hotspots auf Eingänge, Anlaufstellen, Öffnungszeiten.

Schul- oder Universitäts-Site

Campus-Foto mit Hotspots auf Gebäude, Räume, Mensa, Sekretariat.

Tourismus-Portal

Stadtkarte oder Wanderkarte als Bild, Sehenswürdigkeiten als Polygon-Marker.

Industrie- und Handwerks-Sites

Foto vom Maschinenpark oder Werkstatt, Hotspots mit technischen Details und Anfrageformular.

Tipps und Stolperfallen

Häufige Fragen

Funktioniert picpins in Joomla 3 und 4?

Ja, in beiden. Die Editor-Mechanismen sind ähnlich, nur die Menü-Pfade unterscheiden sich leicht. In Joomla 4 sind die Globalen Filter besser zugänglich, in 3 musst du sie pro Editor-Profil setzen.

Mein Embed verschwindet nach dem Speichern — warum?

Joomla hat einen Sicherheitsfilter, der standardmäßig <script>-Tags entfernt. Im Backend unter System → Konfiguration → Beiträge → Filter (Joomla 3) oder System → Konfiguration → Globale Filter (Joomla 4) das script-Tag aus der Sperrliste der relevanten Benutzergruppe nehmen.

Was ist der Unterschied zwischen TinyMCE und JCE?

TinyMCE ist der Standard-Editor in Joomla. JCE (Joomla Content Editor) ist ein beliebter Drittanbieter-Editor mit mehr Features — vor allem mit besserer HTML-Quellansicht und Datei-Browser. Beide unterstützen Embeds, JCE meist mit weniger Reibung.

Brauche ich ein Plugin für picpins?

Nein. Embed läuft als reines HTML+JS. Solange Editor und Filter den Code durchlassen, funktioniert es ohne Plugin.

Kann ich picpins als globales Element auf mehreren Seiten anzeigen?

Ja, am saubersten als Custom Module. Unter Erweiterungen → Module → Neu → Eigener HTML-Inhalt, Embed einfügen, Modulposition wählen, Pages zuweisen. So erscheint das Bild auf allen ausgewählten Seiten.

Mehrere Embeds auf einer Seite — geht das?

Ja. Jeder Beitrag, jedes Custom Module, jede Position kann ein eigenes Embed enthalten. Skript-Tag wird einmal geladen, danach werden alle Container automatisch initialisiert.

Funktioniert es mit Cache-Plugins wie System – Page Cache oder JotCache?

In der Regel ja. Die Cache-Plugins speichern den HTML-Output, das Embed-Skript funktioniert auch aus dem Cache heraus. Bei aggressiven Skript-Optimierungen (Minify, Combine) das picpins-Skript von der Optimierung ausschließen.

Was passiert bei einem Joomla-Update?

Embeds in Beiträgen und Modulen sind update-stabil. Embeds direkt im Template-Code können bei Template-Updates verloren gehen — deshalb Template-Override nutzen, nicht direkt das Original ändern.

Joomla + picpins: einmal Filter angepasst, nie wieder Aufwand.

Embed-Code rein, ggf. Filter angepasst, fertig. Der Rest liegt im picpins-Editor.