Download the PHP package darinlarimore/statamic-imagehotspots without Composer
On this page you can find all versions of the php package darinlarimore/statamic-imagehotspots. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Informations about the package statamic-imagehotspots
Statamic Imagehotspots
Statamic Imagehotspots 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
- Assign fields for hotspot content
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:
How to Use
Setup Fields
Add an Image Hot Spots
field and configure the required asset Container
setting
Usage
- Add an image to the
Assets
field. - Click the
Add Hotspot
button. - Click and drag the hotspot to the desired position.
- Add content to the hotspot.
Note: Red border area prevents breaking the page bounds at certain sizes. This is is configurable in the fieldset.
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.
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.
GraphQL Support
This addon supports GraphQL. You can access the hotspots data in your GraphQL queries like so:
v2.0.0
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:
- @Jade-GG - Added support support for arbitrary fieldtypes in the hotspot content.
- @emran-alhaddad - Added GraphQL support.