Image Annotation Plugin

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.

demon Image Annotation plugin for WordPress

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).

 

Need Your Support

It is hard to continue development and support for this free plugin without contributions from users like you. If you enjoy using demon Image Annotation and find it useful, please consider making a donation. Your donation will help encourage and support the plugin’s continued development and better user support.


 

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).

 
Download Plugin

Version 3.7 | Requires at least: 2.5 | Tested up to: 4.7.5

 

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.

 

How To Use

Step 1:

First enter div wrapper id or class in settings where your post content appear, or else the plugin can’t find the wrapper to start.

Example (.entrybody)

<div class="entrybody>
<?php the_content(); ?>
</div>

 

Step 2:

To embed annotations and comments on images, your img tag must have id attribute value start with ‘img-‘, this plugin already did the trick if you enable Auto Generate Image ID option.

 

Step 3:

If you wish to add an id attribute maunally, here is the guide on how to insert id attribute to img tag.

– First disable Auto Generate Image ID option
– Add an id attribute start with ‘img-‘ follow by unique id to img tag.
– All the images must have unique and different id or else you will get the same comments.

Example (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" />

 

Step 4:

Decide the option for WordPress Comments setting.

Sync with wordpress comments:
– image note sync with wordpress comment database
– modified comment will auto update both database
– deleted comment from wordpress comment will not sync, have to delete manually in image notes table list.
– new image note from annoymous will auto add into wordpress comment as waiting approval.
– the image note only publish when the comment is approve.

Not sync with wordpress comments:
– standalone image note database.
– new image note will publish without approval.

Pls note if you switch the option, the comments added with previous option will not load.

 

Usage

Disable Add Note button:
Add an addable attribute with value “false” to disable the add note button, but image notes still viewable.
Login User who can Moderate Comments still able to see Add button option.

<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:
Add an exclude attribute to disable image annotation function.

<img exclude id="img-4774005463" src="http://farm5.static.flickr.com/4121/4774005463_3837b6de44_o.jpg" width="900" height="599" alt="Image Annotation Plugin" />

 
Comments thumbnail:
To add thumbnails to your comments list manually, just add the php code below in your comment callback function.

<?php if (function_exists('dia_thumbnail')) {
dia_thumbnail($comment->comment_ID);
}?>

 

Live Demo:

Image Annotation Plugin

Tsukasa Hiiragi
Where Tsukasa carry the iPhone to?

 

Admin Screenshots:

Image Annotation Plugin
demon image annotation settings screencap
Image Annotation Plugin
demon image annotation table listing screencap
Image Annotation Plugin
demon image annotation editing screencap

 

Change log

= 3.7 =
* Added admin plugin tab
* Updated CSS buttons
* Fixed auto update WordPress Comments database issue
* Fixed dashboard menu count issue

= 3.6 =
* Fixed image description

= 3.5 =
* Fixed image numbering issue

= 3.4 =
* Fixed post ID issue

= 3.3 =
* Fixed auto update WordPress Comments database issue
* Fixed notes overlap issue
* Fixed notes not resize according to image size
* Added image notes count number to admin bar and menu

= 3.2 =
* Modifiend database column
* Fixed backslash in image note
* Remove auto generate ID and post ID in jQuery
* Replace auto generate ID and post ID with filter function
* Option to disable numbering
* Option to auto resize image annotation to fit content max width
* Image annotation able to show on home page

= 3.1 =
* Fixed Annotation jQuery.

= 3.0 =
* Fixed HTTPS issue
* Fixed wordpress comment synced with image note data.
* Update database column.
* Update admin image notes table list.
* Update jQuery version to 2.1.1
* Update jQuery UI version to 1.11.2
* Add Image preview in admin image notes table list.
* Add edit image button in wordpress comment table list.
* Add submenu to admin page
* Add comments maxlength setting
* Able to manage settings base on roles and capabilities
* Able to approve, edit and remove image notes base on roles and capabilities
* Able to add new line for image notes
* Able to restore comment from Trash in admin image notes table list.

= 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

You may also like
46
101
131
158
187
215
216 white comments    
  • Frederick said,
    March 16, 2012 | 10:31 pm
    (6 years ago)
     

    I’m running WP3.3 and just installed the latest version. I’ve properly set the “content wrapper” id, however the plugin is still not displaying the “Add tag” link.

    When I view source, I see that the “image id attribute” is NOT being added to the image tag.

    Do you still support this plugin? Has anyone else seen this? I’ve tried turning on/off all of the settings to see if one of those is breaking it, but nothing seems to get this to work.

  • Steve said,
    March 25, 2012 | 4:53 pm
    (6 years ago)
     

    Same experience as Frederick. Version 3.3 of WP, correctly set DIV tag, image id attribute not being added. No Add Note feature displaying no matter what options are set. Would be great if you could indicate whether you are still supporting this.

  • demon said,
    April 5, 2012 | 3:54 pm
    (6 years ago)
     

    The MD5 is conflict with annotate jQuery , will update the plugin soon…

  • fabrice said,
    April 6, 2012 | 1:39 pm
    (6 years ago)
     

    Hi, After spending time on your site I saw you created that plugin so decided to try it out.

    It looks awesome and works the only problem is that I seem to be getting error messages when comments are posted. for example:
    http://gyazo.com/4535c6f477a1ae1c0761079da6f1eac6

    Seems like theres a clash with certain plugins and my comment.php..

    Is there a way to fix it?

  • George said,
    April 10, 2012 | 4:43 am
    (6 years ago)
     

    The only way I can get this plugin to work is by leaving the “content wrapper :” field empty. I which case it treats all images in the site as image annotation (not just the images in the posts). Here is a list of other problems:
    1) There is no image id displayed
    2) I can’t see the note I wrote

    My site is http://www.galaxyblend.com and i’m using WordPress 3.3.1

    Please help

  • May 4, 2012 | 3:59 pm
    (6 years ago)
     

    Thanks for the amazing plug-in. 😀

    by the way… is it possible to insert some id/class into the comments made via annotation? since I want to differentiate between ‘normal comments’ and ‘comments made using annotation’.

  • val said,
    May 31, 2012 | 9:56 pm
    (5 years ago)
     

    Hi,

    Thanks for this awesome plugin!
    I just have 1 problem, i cannot move/ enlarge the comment box to the place i want on IE9, but it works perfectly on FF/ chrome. Can load & see tags on IE9 properly though. Do you have any clues? Thanks a lot!! 😀

    • demon said,
      July 24, 2012 | 10:10 pm
      (5 years ago)
       

      Ver 2.5 should fixed the IE issue.

  • ai said,
    June 21, 2012 | 3:51 pm
    (5 years ago)
     

    Weel done, good widget. I’m just have a aquestion.where do insert image ID attribute manually. Event you show on the code but which file and line need to be refer.

    • demon said,
      July 24, 2012 | 10:17 pm
      (5 years ago)
       

      Where you insert the new post vis HTML mode.

  • sadf said,
    August 13, 2012 | 5:50 pm
    (5 years ago)

    Where Tsukasa carry the iPhone to? Related white Beach Jump (3D Illusion) Beach Jump (3D Illusion) 28 September’ 09 (3 years ago) Desk Diary

  • Wolfgang said,
    August 21, 2012 | 9:00 pm
    (5 years ago)
     

    wp 3.4.1 aktivation fails with:
    Parse error: syntax error, unexpected T_IS_IDENTICAL in /is/htdocs/wp1066517_CJC15TMR1X/www/privat/wp-citron/wp-content/plugins/demon-image-annotation/imageannotation.php on line 174

    • Wolfgang said,
      August 29, 2012 | 8:12 pm
      (5 years ago)
       

      seems to be fixed in the new version,thanks

  • Edwin said,
    September 29, 2012 | 8:08 am
    (5 years ago)
     

    Wondering how the size can be set?….

  • Desmond said,
    November 2, 2012 | 2:58 am
    (5 years ago)
     

    It doesn’t work with Chinese Characters, right? I tried this plugin and after I refresh the page, the chinese characters just go to “???”
    How can I fix this?

    • Desmond said,
      November 2, 2012 | 3:05 am
      (5 years ago)
       

      Oh just forget it…
      I change all collations to utf8 in the database, and chinese characters are correctly displayed.

1 TRACKBACKS

Your thought

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