quantum-dragons / image-map-field
Installs: 494
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 0
Language:Vue
Requires
- php: >=5.6.0
- silverstripe/admin: ^1.1@dev
- silverstripe/cms: ^4@dev
- silverstripe/framework: ^4@dev
This package is auto-updated.
Last update: 2024-03-29 03:57:49 UTC
README
Introduction
This component is for drawing image map areas/region/hotspot overlays on top
of an image. This is to replicate HTML image map <map>
and <area>
so we
use the same terms for this module.
Getting Started
Add build artifacts (*.js and *.scss) to project's public folder by running the following command in the project's root folder.
$> composer vendor-expose
Add image map field to a page and associate it with an image field.
<?php use ImageMapField\Forms\ImageMapField; use ImageMapField\Traits\ProcessMapData; class TestPage { use ProcessMapData; private static $db = [ 'ProcessMapData' => 'Text', ]; private static $has_one = [ 'ProcessMapImage' => Image::class, ]; public function getCMSFields() { $fields = parent::getCMSFields(); $fields->addFieldToTab( 'Root.Main', ImageMapField::create('ProcessMapData', 'ProcessMapData') ->setImage($this->ProcessMapImage()), ); } ... }
... $ImageMapView ...
Dependency
- Npm / yarn
- Vue.js
Front-end tooling
To build in dev mode, run the following command in module root:
$> npm run dev
To build in prod mode, run the following command in module root:
$> npm run prod
For more details look into package.json
file.