This project is not covered by Drupal’s security advisory policy.

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

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.

Supporting organizations: 
Material

Project information

  • Project categories: Media
  • Created by adil_siddiqui on , updated
  • shield alertThis project is not covered by the security advisory policy.
    Use at your own risk! It may have publicly disclosed vulnerabilities.

Releases