PHPackages                             darinlarimore/statamic-imagehotspots - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Image & Media](/categories/media)
4. /
5. darinlarimore/statamic-imagehotspots

ActiveLibrary[Image & Media](/categories/media)

darinlarimore/statamic-imagehotspots
====================================

2.2.1(1mo ago)42.3k↑28.6%4PHPPHP ^8.2CI passing

Since Oct 10Pushed 2w ago1 watchersCompare

[ Source](https://github.com/darinlarimore/statamic-imagehotspots)[ Packagist](https://packagist.org/packages/darinlarimore/statamic-imagehotspots)[ RSS](/packages/darinlarimore-statamic-imagehotspots/feed)WikiDiscussions main Synced yesterday

READMEChangelog (10)Dependencies (14)Versions (22)Used By (0)

[![](src/icon.svg)](src/icon.svg) Statamic Imagehotspots
========================================================

[](#-statamic-imagehotspots)

> Statamic Imagehotspots is a Statamic addon that allows you to add hotspots to images.

Features
--------

[](#features)

This 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

How to Install
--------------

[](#how-to-install)

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-imagehotspots
```

How to Use
----------

[](#how-to-use)

### Setup Fields

[](#setup-fields)

Add an `Image Hot Spots` field and configure the required asset `Container` setting

[![Image Hot Spots Field](/fieldType.png)](/fieldType.png)

### Usage

[](#usage)

1. Add an image to the `Assets` field.
2. Click the `Add Hotspot` button.
3. Click and drag the hotspot to the desired position.
4. Add content to the hotspot.

[![Image Hot Spots Field](/fields.png)](/fields.png)**Note:** Red border area prevents breaking the page bounds at certain sizes. This is is configurable in the fieldset.

### Front End Templating Example

[](#front-end-templating-example)

This example uses Tailwind, Alpine.js, and the X-anchor alpine.js plugin. The `{{ image_hot_spots }}{{ /image_hot_spots }}` tag pair is used to loop through the hotspots and the `{{ hotspots }}{{ /hotspots }}` tag pair is used to access the hotspot data.

```

	{{ image_hot_spots field="image_hot_spots_field" }}

			{{ hotspots }}

					{{# tooltip #}}

							{{ content.heading }}
							{{ if content.text }}

									{{ content.text | truncate(256, '...') }}

							{{ /if }}

			{{ /hotspots }}

	{{ /image_hot_spots }}

```

**Note:** the `-translate-x` and `-translate-y` classes are used to center the hotspots accurately and helps prevent the hotspots from breaking the page bounds.

[![Image Hot Spots Front End Example](/imageHotspots.png)](/imageHotspots.png)

### GraphQL Support

[](#graphql-support)

This addon supports GraphQL. You can access the hotspots data in your GraphQL queries like so:

```
{
	imageHotspots {
		imageFile {
			url
			id
			fileName
			alt
		}
		hotspots {
			x
			y
			content
		}
	}
}
```

### v2.0.0

[](#v200)

**Note:** Breaking changes from v1 to v2:

- The content of each hotspot now accepts an array of fieldtypes configured in the fieldset. Yay! But this will require you to reconfigure the fieldset, update your templates, and re-add content to your existing hotspots fields.

### Contributors:

[](#contributors)

- @Jade-GG - Added support support for arbitrary fieldtypes in the hotspot content.
- @emran-alhaddad - Added GraphQL support.
- @klickreflex - Fixed handling of global field references in the image\_hot\_spots tag.

###  Health Score

52

—

FairBetter than 96% of packages

Maintenance95

Actively maintained with recent releases

Popularity27

Limited adoption so far

Community15

Small or concentrated contributor base

Maturity61

Established project with proven stability

 Bus Factor1

Top contributor holds 62.7% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~37 days

Recently: every ~43 days

Total

17

Last Release

34d ago

Major Versions

1.0.3 → 2.0.02025-01-17

### Community

Maintainers

![](https://www.gravatar.com/avatar/f87bfd3084b748a8890d0b72c7ddc1c29922d72e4641aab0a824b29a9909a58b?d=identicon)[darinlarimore](/maintainers/darinlarimore)

---

Top Contributors

[![darinlarimore](https://avatars.githubusercontent.com/u/20300635?v=4)](https://github.com/darinlarimore "darinlarimore (42 commits)")[![Jade-GG](https://avatars.githubusercontent.com/u/32514269?v=4)](https://github.com/Jade-GG "Jade-GG (18 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (5 commits)")[![klickreflex](https://avatars.githubusercontent.com/u/435825?v=4)](https://github.com/klickreflex "klickreflex (1 commits)")[![MrMohamedAbdallah](https://avatars.githubusercontent.com/u/51543900?v=4)](https://github.com/MrMohamedAbdallah "MrMohamedAbdallah (1 commits)")

###  Code Quality

TestsPest

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/darinlarimore-statamic-imagehotspots/health.svg)

```
[![Health](https://phpackages.com/badges/darinlarimore-statamic-imagehotspots/health.svg)](https://phpackages.com/packages/darinlarimore-statamic-imagehotspots)
```

###  Alternatives

[statamic-rad-pack/runway

Eloquently manage your database models in Statamic.

135224.7k7](/packages/statamic-rad-pack-runway)[statamic/seo-pro

68516.6k](/packages/statamic-seo-pro)[statamic/statamic

Statamic

829179.5k](/packages/statamic-statamic)[statamic/eloquent-driver

Allows you to store Statamic data in a database.

126741.1k17](/packages/statamic-eloquent-driver)[duncanmcclean/statamic-cargo

Comprehensive e-commerce addon for Statamic. Build bespoke e-commerce sites without the complexity.

3416.6k](/packages/duncanmcclean-statamic-cargo)[visuellverstehen/statamic-picturesque

A Statamic tag for building HTML-only responsive images.

1118.2k](/packages/visuellverstehen-statamic-picturesque)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)