{"id":26988434,"url":"https://github.com/vokseverk/vokseverk.imagehotspot","last_synced_at":"2025-04-03T20:19:52.224Z","repository":{"id":44660114,"uuid":"56890668","full_name":"vokseverk/Vokseverk.ImageHotspot","owner":"vokseverk","description":"A property editor for Umbraco to place a hotspot on an image (e.g. a place on a map).","archived":false,"fork":false,"pushed_at":"2024-04-17T22:40:40.000Z","size":1076,"stargazers_count":12,"open_issues_count":4,"forks_count":5,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-05T08:43:34.584Z","etag":null,"topics":["hotspot","property-editor","umbraco"],"latest_commit_sha":null,"homepage":"https://our.umbraco.com/packages/backoffice-extensions/image-hotspot/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vokseverk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-22T23:27:17.000Z","updated_at":"2024-05-30T03:03:22.000Z","dependencies_parsed_at":"2023-02-08T14:31:48.230Z","dependency_job_id":null,"html_url":"https://github.com/vokseverk/Vokseverk.ImageHotspot","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vokseverk%2FVokseverk.ImageHotspot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vokseverk%2FVokseverk.ImageHotspot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vokseverk%2FVokseverk.ImageHotspot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vokseverk%2FVokseverk.ImageHotspot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vokseverk","download_url":"https://codeload.github.com/vokseverk/Vokseverk.ImageHotspot/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247070920,"owners_count":20878586,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hotspot","property-editor","umbraco"],"created_at":"2025-04-03T20:19:51.730Z","updated_at":"2025-04-03T20:19:52.196Z","avatar_url":"https://github.com/vokseverk.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Image Hotspot for Umbraco\n\n\u003cimg align=\"right\" src=\"images/vv-imagehotspot-icon.png\" width=\"180\" height=\"180\" alt=\"A rectangle with a circular hotspot inside a square with the Vokseværk ‘fire-heart’ logo\"\u003e\n\nThis 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.\n\n(This one's just called “Image Hotspot” because that's what our clients call it when they ask for this kind of thing 😁)\n\nIt's a property editor that displays an image and lets the editor place a hotspot on it.\n\n## Screenshots\n\n### Property editor:\n\n![Imagehotspot Editor](images/imagehotspot-editor.jpg \"Property editor with insets of the alternate color themes\")\n\n*Property editor with insets showing the alternate colors*\n\n***\n\nThe configuration looks like this:\n\n### Configuration:\n\n![Imagehotspot Config](images/imagehotspot-config.jpg \"DataType Configuration\")\n\n*DataType Configuration*\n\nThe property editor looks for the **Image** by looking up the alias recursively,\nso it's possible to use it on a doctype that's used by **Nested Content** or **Block List**.\n\n***\n\n### Property Data\n\nThe raw JSON data looks like this:\n\n```json\n{\n\t\"image\": \"/media/1492/what-a-nice-picture.jpg\",\n\t\"left\": 223,\n\t\"top\": 307,\n\t\"percentX\": 55.75,\n\t\"percentY\": 74.878048780487804878,\n\t\"width\": 400,\n\t\"height\": 410\n}\n```\n\nThe hotspot coordinate is saved both as exact pixel values and as percentage\nvalues, along with the image's path, width \u0026 height.\n\nThe included **PropertyConverter** enables ModelsBuilder to do its magic and provide you with\nan `ImageHotspot` object instead of the JSON data:\n\n```csharp\npublic class ImageHotspot {\n\tpublic string Image { get; set; }\n\tpublic int Left { get; set; }\n\tpublic int Top { get; set; }\n\tpublic decimal PercentX { get; set; }\n\tpublic decimal PercentY { get; set; }\n\tpublic int Width { get; set; }\n\tpublic int Height { get; set; }\n}\n```\n\nThe `.ToString()` method has been crafted to be used inside a style attribute, to give you the\nhotspot's position in one go - something like `left: 10.3%; top: 24.3333%`, e.g.:\n\n```razor\nvar marker = Model.Hotspot;\n\n\u003cdiv style=\"position:relative; display:inline-flex;\"\u003e\n\t\u003cimg src=\"@(marker.Image)\" width=\"@(marker.Width)\" height=\"@(marker.Height)\"\u003e\n\t\u003cspan\n\t\tstyle=\"\n\t\t\tposition:absolute;\n\t\t\tbackground:#f80c;\n\t\t\ttransform:translate(-50%,-50%);\n\t\t\tborder-radius:5px;\n\t\t\twidth:10px;\n\t\t\theight:10px;\n\t\t\t@(marker)\n\t\t\"\u003e\u003c/span\u003e\n\u003c/div\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvokseverk%2Fvokseverk.imagehotspot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvokseverk%2Fvokseverk.imagehotspot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvokseverk%2Fvokseverk.imagehotspot/lists"}