Widget:HtmlImageMap: Difference between revisions

Revision as of 22:57, 13 October 2026

This widget maps coordinates cleanly without breaking standard wiki variables. Usage:

@@ Line 1: / Line 1: @@
 <noinclude>
-This widget allows you to create an image map by pasting raw HTML area coordinates.
+This widget maps coordinates cleanly without breaking standard wiki variables.
 Usage:
 {{#widget:HtmlImageMap
 |image=YourImageFileName.png
-|width=800
+|width=960
 |mapname=sandboxmap
-|areas=
+|areas=rect 328,88,460,244 https://sandbox.umd.edu Electronics
-<area shape="rect" coords="300,80,450,220" href="https://example.com" title="Electronics">
-<area shape="rect" coords="480,110,580,240" href="https://example.com" title="Crafting">
 }}
 </noinclude>
 <includeonly>
-<!-- Automatically resolves the full path of your wiki file -->
+<!-- Dynamically grab your wiki image file path -->
-<img src="{{canonicalurl:Special:FilePath/{$image}}}" width="{$width|escape:'html'}" usemap="#{$mapname|escape:'html'}" alt="Makerspace Map">
+<img src="{{canonicalurl:Special:FilePath/{$image}}}" width="{$width|default:960}" usemap="#{$mapname|default:floorplan}" alt="Makerspace Map">
-<map name="{$mapname|escape:'html'}">
+<map name="{$mapname|default:floorplan}">
-  {$areas}
+<!-- We pull the data straight out of the plain text parameter -->
+<!-- Using custom inline elements prevents Smarty engine syntax leakage -->
+{$areas|validate:''}
 </map>
 </includeonly>