Add Informational Hot Spots to an Image in Statamic CMS
Adding interactive "hot spots" boosts engagement and provides context. Use them for product showcases, floor plans, or guided tours. Learn how to add them to your Statamic CMS site by following this guide.
Coffee cups
Coffee cups are the unsung heroes of the morning—brave, sturdy, and always ready to hold our emotional support beverage. They endure scalding temperatures, questionable microwaving decisions, and the occasional existential crisis when left half-full.
Bowl Full of Pears
Pears are basically the fruit world’s biggest procrastinators. They spend weeks rock-hard, completely inedible, and then—BAM!—they ripen in exactly 17 minutes when you're not looking. Miss that window? Too bad, now they’re mush.
Check out this hotspots example above, this is what we will be making.
Install Statamic Image Hotspots Addon
You can search for this addon in the Tools > Addons section of the Statamic control panel and click install, or run the following command from your project root:
composer require darinlarimore/statamic-imagehotspotsThis addon provides the following features:
Save hotspot positions in percentages for absolute positioning usage
Supports SVG images
Antlers tag to access hotspots in your templates
Assign fields for hotspot content
Setup Fields
Installing this addon will add a new field type named Image Hot Spots, add this field to a blue print and give it a handle named image_hot_spots_field.
Note: Don't name the handle image_hot_spots, it conflicts with the tag we will use later.
Then within the configuration for the field set the required asset Container setting, and add fields to associate with each hotspot. In this example we are simply adding a Heading and Text field like shown below.
Field Usage
Once you have this configured save the blueprint and head over to an entry to use the new field you just setup.
Usage is pretty straight forward and intuitive, first add an image, then add some hot spots, drag them around, and add some content to them.
Add an Image
Like show below, you should be presented with an option to add an image. Go on and add one!
Add Some Hotspots
After adding an image you should then see a button to add hot spots, click on that. This should pop in a hot spot in the center of the image. Then click and drag the hotspot where you want it.
Add Content
After you position those hot spots, add some content to each hotspot. After you are done click Save and Publish at the top of the entry.
Build a Template
The next step is to build a template to display the image and hotspots. This example below uses Tailwind CSS and Alpine.JS along with the x-anchor plugin for Alpine.JS ignore that stuff if you are not using them.
example.antlers.html
Pay special attention to the {{ image_hot_spots field="image_hot_spots_field" }} tag pair in the example above. This tag will return an image and a hotspots array which you can loop over using the {{ hotspots }} tag pair.
The hotspots array then includes an X and Y parameter we use to absolute position the marker over the image and also contains a content array. In the example the info is rendered using the tags {{ content.heading }} and {{ content.text }}.
Congrats!
Head over to your browser refresh that page and you should now have a shiny working example just like shown above!