{"id":263385,"date":"2025-12-05T11:58:28","date_gmt":"2025-12-05T11:58:28","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/image-hotspots-field-for-acf\/"},"modified":"2025-12-05T12:03:03","modified_gmt":"2025-12-05T12:03:03","slug":"image-hotspots-field-for-acf","status":"publish","type":"plugin","link":"https:\/\/pcd.wordpress.org\/plugins\/image-hotspots-field-for-acf\/","author":23273694,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"0.2","stable_tag":"0.2","tested":"6.8.5","requires":"5.8","requires_php":"7.2","requires_plugins":null,"header_name":"Image Hotspots Field for ACF","header_author":"Levels Branding and Development","header_description":"Adds a field to capture coordinates relative to specified images","assets_banners_color":"","last_updated":"2025-12-05 12:03:03","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/levels.dev\/plugins\/image-hotspots-field-for-acf","header_author_uri":"https:\/\/levels.dev","rating":0,"author_block_rating":0,"active_installs":40,"downloads":920,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"0.2":{"tag":"0.2","author":"levelsdev","date":"2025-12-05 12:03:03"}},"upgrade_notice":{"0.2":"<p>Branding update with plugin name change to match WordPress.org slug. No functional changes.<\/p>"},"ratings":[],"assets_icons":[],"assets_banners":[],"assets_blueprints":{},"all_blocks":[],"tagged_versions":["0.2"],"block_files":[],"assets_screenshots":[],"screenshots":{"1":"Field setup in ACF settings showing Image Field Label configuration","2":"Image hotspot field in ACF admin showing visual marker","3":"Field working in ACF Gutenberg blocks","4":"Example of interactive image with hotspot marker on frontend","5":"Repeater field usage showing linked image search hierarchy"},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[2211,2217,3531,127147,40211],"plugin_category":[59],"plugin_contributors":[241826],"plugin_business_model":[],"class_list":["post-263385","plugin","type-plugin","status-publish","hentry","plugin_tags-acf","plugin_tags-advanced-custom-fields","plugin_tags-coordinates","plugin_tags-hotspots","plugin_tags-image-mapping","plugin_category-utilities-and-tools","plugin_contributors-levelsdev","plugin_committers-levelsdev"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/s.w.org\/plugins\/geopattern-icon\/image-hotspots-field-for-acf.svg","icon_2x":false,"generated":true},"screenshots":[],"raw_content":"<!--section=description-->\n<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>\n\n<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>\n\n<h4>Key Features<\/h4>\n\n<ul>\n<li>Click on an image to capture precise X\/Y coordinates<\/li>\n<li>Supports both pixel-based and percentage-based coordinates<\/li>\n<li>Links to existing ACF image fields<\/li>\n<li>Visual marker shows the selected position<\/li>\n<li>Works in regular ACF field groups AND ACF blocks<\/li>\n<li><strong>NEW:<\/strong> Full Gutenberg block editor compatibility<\/li>\n<li>Compatible with ACF 5.8+<\/li>\n<\/ul>\n\n<h4>What's New in This Fork<\/h4>\n\n<p>This fork adds critical improvements for modern WordPress development:<\/p>\n\n<ul>\n<li><strong>Gutenberg Block Support:<\/strong> Works seamlessly in ACF blocks within the Gutenberg editor<\/li>\n<li><strong>Event Capture Fix:<\/strong> Solves the issue where Gutenberg intercepts click events<\/li>\n<li><strong>Improved DOM Search:<\/strong> Enhanced field discovery in complex block structures<\/li>\n<li><strong>Enhanced Visibility:<\/strong> Fixed z-index and marker visibility in block contexts<\/li>\n<li><strong>Auto-Refresh:<\/strong> Automatically updates block previews when coordinates change<\/li>\n<\/ul>\n\n<h4>Original Plugin<\/h4>\n\n<p>Original plugin by <strong>Andrew Rockwell<\/strong> - Thank you for creating this excellent field type!<\/p>\n\n<p>This fork maintains 100% backwards compatibility with the original while adding modern editor support.<\/p>\n\n<h4>How to Use<\/h4>\n\n<ol>\n<li>Install and activate the plugin<\/li>\n<li>Create a custom ACF field of type \"Image Mapping\"<\/li>\n<li>In field settings, enter the name of an existing ACF image field to link to<\/li>\n<li>Add an image to the linked field<\/li>\n<li>Click on the image in the hotspot field to capture coordinates<\/li>\n<li>Coordinates are stored as comma-separated strings (e.g., \"150px,200px\" or \"45.5%,60.2%\")<\/li>\n<\/ol>\n\n<p>Works in both ACF field groups and ACF blocks!<\/p>\n\n<h4>Compatibility<\/h4>\n\n<p>This ACF field type is compatible with:<\/p>\n\n<ul>\n<li>ACF 5.8+<\/li>\n<li>WordPress 5.8+<\/li>\n<li>Gutenberg block editor<\/li>\n<li>Classic editor<\/li>\n<li>PHP 7.2+<\/li>\n<\/ul>\n\n<h3>Credits<\/h3>\n\n<p><strong>Original Plugin:<\/strong> Andrew Rockwell (rockwell15, eridesign)\n<strong>Gutenberg Fork:<\/strong> Levels Branding and Development<\/p>\n\n<p>Thank you to Andrew Rockwell for creating the original plugin!<\/p>\n\n<h3>Support<\/h3>\n\n<p>For issues specific to this plugin:\n* GitLab: https:\/\/gitlab.com\/levels-dev\/plugins\/advanced-custom-fields-image-hotspots-field-fork<\/p>\n\n<p>For general ACF questions:\n* ACF Documentation: https:\/\/www.advancedcustomfields.com\/resources\/<\/p>\n\n<h3>Other Plugins by Levels<\/h3>\n\n<p>Check out our other WordPress plugins:<\/p>\n\n<ul>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/ready-made-oxygen-integration\/\">Ready-Made Oxygen Integration<\/a> - Seamless integration for Oxygen Builder with pre-built components and utilities<\/li>\n<\/ul>\n\n<p>Visit <a href=\"https:\/\/levels.dev\/plugins\">levels.dev\/plugins<\/a> for more tools and resources.<\/p>\n\n<h3>Technical Details<\/h3>\n\n<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>\n\n<p>For detailed technical information, see the GUTENBERG_FIX.md file in the plugin directory.<\/p>\n\n<!--section=installation-->\n<h4>Automatic Installation<\/h4>\n\n<ol>\n<li>Go to Plugins &gt; Add New<\/li>\n<li>Search for \"ACF Image Mapping Hotspots\"<\/li>\n<li>Click \"Install Now\" and then \"Activate\"<\/li>\n<\/ol>\n\n<h4>Manual Installation<\/h4>\n\n<ol>\n<li>Download the plugin<\/li>\n<li>Upload the <code>acf-image-mapping-hotspots<\/code> folder to <code>\/wp-content\/plugins\/<\/code><\/li>\n<li>Activate the plugin through the 'Plugins' menu in WordPress<\/li>\n<li>Create a new ACF field and select \"Image Mapping\" as the field type<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id='does%20this%20work%20with%20acf%20blocks%20in%20gutenberg%3F'><h3>Does this work with ACF blocks in Gutenberg?<\/h3><\/dt>\n<dd><p>Yes! This is the primary enhancement in this fork. The original plugin didn't work in ACF blocks due to event interception issues, which have been completely resolved.<\/p><\/dd>\n<dt id='can%20i%20use%20percentage-based%20coordinates%3F'><h3>Can I use percentage-based coordinates?<\/h3><\/dt>\n<dd><p>Yes, enable the \"Percentage Based Coordinates\" option in the field settings. This is useful for responsive designs where the image size may vary.<\/p><\/dd>\n<dt id='does%20this%20work%20with%20repeater%20fields%3F'><h3>Does this work with repeater fields?<\/h3><\/dt>\n<dd><p>Yes, the field automatically searches through repeater parent fields to find the linked image.<\/p><\/dd>\n<dt id='is%20this%20backwards%20compatible%20with%20the%20original%20plugin%3F'><h3>Is this backwards compatible with the original plugin?<\/h3><\/dt>\n<dd><p>Yes, 100%. You can safely switch from the original plugin to this fork without any breaking changes.<\/p><\/dd>\n<dt id='how%20do%20i%20retrieve%20coordinates%20in%20my%20template%3F'><h3>How do I retrieve coordinates in my template?<\/h3><\/dt>\n<dd><p>Use standard ACF functions:<\/p>\n\n<pre><code>$coords = get_field('hotspot_field_name');\nlist($x, $y) = explode(',', $coords);\n<\/code><\/pre><\/dd>\n<dt id='does%20this%20require%20acf%20pro%3F'><h3>Does this require ACF Pro?<\/h3><\/dt>\n<dd><p>No, it works with both free ACF and ACF Pro. However, using it in ACF blocks requires ACF Pro 5.8+.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>0.2 (2025-12-05)<\/h4>\n\n<ul>\n<li>Updated plugin branding to Levels Branding and Development<\/li>\n<li>Updated plugin name to \"Image Hotspots Field for ACF\" for WordPress.org consistency<\/li>\n<li>Minor documentation updates<\/li>\n<\/ul>\n\n<h4>0.1 (2025-01-29)<\/h4>\n\n<ul>\n<li>Fork created with Gutenberg support<\/li>\n<li>Added event capture phase interception for ACF blocks<\/li>\n<li>Improved DOM search for block contexts<\/li>\n<li>Added CSS fixes for z-index and visibility<\/li>\n<li>Added automatic block preview refresh on coordinate change<\/li>\n<li>Enhanced documentation with debugging guides<\/li>\n<li>Updated for WordPress 6.8 compatibility<\/li>\n<li>Updated for ACF 5.8+ compatibility<\/li>\n<li>Tested with PHP 8.0+<\/li>\n<li>100% backwards compatible with original plugin<\/li>\n<\/ul>\n\n<h4>0.0.1 (Original by Andrew Rockwell)<\/h4>\n\n<ul>\n<li>Initial release of ACF Image Hotspots Field<\/li>\n<\/ul>","raw_excerpt":"Capture coordinates on images for interactive hotspots. Fork with full Gutenberg block editor support.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/263385","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=263385"}],"author":[{"embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/levelsdev"}],"wp:attachment":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=263385"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=263385"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=263385"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=263385"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=263385"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=263385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}