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