https://github.com/vokseverk/vokseverk.imagehotspot
A property editor for Umbraco to place a hotspot on an image (e.g. a place on a map).
https://github.com/vokseverk/vokseverk.imagehotspot
hotspot property-editor umbraco
Last synced: 20 days ago
JSON representation
A property editor for Umbraco to place a hotspot on an image (e.g. a place on a map).
- Host: GitHub
- URL: https://github.com/vokseverk/vokseverk.imagehotspot
- Owner: vokseverk
- Created: 2016-04-22T23:27:17.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2024-04-17T22:40:40.000Z (about 1 year ago)
- Last Synced: 2025-03-05T08:43:34.584Z (about 2 months ago)
- Topics: hotspot, property-editor, umbraco
- Language: JavaScript
- Homepage: https://our.umbraco.com/packages/backoffice-extensions/image-hotspot/
- Size: 1.03 MB
- Stars: 12
- Watchers: 5
- Forks: 5
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Image Hotspot for Umbraco
This property editor provides similar functionality to what was previously available with the [uComponents ImagePoint](http://ucomponents.github.io/data-types/image-point/) data type in Umbraco, versions 4 and 6.
(This one's just called “Image Hotspot” because that's what our clients call it when they ask for this kind of thing 😁)
It's a property editor that displays an image and lets the editor place a hotspot on it.
## Screenshots
### Property editor:
*Property editor with insets showing the alternate colors*
***
The configuration looks like this:
### Configuration:
*DataType Configuration*
The property editor looks for the **Image** by looking up the alias recursively,
so it's possible to use it on a doctype that's used by **Nested Content** or **Block List**.
***
### Property Data
The raw JSON data looks like this:
```json
{
"image": "/media/1492/what-a-nice-picture.jpg",
"left": 223,
"top": 307,
"percentX": 55.75,
"percentY": 74.878048780487804878,
"width": 400,
"height": 410
}
```
The hotspot coordinate is saved both as exact pixel values and as percentage
values, along with the image's path, width & height.
The included **PropertyConverter** enables ModelsBuilder to do its magic and provide you with
an `ImageHotspot` object instead of the JSON data:
```csharp
public class ImageHotspot {
public string Image { get; set; }
public int Left { get; set; }
public int Top { get; set; }
public decimal PercentX { get; set; }
public decimal PercentY { get; set; }
public int Width { get; set; }
public int Height { get; set; }
}
```
The `.ToString()` method has been crafted to be used inside a style attribute, to give you the
hotspot's position in one go - something like `left: 10.3%; top: 24.3333%`, e.g.:
```razor
var marker = Model.Hotspot;
)
```