Language
Hotspots and clickable lifestyle photos in Joomla articles, custom modules, and templates. Via the HTML editor — JCE or TinyMCE — and a few editor filter settings.
Works in Joomla 3.x and 4.x.
Upload a photo, place markers, fill tooltips. Auto-save active.
Copy the two HTML lines from the picpins dashboard.
In the article editor switch to HTML source view, paste the code, save.
Joomla uses TinyMCE as default WYSIWYG editor; many sites use JCE instead (more features). Both support HTML embedding — the trick is to configure the editor filters so they let the script tag through.
In the Joomla backend under Content → Articles create a new article or open an existing one. In the editor toolbar click the HTML icon (in JCE usually </>, in TinyMCE "Source code").
Paste the embed code at the desired position, click "Save" or "Apply". The embed should work directly in the article view.
<script> tags. If your embed disappears after saving, the filter setting is the cause — see next step. In the backend under System → Configuration → Articles → Editor Filters (Joomla 3) or System → Configuration → Global Filters (Joomla 4) you find a "Forbidden Elements" list per user group.
By default script is often listed there. For the group you edit with (Super User, Administrator), remove script from the list, or switch the filter type to Whitelist and allow script, div.
To place picpins embeds in sidebars or the header: under Extensions → Modules → New → Custom (or "Custom HTML") create a new module. In the editor area paste the same embed code, choose a module position, and assign it to pages.
For global embeds (e.g. on the homepage) you can paste the code directly into a template file like templates/[yourtemplate]/index.php. Alternatively create an override so template updates do not block your changes.
Make a backup first — template edits are tricky.
Photo of the building, hotspots on entrances, contact points, opening hours.
Campus photo with hotspots on buildings, rooms, cafeteria, secretariat.
City or hiking map as image, sights as polygon markers.
Photo of machinery or workshop, hotspots with technical details and inquiry form.
script from the blocklist.Yes, in both. The editor mechanics are similar, only the menu paths differ slightly. In Joomla 4 the Global Filters are more accessible, in 3 you set them per editor profile.
Joomla has a security filter that strips <script> tags by default. In the backend under System → Configuration → Articles → Filter (Joomla 3) or System → Configuration → Global Filters (Joomla 4) remove the script tag from the blocklist of the relevant user group.
TinyMCE is the default editor in Joomla. JCE (Joomla Content Editor) is a popular third-party editor with more features — especially better HTML source view and file browser. Both support embeds, JCE usually with less friction.
No. The embed runs as plain HTML+JS. As long as the editor and filters let the code through, it works without a plugin.
Yes, cleanest as a Custom Module. Under Extensions → Modules → New → Custom HTML, paste the embed, choose a module position, assign pages. The image then appears on all selected pages.
Yes. Every article, every custom module, every position can hold its own embed. The script tag loads once, then all containers initialize automatically.
Generally yes. Cache plugins store the HTML output, the embed script works from the cache too. With aggressive script optimization (minify, combine) exclude the picpins script from the optimization.
Embeds in articles and modules are update-stable. Embeds directly in template code can be lost on template updates — therefore use a template override instead of changing the original.
Paste embed code, adjust filter if needed, done. The rest lives in the picpins editor.