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 4.1 | Requires at least: 2.5 | Tested up to: 5.2.4

 

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

= 4.1 =
* Fixed resize issue

= 4.0 =
* Auto resize option now enable responsive mode

= 3.9 =
* Fixed multiple form issue

= 3.8 =
* Replace mysql_real_escape_string() with esc_sql()

= 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
217 white comments    
  • jpeg said,
    July 12, 2011 | 5:16 pm
    (9 years ago)
     

    Is there any way to disable annotations until another functions executes completely and then enable it again?

  • carmela said,
    July 18, 2011 | 9:10 pm
    (9 years ago)
     

    Hi Demon, thanks for your great plugin

    I tried Demon Image Annotation plug-in v.2.4.3 but can’t get it to work in WordPress 3.2.1

    The plugin is well installed and I see the admin interface, but no tagging for me…

    Can you help me?

  • wholmes said,
    August 14, 2011 | 2:19 am
    (9 years ago)
     

    Hi again,

    Thanks again for effort on this plugin, but I just can’t use it. I think a lot of people like your plugin but can’t seem to get it to work in 3.2.1 as well as this issue (re-stated from post above)…

    I’m having the same problem as you and after a quick look at my db, the prefix appears to be the exact problem. Since WP + Networking prefix’s your table fi your custom prefix + _ + blogid, end result: wp_2_demon_imagenote.

    It should be a quick fix of checking for multisite install if so use the prefix + _ + blogid when creating the table. I’ll dive into the plugin core later this evening, but I have ZERO desire to HACK the core of this plugin to get it working, rather will contribute the fix and have Demon approve it, update the plugin with my patch and update the plugin repo.

    Thanks again.

  • john said,
    August 14, 2011 | 9:46 am
    (9 years ago)

    why the HTML tag must be cleared when I reload this page and I can’t reply the note directly as jQuery in Mirai Gaia CMS? need ur help 🙂

  • demon said,
    August 22, 2011 | 3:04 pm
    (9 years ago)
     

    thanks for pointing out the database table prefix issue, will look into it…

  • japanworm said,
    September 1, 2011 | 6:04 pm
    (9 years ago)
     

    Hello!

    I’ve been looking for a plugin like that forever.
    I’ve been playing around with the plugin for many months now, but I’m about to give up. It just doesn’t work.
    I suspect it’s a jquery conflict or something.

    When I enable the plugin, many other things in my theme stop working, e.g. my image slider doesn’t load, my hover cards for gravatars don’t load and although the text “mouseover …” show up above the images, when I hover over them, nothing happens.

    I’m desperate, I really want this to work. Any advice?
    Thanks so much in advance!

  • Tanguy said,
    September 15, 2011 | 7:13 pm
    (9 years ago)
     

    Hi,
    it’s me again. I moved my blog on a massive WP multiblog, where we try to make DIA work for hundred and thousand people. The plugin seems to load but fails when I want to add note. I can’t access to the DB, as I’m not the webmaster. Here’s my test page, is the source code can help :
    http://lewebpedagogique.com/paschalcours/2011/09/09/joconde/
    Thanks,
    Tanguy

  • japanworm said,
    September 24, 2011 | 10:43 pm
    (9 years ago)
     

    I finally got it to work, but now I do get the following error message when I’m not logged in and try to comment normally (without commenting on an image!):

    ” noted on #img-46

    Warning: Cannot modify header information – headers already sent by (output started at /hermes/bosweb25a/b155/ipg.zoomingjapancom/wp-content/plugins/demon-image-annotation/imageannotation.php:178) in /hermes/bosweb25a/b155/ipg.zoomingjapancom/wp-comments-post.php on line 95

    Warning: Cannot modify header information – headers already sent by (output started at /hermes/bosweb25a/b155/ipg.zoomingjapancom/wp-content/plugins/demon-image-annotation/imageannotation.php:178) in /hermes/bosweb25a/b155/ipg.zoomingjapancom/wp-comments-post.php on line 96

    Warning: Cannot modify header information – headers already sent by (output started at /her…/wp-content/plugins/demon-image-annotation/imageannotation.php:178) in /her…/wp-comments-post.php on line 97

    Warning: Cannot modify header information – headers already sent by (output started at /her…/wp-content/plugins/demon-image-annotation/imageannotation.php:178) in /her…/wp-includes/pluggable.php on line 934

    I checked and I think the “echo” command on line 178 could cause the problem. I tried to replace it with “return”. Then, it works, but the thumbnails won’t show up in the comment anymore.”

    Any ideas how to fix this?

  • japanworm said,
    September 26, 2011 | 10:23 pm
    (9 years ago)
     

    Hello again. Still haven’t figured out how to get rid of that error.
    First of all you’re calling the scripts in a bad way. I’m using wp_enqueue right now, but for that I need to know which script depends on which.
    For example, does the md5.js need jquery and jquery-ui? What about the actually annotate.js?

    Thanks a lot in advance.

  • demon said,
    September 27, 2011 | 12:45 pm
    (9 years ago)
     

    Thanks, will look into the jquery confliction.

  • japanworm said,
    September 29, 2011 | 11:13 am
    (9 years ago)
     

    Hello again.
    Thanks so much for your efforts. I updated to the newest version.
    Unfortunately it didn’t help with the error I still get.
    This line of the plugin causes a header already sent error:
    echo "noted on #".$imgIDNow."";

    Also, in the newest version of your plugin the “send” button for the note is gone and I also cannot move the frame on the picture anymore to place where my note should go, could you check on that as well, please? 🙂

  • disma said,
    October 6, 2011 | 4:21 am
    (9 years ago)
     

    Hi, first thank you for the plug in! Second, i’ve 1 Question:
    i’ve this this picture frame to contain picture:

    #main_feature img, #home_content img, .post_entry img, #content img, #single img, .wp-caption img, object {
    padding:4px;
    border: 1px solid #999;
    -moz-box-shadow:0 0 7px #333;
    -webkit-box-shadow:0 0 7px #333;

    But when i do the mouseover the picture frame change to a simple black frame… i don’t understand why, someone can help me?
    thank you!!!

  • Askinas said,
    October 21, 2011 | 11:08 pm
    (9 years ago)
     

    Hi demon, thank for the great plug in.
    I have one problem here..
    in my blog when I add note as login user.. after I refresh the page it wont show up..

    but if I commented as non login user the comment is loaded and shown..
    you can see here:
    http://www.askinas.net/36/mathematics-and-science-south-campus-milan-ugm.php

    on the first image I comented as a non login user..
    and on the 2nd image I comented as login user..
    after the page refreshed comment on 2nd image wont show up.. while the first showed up normally..

  • zyxep said,
    November 6, 2011 | 1:42 pm
    (9 years ago)
     

    Hi Demon.

    Love your plugin, but i can’t really figure it out, i want the hover you have on the pictures in “RELATED WHITE”.

    but i can’t figure out how to add that hover with your plugin.

    can you tell me a short how to do that or if it isn’t possible with your plugin.

    • demon said,
      November 8, 2011 | 10:48 am
      (9 years ago)
       

      This plugin doesn’t do the caption hover effect you mention here, if you like the effect can find it on google with “jquery caption hover”.

  • Max said,
    November 24, 2011 | 7:46 am
    (9 years ago)
     

    I am having a terrible time trying to get your plugin to work and for my sites major functioning purpose this plugin or if was available a like button that I could customize to say what i wanted it to say but continuously added up the amount of times it was clicked is essential. I have properly installed the plugin but am unable to get the scripts to work on my site. Please assist with some feedback

  • yuri said,
    December 18, 2011 | 3:49 am
    (9 years ago)
     

    Instead of making a separate entry for it in the admin side-bar how to take it under the “Settings” ?

  • yuri said,
    December 18, 2011 | 11:50 am
    (9 years ago)
     

    With latest WP 3.3 I get to see “Add notes” even on the site header image and user icons/avatars. This is confusing. How to turn this off ?

    add_action(‘wp_head’, ‘load_image_annotation_js’); loads the “Add notes” universally it seems …… it just needs to load for the images in blogpost only or such gallery like bp-gallery. Please help.

  • radhouane said,
    January 23, 2012 | 10:24 pm
    (9 years ago)
     

    hi
    sorry but i dont understand what i have to put in : content wrapper

    with #entrybody nothing works
    with putting othing all the image in the site work with annotation
    i put #content its works but the avatar in the comment load as annotation

    please help me

  • February 7, 2012 | 12:23 am
    (9 years ago)
     

    Is this plugin still working? I tried activating it as per the instructions but it doesn’t seem to turn up on the site.

    • Frederick said,
      March 16, 2012 | 10:46 pm
      (9 years ago)
       

      I’m having trouble too. What version of WP are you using?

  • DavidK said,
    February 17, 2012 | 8:13 am
    (9 years ago)
     

    Not sure if you’re still supporting this plug in, but it would be pretty cool for the project that I’m working on … BUT — is there a way to integrate it with a NextGen Gallery image rather than one that’s been uploaded to the standard wordpress media libary?

    If so — I’m not a programmer and can’t do any PHP … but can certainly cut/paste code and follow instructions.

    Finally — sorry I don’t speak Chinese, but my son is fluent, which is pretty cool.

    Let me know what you think — is there an easy way to make this work with NextGen stored photos???

  • March 11, 2012 | 2:39 pm
    (9 years ago)
     

    I’m having the same problem as JapanWorm (comment #141).
    here’s what I found about this problem:
    1. the error message only occurs when I choose to sync the plug-in with wordpress comments
    2. even when the error message appeared, the submitted comments actually saved inside the comment inbox.
    3. the error message DID NOT appear on localhost, so I think the occurence of error message has something to do with file permission.

    ======

    after realizing these things, I believe finding a way to ‘bypass’ the error message would be the fastest solution. So… can anyone help me to do this?

    uh yeah… I’m using WordPress 3.1.3 and Demon Image Annotation 2.4.7

    and you can see my current situation here: http://pencukurbumi.org/learned-new-skill-demon-image-annotations/

Your thought

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.