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

Andrew Rockwell

eridesign

ACF: Image Hotspots Field

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

LibraFire

LibraFire PinPoints

LF PinPoints is a simple drag and drop image mapping plugin with a caption functionality.

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>


Alternatives to Image Hotspots Field for ACF

Top alternatives