Interactive Image Hotspots

Add interactive hotspot pins to any image field in Drupal. Editors click the image to place pins, add rich-text content, and drag to reposition — all on the live page, no admin form needed.

Interactive Image Hotspots lets editors annotate images directly on the frontend. Click to place a pin, fill in a title and description, pick a colour, and save — no page reload, no separate admin screen. Visitors click a pin to open its popup. Works on any standard Drupal image-type field: media, node, paragraph, or any custom entity.

Features

• Attach to any image field on any entity type via Manage display — no media dependency
• Click to place and drag to reposition pins directly on the view page
• Rich-text pin content via CKEditor 5 in a Drupal AJAX modal
• Custom colour picker per pin
• Full translation support — positions and colours are shared; titles and content translate per language
• Language fallback chain via Entity Language Fallback
• Two permissions: administer hotspots (full CRUD) and edit hotspot labels (text only, for translators)
• Pins stored against the file entity — same pins appear wherever that image is reused
• Cache-aware with correct cache contexts and tags

Post-Installation

1. Go to Manage display for your entity (media type, content type, paragraph, etc.), find the image field, and set its formatter to Image Hotspot.
2. Go to People → Permissions and grant administer hotspots to editors or edit hotspot labels to translators.
3. Visit a page that displays the image — an Edit hotspots button appears above it. Click to enter edit mode, then click the image to place your first pin.

Additional Requirements

• Drupal 10.1 or 11.x
• Drupal core: File, Image modules
• Entity Language Fallback — optional for translation fallback

Similar projects

• Image Hotspots — similar pin-on-file approach, but limited to media entities and lacks frontend inline editing and multilingual support
• Image Map — HTML area maps for navigation use cases; no rich popup content or translation support

Community Documentation

Full setup and developer reference is in the README.md bundled with the module.