Levels Branding and Webdevelopment

<p>This plugin adds a custom ACF field type that allows users to click on an image and capture X/Y coordinates. Perfect for creating interactive image maps, product hotspots, or any feature requiring precise coordinate-based positioning.</p>
<p><strong>This is a fork of the original ACF Image Hotspots Field by Andrew Rockwell</strong>, enhanced with full support for ACF blocks in the Gutenberg editor.</p>
<h4>Key Features</h4>
<ul>
<li>Click on an image to capture precise X/Y coordinates</li>
<li>Supports both pixel-based and percentage-based coordinates</li>
<li>Links to existing ACF image fields</li>
<li>Visual marker shows the selected position</li>
<li>Works in regular ACF field groups AND ACF blocks</li>
<li><strong>NEW:</strong> Full Gutenberg block editor compatibility</li>
<li>Compatible with ACF 5.8+</li>
</ul>
<h4>What’s New in This Fork</h4>
<p>This fork adds critical improvements for modern WordPress development:</p>
<ul>
<li><strong>Gutenberg Block Support:</strong> Works seamlessly in ACF blocks within the Gutenberg editor</li>
<li><strong>Event Capture Fix:</strong> Solves the issue where Gutenberg intercepts click events</li>
<li><strong>Improved DOM Search:</strong> Enhanced field discovery in complex block structures</li>
<li><strong>Enhanced Visibility:</strong> Fixed z-index and marker visibility in block contexts</li>
<li><strong>Auto-Refresh:</strong> Automatically updates block previews when coordinates change</li>
</ul>
<h4>Original Plugin</h4>
<p>Original plugin by <strong>Andrew Rockwell</strong> – Thank you for creating this excellent field type!</p>
<p>This fork maintains 100% backwards compatibility with the original while adding modern editor support.</p>
<h4>How to Use</h4>
<ol>
<li>Install and activate the plugin</li>
<li>Create a custom ACF field of type “Image Mapping”</li>
<li>In field settings, enter the name of an existing ACF image field to link to</li>
<li>Add an image to the linked field</li>
<li>Click on the image in the hotspot field to capture coordinates</li>
<li>Coordinates are stored as comma-separated strings (e.g., “150px,200px” or “45.5%,60.2%”)</li>
</ol>
<p>Works in both ACF field groups and ACF blocks!</p>
<h4>Compatibility</h4>
<p>This ACF field type is compatible with:</p>
<ul>
<li>ACF 5.8+</li>
<li>WordPress 5.8+</li>
<li>Gutenberg block editor</li>
<li>Classic editor</li>
<li>PHP 7.2+</li>
</ul>
<h3>Credits</h3>
<p><strong>Original Plugin:</strong> Andrew Rockwell (rockwell15, eridesign)<br />
<strong>Gutenberg Fork:</strong> Levels Branding and Development</p>
<p>Thank you to Andrew Rockwell for creating the original plugin!</p>
<h3>Support</h3>
<p>For issues specific to this plugin:<br />
* GitLab: https://gitlab.com/levels-dev/plugins/advanced-custom-fields-image-hotspots-field-fork</p>
<p>For general ACF questions:<br />
* ACF Documentation: https://www.advancedcustomfields.com/resources/</p>
<h3>Other Plugins by Levels</h3>
<p>Check out our other WordPress plugins:</p>
<ul>
<li><a href="https://wordpress.org/plugins/ready-made-oxygen-integration/" rel="ugc">Ready-Made Oxygen Integration</a> – Seamless integration for Oxygen Builder with pre-built components and utilities</li>
</ul>
<p>Visit <a href="https://levels.dev/plugins" rel="nofollow ugc">levels.dev/plugins</a> for more tools and resources.</p>
<h3>Technical Details</h3>
<p>This fork includes a sophisticated event capture system that intercepts mouse events before Gutenberg’s React event system can prevent them. The plugin uses native JavaScript <code>addEventListener</code> with capture phase to ensure reliable coordinate capture in all contexts.</p>
<p>For detailed technical information, see the GUTENBERG_FIX.md file in the plugin directory.</p>


Image Hotspots Field for ACF

Capture coordinates on images for interactive hotspots. Fork with full Gutenberg block editor support.

Andrew Rockwell

eridesign

<p>How to Use:</p>
<ul>
<li>Install plugin</li>
<li>Create a custom field of this type & link it to an image field</li>
<li>Go to the admin section you made the field for & add an image to the linked field</li>
<li>The image will then load in the image mapping field, click to capture the coordinates, relative to the image</li>
<li>Coordinates are stored as comma separated strings</li>
</ul>
<p>TODO:</p>
<ul>
<li>Square mapping</li>
<li>Polygon mapping</li>
</ul>
<h4>Compatibility</h4>
<p>This ACF field type is compatible with:<br />
* ACF 5</p>


ACF: Image Hotspots Field

Great plugin

just needed to write similiar thing. you saved me definitely few hours. 

great work, thanks for sharing

I use this to add marker coordinates to a simple world map image. works great with repeater field. only "problem" is it saves the percentages as a string separated by comma and with a lot of decimals. so first thing to do is to explode the string in order to access the left and top percentages.

Still works

Hi dev,

I found out your plugin/module is not updated anymore but still working on the latest core version of wordpress. This plugin is very helpful and unique. Hope to update and maintain this plugin. Thank you.

This is a unique field. This is very useful.


Hi, i have written some fixes for ACF Gutenberg Block Compatibility.Since i did not get a response i assume this Plugin is no longer supported.I published a fork:https://wordpress.org/plugins/image-hotspots-field-for-acf/


Project appears abandoned — fork

Advanced Custom Fields add-on to allow the capturing of coordinates on an image, based on user clicks.

Image Hotspots Field for ACF vs ACF: Image Hotspots Field