Add a pin by clicking anywhere on the image. It acts as a trigger for adding a structure entry, and therefore opens a modal.
Pins can be dragged once added (Important : if a new pin has just been added, you’ll need to save the page in order to be able to drag the pin).
Pins are deleted when its associated structure entry is.
Pins index is updated when structure entries are sorted.
Pins background color can easily be changed
Basic usage :
imagefieldname:
label: The image that the annotator field will use
type: image
fieldname:
label: Field label
type: imageannotator
src: imagefieldname
fields:
markerid:
type: hidden
x:
type: hidden
y:
type: hidden
customfield:
label: Note
type: text
I initially did it for a client project in order to locate archive photos on street views. I just took a few time to clean it a little, but I haven’t tested every default structure options yet, so any help or feedback from your eventual uses of it are very welcome
This!!! I needed something like this like a year ago for two sites. How i wish time travel was possible. I ended up using the stand alone version of this but it was a lot of manual work to get it into Kirby.
I hope you intend to keep it updated to work with Kirby 3 when ever it will be released? This a kind of plugin that, at least I could think of purchase for a license, 10 EUR or so. But I don’t mind the MIT license.
Yes I’m currently diving into Vue for some other projects, hopefully by the time it launches I’ll be able to keep the few fields I have updated a quickly as possible
What I’d really to see as an extension: Using this field in the images view, so the information can be added in file meta data, similar to what @flokosiol did with his crop position plugin…
It very much depends on the use case, for mine it was much more interesting to have it in a page as the whole page content revolved around it and I used it to link to subpages.
But you’re definitely right it would be a great option to add ! Added it on my to-do list
Yep, I agree it depends on the use case, but for myself, can think of more settings were I would like to add the data to the image rather than the page.
@sylvainjule I haven’t yet tried the plugin, but how does it work out with a lot of pins? My use case is that i build a lot of sites for a particular industry which involves using a geographical map and plotting about 30 locations on it. For my use case, i would like to put a logo or a photo inside the info for a pin, as well as text and a button. Is that possible?
You should see it as a structure field, only the Add button has been replaced by a click somewhere on the image. So you should be able to put anything you could have put within a structure field as field options, photo, text, etc.
No problem to deal with many entries, aside from the messy display you’ll likely end up with on smaller screens.
I could add a config option to choose the display size of the pin, but for now you could tweak this directly in the CSS.
@texnixe I have put something together on the branch called filesfield. I keep it there while I do some more testing but you can give it a shot already. To keep it short, if you now use it as a file field, and don’t add any src option, it should work fine !
I managed to implement it on the file page itself and I can save markers just fine. I would like to create a custom image tag (overwrite the default kirbytext tag) so all images that have saved markers will output the image tag and all saved markers within the .
I kinda managed to create a custom tag, but due to my limited PHP knowledge I’m not really sure how I would retrieve that data for the markers here and print them one after one in the $html.