Skip to content

born05/craft-imagehotspots

Repository files navigation

Image Hotspots

Image Hotspots fieldtype for adding multiple hotspots to images from an asset element, matrix field, neo field or super-table field in Craft CMS.

Setup & usage

  1. Create an asset field for use with images.
  2. Create a "Image Hotspot" field, pointing to the asset field's handle. When used inside a super-table or matrix, multiple hotspots can be placed on one image.
  3. Make sure the hotspot field is on the same or a higher level inside an entry. No asset field is needed when using the hotspot field directly on an asset element. The hotspot field goes down the entry's element tree untill it finds the asset field matching the handle.
  4. Fill the asset field on the entry and save.
  5. Pick the hotspots on the asset using the "Hotspot" button.

Requirements

  • Craft 5

Installation

Install from the Plugin Store or composer:

composer require born05/craft-imagehotspots
./craft install/plugin imagehotspots

Screens

Field settings screen

Field settings screen

Field in use inside a super-table

Field in use inside a super-table

Hotspot picker in use

Hotspot picker in use

GraphQl support

Use the field in graphql:

hotspot {
    x
    y
}

License

Copyright © Born05

See license