Just wondering if anyone out there's looked at creating a custom Umbraco property editor to annotate images using Annotorious before (http://annotorious.github.io/)
I'm looking at having a try at doing exactly that, but I'm very interested in seeing if any of you guys and gals out there in the community have tried this before and if you were successful.
Creating a custom Umbraco property editor to annotate images using Annotorious sounds like a cool project! I haven't personally worked with Annotorious in Umbraco, but here are some general steps that you can follow:
Create a new custom property editor in Umbraco
You can create a new property editor by creating a new AngularJS directive in your Umbraco project. This directive will define the behavior of your property editor.
Add Annotorious to your property editor
You can add Annotorious to your property editor by including its CSS and JavaScript files in your directive's template. You can also initialize Annotorious in the directive's controller.
Hook up Annotorious to the image
In your directive, you will need to find the image element and add the necessary data attributes for Annotorious to work properly. You can do this by using the $element service in AngularJS.
Save the annotations
When the user saves the annotations, you can save them as JSON data in your Umbraco property.
Image annotation with Annotorious
Hi all,
Just wondering if anyone out there's looked at creating a custom Umbraco property editor to annotate images using Annotorious before (http://annotorious.github.io/)
I'm looking at having a try at doing exactly that, but I'm very interested in seeing if any of you guys and gals out there in the community have tried this before and if you were successful.
cheers, Geoff
Hello Geoff,
Creating a custom Umbraco property editor to annotate images using Annotorious sounds like a cool project! I haven't personally worked with Annotorious in Umbraco, but here are some general steps that you can follow:
Create a new custom property editor in Umbraco You can create a new property editor by creating a new AngularJS directive in your Umbraco project. This directive will define the behavior of your property editor.
Add Annotorious to your property editor You can add Annotorious to your property editor by including its CSS and JavaScript files in your directive's template. You can also initialize Annotorious in the directive's controller.
Hook up Annotorious to the image In your directive, you will need to find the image element and add the necessary data attributes for Annotorious to work properly. You can do this by using the $element service in AngularJS.
Save the annotations When the user saves the annotations, you can save them as JSON data in your Umbraco property.
is working on a reply...