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 1w ago

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

29

—

LowBetter than 57% of packages

Maintenance19

Infrequent updates — may be unmaintained

Popularity20

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity55

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

1986d 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

135931.0k3](/packages/goat1000-svggraph)[stefangabos/zebra_image

A single-file, lightweight PHP library designed for efficient image manipulation featuring methods for modifying images and applying filters

138121.6k7](/packages/stefangabos-zebra-image)[treinetic/imageartist

ImageArtist is a php gd Wrapper which makes Image manipulation insanely easy, we introduce ImageArtist as Photoshop for php

8783.2k](/packages/treinetic-imageartist)[johncarter/filament-focal-point-picker

An image focal point picker for Filament Admin.

4431.7k1](/packages/johncarter-filament-focal-point-picker)[yk/laravel-ocr

A wrapper for gocr.

1356.6k](/packages/yk-laravel-ocr)

PHPackages © 2026

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