Skip to content

Adds interactive annotations to images

License

Notifications You must be signed in to change notification settings

buzzfeed/annotator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

annotator

Got an image you want to point details out on? annotator creates embeddable HTML to help users dive in to details on a document. Here's an example.

It consists of a builder and an engine. The builder creates embeds, the engine renders embeds on to the page.

Screenshot

get started in 30 seconds

I wish to annotate an image and generate an embed

The builder is located at ./builder/index.html.

Please note: You will need to host dist/annotator.min.js yourself before putting an embed live. Read on for how to do that...

I wish to get the annotator engine working for our organisation

Get the latest version of yarn (0.21+): https://yarnpkg.com/en/

Then just run yarn in the repository folder.

This will grab the packages it needs, then use grunt to build the distributable engine. Once that's done, it'll watch for changes in engine/, rebuilding when it sees them.

The two main files to modify are engine/js/annotator.js and engine/sass/annotator.scss. It will build to the single file dist/annotator.min.js, which you can then upload to your own infrastructure.

We would recommend at minimum changing the following to your requirements:

  • builder/builder-config.js to point to your distributable
  • engine/sass/annotator.sass to meet your own styling requirements
  • engine/js/plugins/ to match your environment - analytics, image hosting, etc
  • We use the <!-- UKNF --> tag to mark our embeds as special in the BuzzFeed CMS. You probably won't need this tag, so feel free to remove it.

Be aware: annotator will add the following to the global scope of your page.

  • Styling which is applied to page objects with a parent class of .annotated_media
  • window.annotate_media and window.annotate_tools are new JS globals which may be called

annotator is powered primarily by a cut-down version of jQuery.

About

Adds interactive annotations to images

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published