Image Annotation Plugin

8th Jul 2010, Thursday (4 years ago)

Have you ever wanted to annotate your images like you can on Flickr and Facebook? It was fun but when I look for wordpress plugin to integrate similar functionality to the superwhite site and none was available. So I found JQuery Image Annotation from Chris with PHP support from GitHub. In a week, I had written my first plugin for WordPress called demon-image-annotation, the concept of annotating images with user comments. In recent posts you might notice there is a new button name “Add Note” on each images when you rollover, that would allows you to add textual annotations to images by select a region of the image and then attach a textual description. Here try it for yourself.

Updated on 26-09-2012
=== demon image annotation ===
Contributors: demonisblack
Tags: comment, comments, image, images, note, annotation
Requires at least: 2.5
Tested up to: 3.4
Stable tag: 2.5.4

Allows you to add textual annotations to images by select a region of the image and then attach a textual description.

== Description ==

This plugin allows you to add textual annotations to images by select a region of the image and then attach a textual description, the concept of annotating images with user comments.
Integration with JQuery Image Annotation from Chris (http://www.flipbit.co.uk/jquery-image-annotation.html) with PHP support from GitHub (http://github.com/stas/jquery-image-annotate-php-fork).

Some features:
* Admin page
* Option to approve, edit amd remove image notes in admin page.
* Auto insert unique id attribute for all the images for image note.
* Show notes on other pages such as home and archive.
* Gravatar in the notes
* Option to sync with wordpress comments.
* Option to show thumbnail in comment list.
* Option to include post id in every auto insert images id.
* ‘Mouseover to load notes’ on top of every image note (editable).
* ‘Link’ on top of every image note if hyperlink image (editable).

== Installation ==

1. Put the plugin folder into [wordpress_dir]/wp-content/plugins/
2. Go into the WordPress admin interface and activate the plugin
3. Choose the settings you want in demon-image-annotation settings.
4. Complete usage instructions are available here. (http://www.superwhite.cc/demon/image-annotation-plugin)

Usage:
The plugin version 2.0 onward will auto insert id for every images, unless you want to do it manually.

Here is the guide on how to insert image ID attribute manually.
– To embed annotations and comments on images, you must insert id attribute start with ‘img-‘ follow by unique id (ex img-7654321).
– Make sure all the images have unique and different id else you will get the same comments.
– All the images from my blog is from flickr, so I grab the last parameters from flickr link as id which is uniqe. http://www.flickr.com/photos/30601564@N04/4774005463/

Add note to image: (Insert id attribute “img-4774005463″)
<img id="img-4774005463" src="http://farm5.static.flickr.com/4121/4774005463_3837b6de44_o.jpg" width="900" height="599" alt="Image Annotation Plugin" />

Disable add note button to public: (Insert addable attribute equal to “false” to show add note button to admin only)
<img id="img-4774005463" addable="false" src="http://farm5.static.flickr.com/4121/4774005463_3837b6de44_o.jpg" width="900" height="599" alt="Image Annotation Plugin" />

Exclude image note: (Insert id attribute “img-exclude”)
<img id="img-exclude" src="http://farm5.static.flickr.com/4121/4774005463_3837b6de44_o.jpg" width="900" height="599" alt="Image Annotation Plugin" />

Comments thumbnail:
The plugin version 2.0 onward provide settings to enable thumbnail in comment area.

To add thumbnails to your comments list manually, just add the php code below in your comment callback function.
<?php getImgID(); ?>

== Changelog ==
= 2.5.4 =
* Thumbnail resize fixed.
* Thumbnail preloader.

= 2.5.2 =
* Fixed addable for admin only.

= 2.5 =
* Fixed image annotation script.
* Fixed php JSON data.
* Fixed not workin in ie.
* New admin table list.

= 2.4.8 =
* Fixed MD5 not working.

= 2.4.7 =
* Fixed bugs.

= 2.4.6 =
* Fixed jquery conflict.

= 2.4.5 =
* Fixed missing add button.

= 2.4.4 =
* Added approve and unapprove button for selected image notes.
* Fixed table prefix issue

= 2.4.3 =
* Fixed on table name issue.
* Fixed pop up error while saving.
* Fixed image notes not loading (when comment or image note is not approve yet).
* Show error occured message when loading image notes timeout.
* Add option to remove HTML image tags.

= 2.4.1 =
* Fixed on Image Notes Tab not display in Safari browser.

= 2.4 =
* Fixed on Chrome and IE browsers.

= 2.3 =
* Fixed return and new line issue that cause image note stop loading.

= 2.2 =
* New image note as waiting approval even it is not sync with wordpress comment.
* Fixed image note not loading with special characters.
* Image note settings now is display for admin only.
* Customize default avatar for image note author gravatar.

= 2.1 =
* Rounded border.
* Add list of image notes in admin page.
* Add option to approve, edit and delete image notes.
* Add option to change mouseover description and image hyperlink name.
* Add option to lnclude post id in every auto insert images id.
* Fix issue of database prefix is not wp_.
* move author to top.

= 2.0 =
* Admin page
* Auto insert id attribute start with “img-“.
* Add notes to your uploaded pictures and embed pictures.
* Add author gravatar on notes.
* Add option to show image notes not only in single page but other pages such as home and archives.
* Add option which enable user to disable or enable noted image for admin only or every user.
* Add option which enable user to disable or enable WordPress commenting system.
* Add option which enable user to disable or enable noted image thumbnail at comment list.
* Add description on top of every image note ‘Mouseover to load notes’.
* Add link on top of every image note if hyperlink image.

= 1.2 =
* Delete comments
* Comment thumbnail hover

= 1.1 =
* Fix note overlap
* Image note user addable

== Download==
http://wordpress.org/extend/plugins/demon-image-annotation/

== Admin screencap==

Image Annotation Plugin

demon image annotation settings screencap

Image Annotation Plugin

image notes listing screencap

== Live Demo==
Image Annotation Plugin

Tsukasa Hiiragi

Where Tsukasa carry the iPhone to?

46
101
131
158
187
The thoughts of others
  • zero said,
    27th Mar 2013, 10:33 am
    (2 years ago)
     

    Can’t seem to get it work, WordPress 3.5.1 not supported?

    • zero said,
      27th Mar 2013, 10:52 am
      (2 years ago)
       

      Nevermind, it seems to be theme related issues

  • Darling said,
    1st Apr 2013, 9:42 pm
    (2 years ago)
     

    Hey, plugin works quite well for me, but how do I get it to behave like dannychoo’s version?
    Like when you hover over the image, where it’s written “Mouseover photo to load notes or add comment” gets replaced by Add note or comment, how to I get this to work like that?

    Also the one that I have adds numbers and these two | | infront and at the end of my description messages on top of the image ( 01 | Mouseover image to load notes or add comment | ), I don’t want the numbers and the slashes there, how do I get rid of those too please?

    Aside from that, plugin works perfectly for me.

    I hope I get a reply quickly.

    Thank you.

    • Desmond said,
      2nd Apr 2013, 8:39 am
      (2 years ago)
       

      Obviously, Dannychoo’s version has been redesigned by himself and it also has more complex functions…
      You have to at least know a little bit of HTML and CSS to revise this plugin, and you can then get rid of those numbers and slashes you don’t want with no problem.

      • Darling said,
        4th Apr 2013, 11:02 am
        (2 years ago)
         

        I’ve done my fair share of messing around with the plugin and I like how it’s going so far, and I obviously wouldn’t ask about the slashes and numbers if I had not used up the little knowledge in HTML and CSS that I have. That is the reason why I asked and I thought people could ask for help here and get some help but I guess not. I will go learn some more HTML and CSS then, thanks Desmond. :)

  • Aister said,
    13th Jun 2013, 2:30 pm
    (1 year ago)
     

    I have everything set up, the plug in is working fine except one thing, after I refresh the comments won’t show up on the image, it showed up on the comments (with image thumbnails if set) but not the image. Anything help on here?

    I’m using WP 3.5.1

  • Raz said,
    18th Jul 2013, 6:05 pm
    (1 year ago)
     

    Any idea on how to make this plugin “for logged-in users only”?

    Those anonymous trolls always trying to fill my pics with ****** annotation-notes.

  • Louise said,
    1st Dec 2013, 10:41 pm
    (12 months ago)
     

    How can I disable the field for the name and email adress of the note window

  • hosin said,
    4th Jan 2014, 8:24 pm
    (11 months ago)
     

    My image is align center, when i hover the image, why the image will float to left?

  • Adam said,
    18th Jun 2014, 5:54 am
    (5 months ago)
     

    Anybody get this to work recently? I don’t get any errors of anything but all the functions don’t seem to appear properly. Maybe I am doing the wrap wrong. I using the newest vesrion of WP and simply copy and pasting the wrap at the beginning of my posts… is that right?

1 TRACKBACKS

Your thought





icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif