Add Marker to Image

Hi there.

I am looking for advice on how to add a marker to an image.

Users can select anywhere on the body and click, this will prompt them for a description.

How could this be achieved in bubble?

A few ways, one way I can think of off hand is putting the image in a “Align to Parent” group, with another group ON TOP of it. Inside that group make it fixed. Add your markers there, and on hover do something. The only problem with this method is that the parent group will need to be fixed. You won’t be able to have it resizable unless you make the hover-points for each size.

That’s a quick hacky way of doing it, the other way would be setting points on the x/y axis in Javascript and setting event listeners. Maybe I could develop something like this.

1 Like

I was experimenting tagging some images and closest I could find is adding a repeating group in front of the picture and giving some kind of a grid based system to the user to play with. I just highlight the selected area, but you can do more stuff with it. See the demo below:
chrome_lpfiD68seN

It is not very hard, since the grid is simply 10x10 repeating group.

In order to create an empty 10x10, I had to use a list with this plugin:


image

I have tested it with custom state as well. There is a big speed difference:
chrome_2p3zfEfNQi

You can see the example editor here: Tests for Forum 11 | Bubble Editor

4 Likes

Very clever mate! Like that idea more than mine :slight_smile:

1 Like

Haha heck! That is really impressive. I will have a play and get back to you with my progress! :slight_smile:

Have a look at this solution as well: editor | live

2 Likes

That’s clever :+1:t2: