At Freshy, we regularly assist WordPress site owners with plugin configuration and advanced content integrations. In this case, we helped a client successfully embed interactive image maps on their website using the Image Map Pro plugin, resolving a display issue related to script loading and editor behavior.
Issue Background
The client wanted to replace static images on their website with interactive graphics using the Image Map Pro plugin. These image maps include labels and tooltips on mouse rollover, improving user engagement.
However, when attempting to embed the generated image map on a test page, the image map did not appear in preview or on the front end. The client attempted to paste the plugin’s HTML code block, but it failed to display correctly.
Diagnosis
Our technical review identified the following root causes:
- WordPress Editor Auto-Formatting: The WordPress editor was automatically adding
<p>and<br>tags inside the Image Map Pro<script>block, breaking the script execution. - Plugin Script Not Loading Automatically: The Image Map Pro plugin was not automatically loading its required JavaScript file on the page where the image map shortcode was added.
Resolution Steps
- Fixing HTML Auto-Formatting: We manually cleaned up the HTML block, removing unwanted
<p>and<br>tags without adding extra plugins. - Ensuring Script Loading: We added the following script in the site’s
<head>section, ensuring it only loaded when the Image Map Pro plugin was active:<script src="https://[clientsite.com]/wp-content/plugins/image-map-pro/js/client/main.js"></script> - Global Script Loading Optimization: To streamline future use, we added the Image Map Pro script globally in the site’s header to avoid manual script addition.
- Responsive Image Setting: We adjusted the plugin’s image settings by enabling the Responsive option, ensuring the image dynamically resized to fit the container across desktop and mobile views.
- Shortcode Simplification: For easier use, we advised the client to use a simple shortcode (
[applications-img]) instead of copying and pasting long JSON embed codes.
Final Outcome
The interactive image map is now functioning correctly on the test and live pages.
- Image map displays properly without formatting issues.
- JavaScript dependencies load automatically on all pages.
- Image size dynamically adjusts for desktop and mobile.
- Simplified process for adding new interactive images via shortcode.
Key Technical Takeaways
- WordPress Editor Behavior: Auto-paragraphing can break embedded scripts. Always check HTML formatting when embedding JavaScript.
- Plugin Script Dependencies: Not all plugins automatically load required scripts sitewide. Manual script inclusion may be necessary.
- Performance vs Usability: Loading scripts globally adds minimal performance overhead but simplifies editor workflow.
- Shortcode Usage: Using shortcodes reduces the risk of errors compared to pasting large JSON code blocks.
Want to add interactive elements and advanced visuals to your WordPress site?
Freshy can help you configure, troubleshoot, and optimize third-party plugins like Image Map Pro.
Contact Freshy for WordPress development support
