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.
Foto hochladen, Marker setzen, Tooltips füllen. Auto-Save aktiv.
Aus dem picpins-Dashboard die zwei Zeilen HTML kopieren.
Im Beitrags-Editor auf HTML-Quellansicht umschalten, Code einfügen, speichern.
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.
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.
<script>-Tags automatisch. Wenn dein Embed nach dem Speichern verschwindet, liegt es an dieser Filter-Einstellung — siehe nächster Schritt. 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.
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.
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.
Foto vom Gebäude, Hotspots auf Eingänge, Anlaufstellen, Öffnungszeiten.
Campus-Foto mit Hotspots auf Gebäude, Räume, Mensa, Sekretariat.
Stadtkarte oder Wanderkarte als Bild, Sehenswürdigkeiten als Polygon-Marker.
Foto vom Maschinenpark oder Werkstatt, Hotspots mit technischen Details und Anfrageformular.
script aus der Sperrliste entfernen.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.
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.
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.
Nein. Embed läuft als reines HTML+JS. Solange Editor und Filter den Code durchlassen, funktioniert es ohne Plugin.
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.
Ja. Jeder Beitrag, jedes Custom Module, jede Position kann ein eigenes Embed enthalten. Skript-Tag wird einmal geladen, danach werden alle Container automatisch initialisiert.
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.
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.
Embed-Code rein, ggf. Filter angepasst, fertig. Der Rest liegt im picpins-Editor.