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 by Philipp Waldhauer
• Demon Image Annotation by Demon
• Guan Image Notes by Pangeran Wiguan
• WP Pic Tagger by Andrew dela Serna

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?