Recently, I wanted to place a quite complex image map on several pages in a Joomla site.
Normally, you would enter the complete code of the image and image map into every article where the map should occur. My challenge, though, was that the image map would need to be updated regularly. Thus, I'd have to create the image map in Dreamweaver, and manually change every instance of the map. Changing the code in every article (15-20 articles) is a tedious process, so I needed a simpler approach.
The image would be different for each page, but the image map would be identical.
The key is to use the LoadPosition plug-in Joomla. This plug-in, which is enabled by default, lets you insert a module into the article content. I've written about this tag previously in my article on How to Use Google AdSense with Joomla. Today, I want to share this practical application of the tag with you.
What I did was I created a new 'Custom HTML' module which contained the <map> code. The image itself would be placed in the content as usual. Followed by the loadposition tag to load the <map> HTML.
The image is tagged with map="map1" or similar as a reference the image map.
I placed the module into a custom position called 'imagemaprooms'. You won't need to create this module position in your template. Just enter your name of choice into the module position text field and you're good to go.
The syntax for inserting a module is, in my case:
loadposition imagemaprooms
You need to wrap the code with {} (curled brackets) for it to operate correctly.
By using this technique, I can alter the image map in the custom HTML module and the change will be loaded into every article containing the LoadPosition tag.
The LoadPosition tag is very useful and the uses are many. Every time you need to enter something into more than one article, consider using the tag to ease future updates of the shared content.
How do you use the LoadPosition tag?
Share your ideas with the readers by commenting below.