Hotspot editor

[bjarnef]

From time to time we have had the need to create a hotspot on an (SVG) Image, e.g. a map of Denmark and coordinates (X, Y) for each location. It could eventually be more advanced like multiple hotspots or re-using element type like @mattbrailsford did a prototype of in Photon

@greystate also made a great package for an image hotspot and I think it re-use part of the logic what already exists in Image Cropper with a hotspot.
https://marketplace.umbraco.com/package/vokseverk.imagehotspot

[greystate]

You're absolutely right @bjarnef — it's heavily based on the Focus point functionality from the Image Cropper that was current at the time. These days, depending on where you use it (in a Block Element, or a Tab, or a Group, or in a Group on a Tab on a Block Element for that matter) it can be a little finicky, though...

[abjerner]

If this is something that should be added to core, I think it's relevant what kind of information that you should be able to provide for each spot. A name? What about a link? What if you in one case need a link, but not in another?

So maybe if the information for each spot should be flexible, a new hotspot property editor should be based on the block list? This is however not easily doable. At least not as a third party package - I've tried creating a map editor like this, but ended up replace the entire block list view with my own.

But if you just need a hotspot editor, I can see that having to create an element type for the hotspot, then create and configure a block list-style datatype, it get's a bit complex to set up.

For a recent project, I ended up creating my own property editor (not based on the block list) for the hotspot since I did need to make it so that editors could specify a bit of extra information for each spot.

[skttl]

I think the real need here is to make it easier to do custom block list editors. IIRC @mattbrailsford had something working like this with Inner Content (that were the base of Stacked Content and other block list editors from before block list editing was a thing) back in days.

[bjarnef]

Isn't is basically when nested blocks in Block List does? An advanced editor using element types could be done, but for a specific project (and some others we have had) we mainly just need X, Y coordinates from focal point in Image Cropper, but without all the cropping features.
E.g. some locations with a hotspot for each location in an image/vector map, but it could be anything else like the interior of a car, a living room with some products, a single image with multiple products etc.

[abjerner]

@skttl in my mind, yes. We also had Skybrud Elements, which worked in a similar way for Umbraco 8. We ended up building this while waiting for the block list to come to U8.

@bjarnef not necessarily a nested block list, but more a block list with a custom view and custom controller.

Say you have an image picker, but users need to be able to specify a title and description to go along with each image. You could implement this using the block list, and then have an element type called Image item or something like that. It does the job, but it's not really that user friendly. Eg. if the user want to add ten images, they have to pick each image one at a time, which is a bit cumbersome. In our old image picker package, users could pick multiple images at once, an then add the title and description for each later. That gives users a better workflow.

Another example is the map editor I mentioned earlier. For a property editor I've recently build, users can click on a map, which then opens an overlay for the map item to be edited - but since the user already has picked the position, this isn't shown in the overlay. This means that the user can see all the items on the map at once (and drag them around). If this was implemented using the block list, users would have to open each item to see or change the position.

If you're looking for an image hotspot editor allowing multiple spots for the same image, this could be implemented in a similar way to my map editor. If you're instead just looking for a single image with a single hotspot, and not additional information, things are of course a lot simpler.

So to answer @skttl again, yes, I would love for an easier way to building custom block lists. I got as far as replacing the overall view of the block list, but many of the JavaScript/Angular functions are private, so I can't for instance add a new block item from my custom view/controller because the function used by the default block list is an internal function not outside of the default block list controller.

[abjerner]

For reference, here's a GIF of a hotspot / imagemap property editor I've build recently. I would have preferred building this on top of the block list instead of having to build it on my own.

Right now the additional properties are also hardcoded, so not super re-usable in other contexts that don't need the same properties.

[bjarnef]

@abjerner yes, it makes sense. And often we have a similar issue with Multi URL Picker, e.g. to add a set of links and control link text. One can use title property, but then there isn't a option to control tooltip title, which is sometimes needed. And if one need to set icon, e.g. social icon. So sometimes we use Block List for this, but it requires adding a single item at the time.

The multiple markers would be great or to see the marker in context we other, but often I think a single marker/hotspot will do the job, e.g. when one has a node or element per location for instance.

And since the focal point already exists in core, I think it wouldn't require much work to wrap this in another property editor for simple use-case. Not meaning the list with custom view And controller and use of element types isn't a great idea, but I think it may require a RFC if Umbraco wants to include it in core? @lassefredslund

But I think there are a lot of other high priority task at the moment like Umbraco 13 and 14, new backoffice, the UI library, delivery APIs, resuable blocks, headless etc. so I don't think it would get highest priority 🙂

[bjarnef]

@abjerner as a start I think just the coordinate, which already exists in the focal point in Image Cropper.

<umb-image-gravity 
    src="imageSrc"
    center="model.value.focalPoint"
    on-value-changed="focalPointChanged(left, top)"
    on-image-loaded="imageLoaded(isCroppable, hasDimensions)"
    disable-focal-point="readonly">
</umb-image-gravity>

we can just re-use this an wrap in a separate property editor without the crop and e.g. a prevalue property to select source image similar to source folder of uploads in Richtext property editor.

A more advanced property editor may require a RFC, but the idea of Photon is that it used element type (or document type at that time) and thus possible to customize with additional properties.

Basically it is much similar to blocks.

But it think the Photon package was cool and I think @mattbrailsford had a POC using it as a route planner.

[abjerner]

Are there any examples for this property editor without having to install the package? I can't see anything in the repo.

Wouldn't it be best to pick an image and add the hotspot(s) in the same property editor? I'd say setting the image from the data type fits a very specific use case.

[bjarnef]

IIRC one had to select an area/hotspot on an image.. clicking this opened an overlay using the element type (document type at that time) with the properties, e.g. Title, Image, Description.

[bjarnef]

I made some initial work on this in #15254 re-using the <umb-image-gravity> component, which Image Cropper use.
However it seems it currently isn't possible to clear focal point - only change position and disable it, but it this use-case it would be great to start with no hotspot (or eventually configurable) and clear/remove focal point.

[bjarnef]

Alternatively it could also be a configuration of Image Cropper allowing it use hotspot on its own and without crops (the current backoffice store the data for focal point, but I am not sure it is is returned by PVC). But then the "Image Cropper" name doesn't really make much sense.

The new backoffice could potentially allow "Image Cropper" extending the "Image with focal point" aka "Hotspot editor" and Image Cropper basically just added the additional cropping features.

or a more complex editor allowing adding multiple focal points / hotspots eventually connected to an element type to add additonal data.

[markadrake]

Interesting! I couldn't land the last piece of my hotspot editor. I have the media picker and the click and drag events setup for generating hotspots. The last piece was using the OOTB block list property editor with a custom config. The configuration works great (only set to one element type right now) but the data isn't stored.

It's not as simple as:

    <umb-block-list-property-editor model="blockEditorModel"></umb-block-list-property-editor>

2024-03-29.13-48-03.mp4