Image Marker Paragraphs

Image Marker Paragraphs lets you add clickable markers on top of any image. Each marker opens a small popup with your own content, such as text, images or links.

Use it for things like campus maps, floor plans, product images or interactive diagrams.

Features

• Drag-and-drop editor: click on the image to add a marker, drag it to move it. You can also move markers with the arrow keys.
• Any content in the popup: each marker can show any paragraph type you already use.
• Numbered markers with a legend: markers are numbered 1, 2, 3… and a legend under the image lists what each number means.
• Accurate positions: markers are saved as percentages, so they stay in the right place on every screen size.
• Ready to use: the paragraph types and styling are created when you enable the module.
• Easy to theme: change colours and sizes with CSS variables, or override the templates in your theme.
• Accessible: markers work with the keyboard and screen readers, and the form still works without JavaScript.

Requirements

• Drupal 11.1 or later
• Paragraphs
• Entity Reference Revisions

How to use

1. Add a Paragraphs field to your content type and allow the Interactive Map paragraph type.
2. Create content, add an Interactive Map, and upload a background image.
3. Click on the image to place markers and add content to each one.
4. Save. Visitors can click a marker to see its content.

Technical Guidance

Technical planning and guidance for this module were provided by Razeem.