Image Annotation Plugins for WordPress

When thinking about how best to display multiple editions of digitized tunebooks online, and in particular, how to annotate changes between editions of a book, I immediately thought of the image annotation features of web sites like Flickr and Facebook. These sites allow users to apply a note to a particular area of a photo. When a user’s mouse hovers over an annotated area, the note appears near an outline of the highlighted area. Here’s an explanation of how the feature works on Flickr.

A tool like this could be used when comparing pages from a couple of different tunebooks featuring the same song to label and add commentary to, say, differences in harmony parts, altered attributions, or typographical changes. Such a tool would need to be built as a plugin for whatever environment housed the tunebook images. Digital journals use a variety of platforms. Emory’s Southern Spaces uses Drupal, a popular open source content management system. I use WordPress for this web site, and most of my web publishing projects, so I decided to investigate first what image annotation plugins might already exist for the WordPress platform.

It turns out there are four. One has about 1200 downloads and is considered finished by its programmer. The remaining three are in relatively early stages of development and have small user bases (All three had between 200 and 300 downloads as of December 2010).

The Plugins

Knspr-imgnote (see also the plugin’s WordPress page, which is in English, and this Google Translate version of the plugin page) is based on a jQuery plugin called img notes (which makes use of another more general jQuery plugin called imgAreaSelect). The plugin adds an “add note” button to certain views of the image on the WordPress administrative interface. By clicking on this button the user can then add notes to the image which will appear when the post that includes the image is published. Sadly, I cannot get this plugin to work. I cannot find the “add note” button that the documentation for this plugin mentions. Has anybody out there had success with it? Any German speakers able to read the documentation and suggest where specifically to find the “add notes” button?

Demon Image Annotation is an adaptation for WordPress of a different jQuery plugin called Image Annotation (itself an adaptation of a jQuery-based Drupal plugin, which would seem to be the only up-to-date image annotation plugin for Drupal). The plugin allows site visitors (both guests and logged-in users) to leave annotations on designated images. Each annotation also gets recorded as a comment, which depending on moderation settings, will either be posted immediately, or pass through moderation first. In order to enable annotation for a given image, the author of the post containing the image must go over to the HTML view in the WordPress post editing page and add an unique id to the image tag.

Guan Image Notes is a modified version of Demon Image Annotation with a couple of additional features and a different style with rounded edges. Rather than require the user to manually add an id to an image tag to enable annotation, Guan Image Notes does this automatically. The plugin also places a thumbnail of the annotated image in the note where it appears in the comment section and places the commenting user’s gravatar in the annotation itself. Additionally, annotations added to an image in a given post will also show up (though they will not be editable) on other posts and pages where the image appears.

WP Pic Tagger was built from scratch for WordPress. It enables two sorts of tagging. People tagging mimics Facebook’s interface, where the names assigned to the annotated regions appear when you hover over the regions, and are also listed beneath the image. Object tagging resembles the Flickr interface, where the annotation appears only when hovering over the relevant area of the image. A post author can enable either type of annotation for a given image by manually adding a special class to the image in the WordPress edit post page’s HTML view (this means the user must delete all other classes, which may interfere with custom CSS). Once tagging has been enabled, a logged-in user can add annotations when viewing the post (either published or as a draft). Other visitors cannot add annotations.

Analysis and Use

Knspr-imgnotes would seem to be the best-developed of the four plugins, though I would feel more confident in asserting this if I could get it to work myself. Like WP Pic Tagger, it is designed for situations where images are meant to be annotated by post authors, not by the site’s visitors. While WP Pic Tagger follows the lead of the two comment-based implementations in having annotation take place on the actual post page, knspr-imgnote enables annotation on the administrative side.

By contrast, Demon Image Annotation and Guan Image Notes allow annotation by both guests and logged-in users and integrate annotations with WordPress’s comment system. This approach seems particularly targeted at a photo blog audience where public annotation and comment integration would provide a rich means of interacting with viewers. The additional features of Guan Image Notes improve the usability of the plugin for administrators and site visitors, though the rounded edges and other CSS tweaks replace the neutral look of Demon Image Annotation with a more anime-inspired design.

Future Development

Additional development could improve any and all of these plugins. The addition ((Knspr-imgnotes does feature a settings page, but it does not offer any of these options.)) of a settings page could allow users to:

  • Enable or disable image annotation,
  • Turn public annotation on or off,
  • Choose between “people” or “object” style annotation,
  • Specify whether annotations should appear as comments, and even
  • Set certain aspects of the display of annotations (though this could just as well depend on customizing a CSS file as is the case with several of these plugins).

An annotation plugin could allow the user to make these determinations on an image by image basis by adding annotation-related buttons to the WordPress post editor’s image tool. This could either replace a settings page with features like those described above, or provide the user with a means of overriding defaults. Such a plugin would be versatile while the above plugins target specific situations where a blogger may wish to enable image annotation. While the combined audience for these four plugins is only around 2000, the popularity of image annotation features on Flickr and Facebook suggest that a robust image annotation plugin could find a substantially larger user base with applications ranging from photo blogs to digital scholarship.

Are there any other image annotation plugins out there for WordPress that I have missed? Any additional feature suggestions?

4 thoughts on “Image Annotation Plugins for WordPress”

  1. Hey!

    Thanks for the covering.

    Sadly the plugin is kind of broken today and I do not really have the time to fix the bugs… But in the last weeks I had quite a few requests from people wanting to use it, so maybe I’ll see if I can catch some time to make it work again. 🙂

  2. Hi, thanks for looking at my plugin. 🙂

    I LOL at your sentence:

    anime-inspired design

    Actually, it’s just the screenshot but yes I love watching anime even until now. 😀

    By the way, thanks for your suggestion of improving the plugin, the first two is on my list for version 2.0.

    But these:

    Choose between “people” or “object” style annotation,
    Specify whether annotations should appear as comments, and even
    Set certain aspects of the display of annotations (though this could just as well depend on customizing a CSS file as is the case with several of these plugins).

    May I ask what is “people” or “object” style that you mean?

    Best regards,
    Pangeran Wiguan

    1. Thanks for reading and for your response, Pangeran (and of course for your work on Guan Image Notes). The suggestion relating to “people” and “object” style annotations is not specifically for Guan Image Notes, but for WP Pic Tagger, one of the other plugins described in my post.

      • People style annotations are modeled on Facebook, where each note is listed beneath the image as well as appearing when you hover over the selected area of the image.
      • Object style annotations are modeled on Flickr, where the notes appear when you hover over the selected area of the image but nowhere else.

      In a sense the approach you took (and that Demon took) is a third style, more blog-oriented than these other two, where the notes appear in comments as well as when hovering over the selected area. I think for your plugin it makes sense probably to just stick with the comment integration approach.

      Do you think of your plugin as primarily for people with photo blogs? Are there other situations where you think having the annotations appear as comments is useful?

  3. Just wanted to note that the knspr-imgnote plugin seems to work fine for me. Not sure if it has been improved in the meantime or if it’s still a translation issue. The images appear on the bottom of the edit page, click on an image and a note can be added.

    Example screenshot:

    Nice article btw, I already tried the demon and Guan plugins and wasn’t satisfied with either of them.


Leave a Reply

Your email address will not be published. Required fields are marked *