PHPackages                             emran-alhaddad/smart-image-hotspots - 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. emran-alhaddad/smart-image-hotspots

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

emran-alhaddad/smart-image-hotspots
===================================

4142[1 issues](https://github.com/emran-alhaddad/smart-image-hotspots/issues)PHP

Since Jan 17Pushed 1y ago1 watchersCompare

[ Source](https://github.com/emran-alhaddad/smart-image-hotspots)[ Packagist](https://packagist.org/packages/emran-alhaddad/smart-image-hotspots)[ RSS](/packages/emran-alhaddad-smart-image-hotspots/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (1)DependenciesVersions (2)Used By (0)

Here’s the updated README in plain text using Markdown format:

```
# ![Icon](src/icon.svg) Smart Image Hotspots

> Smart Image Hotspots is a Statamic addon that allows you to add hotspots to images.

## 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
- **GraphQL support** for querying image hotspots data

## 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:

```bash
composer require emran-alhaddad/smart-image-hotspots
```

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 `Refresh Image` button.
3. Click the `Add Hotspot` button.
4. Click and drag the hotspot to the desired position.
5. Add a description for the hotspot.

[![Image Hot Spots Field](fields.png)](fields.png)**Note:** Hotspots cannot be placed in the red border area to prevent breaking the page bounds at certain sizes.

### 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 }}

            {{svg src="heroicons/solid/plus.svg" class="size-6"}}

          {{# tooltip #}}

            {{ content }}

      {{ /hotspots }}

  {{ /image_hot_spots }}

```

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

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

GraphQL Support
---------------

[](#graphql-support)

This addon includes GraphQL support, allowing you to query image hotspot data dynamically.

### Example GraphQL Query

[](#example-graphql-query)

Here’s an example of a GraphQL query to fetch hotspot data:

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

### Example Response

[](#example-response)

```
{
  "data": {
    "imageHotspots": {
      "imageFile": {
        "url": "https://example.com/image.png",
        "id": "assets::example/image.png",
        "fileName": "image.png",
        "alt": "An example image"
      },
      "hotspots": [
        {
          "x": 54.97,
          "y": 49.47,
          "content": "Example content 1"
        },
        {
          "x": 26.66,
          "y": 69.66,
          "content": "Example content 2"
        }
      ]
    }
  }
}
```

With this feature, you can easily integrate your image hotspots into dynamic GraphQL-based frontends or APIs.

```

```

###  Health Score

17

—

LowBetter than 6% of packages

Maintenance28

Infrequent updates — may be unmaintained

Popularity11

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity18

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% 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.

### Community

Maintainers

![](https://www.gravatar.com/avatar/7cad96f9e9c3c7a4600d1f5c458f3fbce165cbbcfa4600335fae50f5acf59b05?d=identicon)[emran-alhaddad](/maintainers/emran-alhaddad)

---

Top Contributors

[![emran-alhaddad](https://avatars.githubusercontent.com/u/65433346?v=4)](https://github.com/emran-alhaddad "emran-alhaddad (7 commits)")

### Embed Badge

![Health badge](/badges/emran-alhaddad-smart-image-hotspots/health.svg)

```
[![Health](https://phpackages.com/badges/emran-alhaddad-smart-image-hotspots/health.svg)](https://phpackages.com/packages/emran-alhaddad-smart-image-hotspots)
```

###  Alternatives

[milon/barcode

Barcode generator like Qr Code, PDF417, C39, C39+, C39E, C39E+, C93, S25, S25+, I25, I25+, C128, C128A, C128B, C128C, 2-Digits UPC-Based Extention, 5-Digits UPC-Based Extention, EAN 8, EAN 13, UPC-A, UPC-E, MSI (Variation of Plessey code)

1.5k13.3M39](/packages/milon-barcode)[bkwld/croppa

Image thumbnail creation through specially formatted URLs for Laravel

510496.0k23](/packages/bkwld-croppa)[char0n/ffmpeg-php

PHP wrapper for FFmpeg application

495225.1k1](/packages/char0n-ffmpeg-php)[goat1000/svggraph

Generates SVG graphs

132849.6k3](/packages/goat1000-svggraph)[cohensive/embed

Media Embed (for Laravel or as a standalone).

120370.4k](/packages/cohensive-embed)[netresearch/rte-ckeditor-image

Image support in CKEditor for the TYPO3 ecosystem - by Netresearch

63991.3k4](/packages/netresearch-rte-ckeditor-image)

PHPackages © 2026

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