PHPackages                             sas/image-hotspot - 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. sas/image-hotspot

ActiveShopware-platform-plugin[Image & Media](/categories/media)

sas/image-hotspot
=================

Image Hotspot Plugin for Shopware 6

1.0.0(5y ago)212201[1 issues](https://github.com/Shape-and-Shift/shopware-image-hotspot/issues)MITPHP

Since Feb 17Pushed 5y ago1 watchersCompare

[ Source](https://github.com/Shape-and-Shift/shopware-image-hotspot)[ Packagist](https://packagist.org/packages/sas/image-hotspot)[ RSS](/packages/sas-image-hotspot/feed)WikiDiscussions master Synced today

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

### Short video introduction

[](#short-video-introduction)

[![Bildschirmfoto 2021-04-05 um 10 35 50](https://user-images.githubusercontent.com/8193345/113549820-bbcbf280-95fa-11eb-834b-1121f1df9be4.png)](https://youtu.be/D4vTilgZ-xc)

### Install the plugin

[](#install-the-plugin)

After you cloned the plugin you still have to install the npm dependencies. Go to the administration plugin folder which is located in `PLUGIN/src/Resources/app/administration` and run an `npm install`.

Now you can build the administration.

### How to show a custom media field with a Hotspot

[](#how-to-show-a-custom-media-field-with-a-hotspot)

It is also possible to show the image hotspots on a media type which was generated through a custom field.

First you would need to create of course your custom media type.

> Because the media type in custom fields only supports the compact media uploader, we need to set the hotspot directly within the media library.

Head over to your media library and go to the HotSpot image folder `Media > Hotspot Images`and upload your image.

Open the context menu and click `Set image hotspot`.

[![](https://camo.githubusercontent.com/3cb37871d51d7e811599520a476e37e57e8427f504d9ff0156c197478075f028/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f6474676468376e6f7a2f696d6167652f75706c6f61642f76313631343630303132302f486f7473706f74253230506c7567696e2f42696c6473636869726d666f746f5f323032312d30332d30315f756d5f31342e30312e32325f6378647075342e706e67)](https://camo.githubusercontent.com/3cb37871d51d7e811599520a476e37e57e8427f504d9ff0156c197478075f028/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f6474676468376e6f7a2f696d6167652f75706c6f61642f76313631343630303132302f486f7473706f74253230506c7567696e2f42696c6473636869726d666f746f5f323032312d30332d30315f756d5f31342e30312e32325f6378647075342e706e67)*Hotspot Image folder in media library*

Next a new modal will open where you can add your hotspots. Just left-click on a position somewhere on your image to create a new hotspot.

[![](https://camo.githubusercontent.com/abf5b6c3f11debc26a9940cd405d29306d66fefec44479f49535f5bb5951201c/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f6474676468376e6f7a2f696d6167652f75706c6f61642f76313631343630303332322f486f7473706f74253230506c7567696e2f42696c6473636869726d666f746f5f323032312d30332d30315f756d5f31342e30342e34395f7139786d34752e706e67)](https://camo.githubusercontent.com/abf5b6c3f11debc26a9940cd405d29306d66fefec44479f49535f5bb5951201c/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f6474676468376e6f7a2f696d6167652f75706c6f61642f76313631343630303332322f486f7473706f74253230506c7567696e2f42696c6473636869726d666f746f5f323032312d30332d30315f756d5f31342e30342e34395f7139786d34752e706e67)*To save the hotspot click apply*

After you added all your hotspots click **save** to save your new image hotspot file, which you can choose now for your custom field: for example within your product.

[![](https://camo.githubusercontent.com/188e28ff4acd8bc1b08412549c0dc04678494334ea1d11fbbf72b6c7ec2cc3f9/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f6474676468376e6f7a2f696d6167652f75706c6f61642f76313631343630303533312f486f7473706f74253230506c7567696e2f42696c6473636869726d666f746f5f323032312d30332d30315f756d5f31342e30382e30375f7a6b6b6f75752e706e67)](https://camo.githubusercontent.com/188e28ff4acd8bc1b08412549c0dc04678494334ea1d11fbbf72b6c7ec2cc3f9/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f6474676468376e6f7a2f696d6167652f75706c6f61642f76313631343630303533312f486f7473706f74253230506c7567696e2f42696c6473636869726d666f746f5f323032312d30332d30315f756d5f31342e30382e30375f7a6b6b6f75752e706e67)*Choose your hotspot image within your custom field media type*

##### Storefront integration

[](#storefront-integration)

Finally you need some code to show the custom media field with its image hotspots within the Storefront.

To do so the following code would get the custom media field and show the hotspots

```
{# get the media ID of the custom field #}
{% set hotspotMediaId = page.product.customFields.your_media_custom_field %}

# fetch media as batch - optimized for performance #}
{% set mediaCollection = searchMedia([hotspotMediaId], context.context) %}

{# extract single media object #}
{% set hotspotMedia = mediaCollection.get(hotspotMediaId) %}

{# generate the thumbnail and passing the hotspotEnabled option  #}
{% sw_thumbnails 'hotspot-image' with {
    media: hotspotMedia,
    hotspotEnabled: true
} %}

```

###  Health Score

28

—

LowBetter than 52% of packages

Maintenance19

Infrequent updates — may be unmaintained

Popularity20

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity54

Maturing project, gaining track record

 Bus Factor1

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

Unknown

Total

1

Last Release

1941d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/8253bf879c9d31a84ae4aa2b02d25b21554aba9909d85dfef43835103f58fbeb?d=identicon)[Christopher Dosin](/maintainers/Christopher%20Dosin)

---

Top Contributors

[![ChristopherDosin](https://avatars.githubusercontent.com/u/8193345?v=4)](https://github.com/ChristopherDosin "ChristopherDosin (3 commits)")[![vienthuong](https://avatars.githubusercontent.com/u/22548423?v=4)](https://github.com/vienthuong "vienthuong (1 commits)")

---

Tags

shopwareshopware-pluginshopware6shopware6-plugin

### Embed Badge

![Health badge](/badges/sas-image-hotspot/health.svg)

```
[![Health](https://phpackages.com/badges/sas-image-hotspot/health.svg)](https://phpackages.com/packages/sas-image-hotspot)
```

###  Alternatives

[goat1000/svggraph

Generates SVG graphs

135911.1k3](/packages/goat1000-svggraph)[gravatarphp/gravatar

Gravatar URL builder which is most commonly called as a Gravatar library

16653.6k2](/packages/gravatarphp-gravatar)[rsoury/wp-imgix

Rewrites WordPress image URLs to use ImgIX

167.2k](/packages/rsoury-wp-imgix)

PHPackages © 2026

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