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    
  • ianni said,
    July 9, 2010 | 10:17 am
    (7 years ago)
     

    WordPress called demon-image-annotation is good for wp user.
    can you send me the plugin?Thank you for your generosity。 😈
    by the way ,i just use it myself.notCommercialize

  • ianni said,
    July 13, 2010 | 10:13 am
    (7 years ago)
     

    can you give me any thing help for the plugin..
    i’m from shanghai of china. 😆

    • demon said,
      July 13, 2010 | 11:07 am
      (7 years ago)
       

      Hi ianni, I will announce the Image Annotation plugin to public soon.

  • Vins said,
    July 29, 2010 | 4:19 am
    (7 years ago)
     

    Hi!

    When do you anounce the image annotation plugin for wordpress to public? ^^

    Thanks

  • Dennis said,
    September 1, 2010 | 3:02 am
    (7 years ago)
     

    Hi Superwhite,

    first of all: Many thanks for this fantastic WordPress plugin.
    I’ve just a little problem: When I create a annotation and save, I get the error message “An error occured saving that note.”. I’ve installed it on my own, I installed it from the WordPress directly and in the end, I’ve also used your exact example. I’ve no clue what went wrong, maybe you’ve an idea?

    Thanks!
    Ciao
    Dennis

    • demon said,
      September 3, 2010 | 1:31 pm
      (7 years ago)
       

      May I know what wordpress version u using? Did you follow the instruction to install the plugin?
      This happens because the plugin cannot find or connect to the database.

  • Dennis said,
    September 3, 2010 | 5:03 pm
    (7 years ago)
     

    Many thanks for your reply. It’s the most current version (3.0.1). I’ve followed the instructions precisely.
    When can I check these database settings? I mean, the WordPress blog itself works without any issues.

    • demon said,
      September 3, 2010 | 5:32 pm
      (7 years ago)
       

      If your plugin is working fine, if you check into your wordpress database, you should have a table name “wp_imagenote”.

  • Dennis said,
    September 3, 2010 | 5:37 pm
    (7 years ago)
     

    It exist and all test entries are written in – so the database connection seems to work.
    When I put a note on an image, I can see this, but after a few seconds, a popup appears telling me: “An error occured saving that note.”. When I reload the particular site, the notes are gone.

  • David said,
    September 7, 2010 | 12:33 pm
    (7 years ago)
     

    I added this to a default 3.01 I got it working and saving notes but I still get the message “An error occurred saving that note.”
    Fire bug states:

    $_GET[“author”],
    $_GET[“email”]

    on line 23 and 24 of imageannotation-run.php are “undefined index” along with comment_author_email on line 101 of that same file being listed as an undefined variable.
    Any idea how to fix these?

    • demon said,
      September 7, 2010 | 3:06 pm
      (7 years ago)
       

      you can’t save image notes without author name and email

    • David said,
      September 7, 2010 | 3:23 pm
      (7 years ago)
       

      Despite those values being Undefined, it DOES save, it just gives the error message as well.

    • demon said,
      September 7, 2010 | 4:04 pm
      (7 years ago)
       

      Did you save with admin login account?

    • David said,
      September 7, 2010 | 10:22 pm
      (7 years ago)
       

      Yes.

    • demon said,
      September 8, 2010 | 7:48 pm
      (7 years ago)
       

      open /wp-content/plugins/demon-image-annotation/js/jquery.annotate.js
      insert the code below after line 163
      author = author == undefined ? “” : author
      email = email == undefined ? “” : email

  • David said,
    September 7, 2010 | 12:36 pm
    (7 years ago)
     

    Dennis,
    Check line 48 of imageannotaion-run.php and mare sure in the “UPDATE (table name)…” is the proper table name for your database.

  • David said,
    September 9, 2010 | 12:52 am
    (7 years ago)
     

    The code below shows line 163 is this the correct location? If not could you post the code around line 163 so I can get the right spot?

    ok.click(function() {
    var form = $(‘#image-annotate-edit-form form’);
    var text = $(‘#image-annotate-text’).val();
    var author = $(‘#noteauthor’).val();
    var email = $(‘#noteemail’).val();
    // This is line 163
    var check = false;

    Thanks.

  • Aaron said,
    September 27, 2010 | 2:52 pm
    (7 years ago)
     

    Thanks fro this because It is exactly what i want. But,

    I like Dennis can not seem to get this to save the notes. I checked if the database was created and it was. As well as if the notes were being created in the datbase and they were my prefix for my databse is the default wp_ . but when I reload the page they seem to disappear only on the image but not in the database. Not sure what to do at this point. I did notice that your demo on this page doesn’t save the new notes if I make one.

    Hopefully I can get this to work. ❓

    • Aaron said,
      September 27, 2010 | 3:10 pm
      (7 years ago)
       

      Okay so I got it to save the notes. They were waiting approval as comments. But now It seems that the notes that get created also create comments to the post the image is located. Is this what is suppose to happen or is there something I can do to change this. I would like to be able to have the note get created and saved but not a comment. I can not disable comments either because they are crucial to my website.

      Thanks in advance

      • demon said,
        September 27, 2010 | 3:28 pm
        (7 years ago)
         

        Hi Aaron,

        The image annotation plugin is build with wordpress comment, every image note that user add will add into comment as waiting approval. This is to avoid spam before it show to public.

  • Aaron said,
    September 27, 2010 | 4:09 pm
    (7 years ago)
     

    Hey Thanks for for hasty response Demon,

    Then in that case how did you keep the notes on your image above without having them as comments as well? when I deleted them as comments they are deleted as notes as well.

    In the long run what I want to accomplish is this:
    1. Have the user upload an image like in a post
    2. have the user tag it using your image annotation plugin (without adding comments to the post it was uploaded to) even if it redirects to another page to do the annotations
    3. and then post it with the notes and but not be able to add any more after it is posted by any user.

    Is this something you feel would be possible using your plugin? I am comfortable with php but not jquery and need some guidance.
    I really like your plugin, I just need it to behave a certain way.

    Any help would be greatly appreciated. Thanks!

  • aaron said,
    September 28, 2010 | 3:32 am
    (7 years ago)
     

    Hey sorry to be asking so many questions. I just am passionate about getting this to work for me.
    How come I can not add a note on any page other than the actual post the image is on. What if i wanted to change that, is that possible? Could you point me in the spot where you had coded it that way.

    • demon said,
      September 28, 2010 | 11:10 am
      (7 years ago)
       

      The image notes only load in actual posts, you can change via imageannotation.php and modify is_single() if…else statements.

      • Aaron said,
        September 30, 2010 | 11:31 am
        (7 years ago)
         

        hmm thanks Demon I was able to change the page where the tags were being added. I have been looking into making it so that only the user who uploaded the image would be able to add notes. I understand how to do it in php but am just stumped right now when it comes to .js

        I see where it adds the note button in jquery.annotate.js but not sure how to check if the user is the user who uploaded the image. Is there a way in one of the php files that I could edit? I am looking into it now. Just thought I would ask.

        Thanks again.

      • demon said,
        October 1, 2010 | 12:25 am
        (7 years ago)
         

        You may download the latest plugin version on wordpress plugin site and check for example 2 instructions.

  • Jim said,
    October 4, 2010 | 3:05 pm
    (7 years ago)
     

    Aaron and demon,

    If you were able to get that functionality working (user that submitted is the ONLY user that can edit), please let me know how you did it. Also, demon…when I delete a note, the comment posting does not delete as well. Is this supposed to happen?

    I am curious about this because I want to be able to search for picture based on their annotations. With the way it posts comments this is great, but if it doesn’t delete the posting when you delete the annotation then it is not so great.

    Outside of these few questions that I have, this is the BEST annotation plugin for wordpress and exceeds equivalent plugins on drupal.

    Cheers,

    Jim

    • demon said,
      October 4, 2010 | 3:23 pm
      (7 years ago)
       

      Hi Jim,

      When you rollover the images to load note, it will only show if the comment exist in the db else it will auto delete the notes. You must delete the comments in wordpress admin to delete the image notes.

      • Jim said,
        October 4, 2010 | 3:36 pm
        (7 years ago)
         

        Thanks demon,

        Here is my dummy site that I setup.

        http://www.ymmvtoday.com/lazy_word/

        I have several pictures posted and the annotating works great. But as you can see when I delete a note using the little red icon it doesn’t delete the comment either.

        I would like to be able to delete the comment using that red icon you have integrated into your plugin, and not in the backend. This is because I am going to have other users posting their own images and annotating their own images. I appreciate your help in this.

        Jim

  • Aaron said,
    October 4, 2010 | 4:26 pm
    (7 years ago)
     

    Heya Jim,

    One way I just tested for your use would be to add some PHP to the file imageannotation-run.php

    In the function getDelete()
    where it says $data = array(
    $_GET[“id”],
    add this line of code right under it within the perenthesis
    html2txt($_GET[“text”]),
    and then in the same function a couple lines down under this line
    $wpdb->query(“DELETE FROM wp_imagenote WHERE note_img_ID='”.$qsType.”‘ and note_text_ID='”.$data[0].”‘”);

    add this :
    $wpdb->query(” DELETE FROM wp_comments WHERE comment_content='”.$data[1].”‘”);

    I just tested it on my wordpress blog and it worked for me.
    Let me know if it is working for ya.

    • Aaron said,
      October 4, 2010 | 5:00 pm
      (7 years ago)
       

      Oh note that this well delete all comments with the same comment text. Even if it is another post. I couldn’t find many connections between the two tables other than context email and author. No real way to connect the two tables other than that.

      Just so you know*

      • demon said,
        October 4, 2010 | 5:17 pm
        (7 years ago)
         

        replace the function getDelete() with the code below:

        //delete image note
        $qsType = isset($_REQUEST[‘imgid’]) ? trim($_REQUEST[‘imgid’]) : ”;
        $data = array(
        $_GET[“id”],
        );

        global $wpdb;

        //find the comment ID frm wp_imagenote
        $result = $wpdb->get_results(“SELECT * FROM wp_imagenote WHERE note_img_ID='”.$qsType.”‘ and note_text_ID='”.$data[0].”‘”);
        foreach ($result as $commentresult) {
        $comment_id = (int)$commentresult->note_comment_ID; //comment ID
        };

        $wpdb->query(“DELETE FROM wp_imagenote WHERE note_img_ID='”.$qsType.”‘ and note_text_ID='”.$data[0].”‘”);
        $wpdb->query(“DELETE FROM wp_comments WHERE comment_ID = “.$comment_id);

      • Jim said,
        October 5, 2010 | 3:12 am
        (7 years ago)
         

        Thanks Aaron and demon,

        I tried demon’s method first because his searches based on comment_ID.

        Demon, I pasted your code in and now it hangs when its trying to load the notes. I also tried posting a new comment and it does not want to save; in fact it comes up with an error (probably because it is hung up on trying to load the comments). I went through the code for syntax errors and I don’t believe there were any. I hate to sound like a total newbie with regards to the quotations, but I noticed that the parenthesis in the original code look different than those that appear when I paste in the new code. Anyways, I wouldn’t mind giving you admin access to tinker inside the code.

        just logon with admin and the password is ghgra.

        Aaron, thank you for your input as well. When you said that it would delete the same comment across all posts that turned me off. However, were you ever able to make it where the user that posted can only annotate his only pictures?

        Thanks again,

        Jim

      • demon said,
        October 5, 2010 | 11:18 am
        (7 years ago)
         

        Make sure you copy and paste the php code into imageannotation-run.php, also check your imageannotation-run.php is running fine when you paste in the code, any extra character will stop the function running.

  • Juan said,
    October 14, 2010 | 12:50 pm
    (7 years ago)
     

    Would it be possible for these changes to be implemented in the actual plugin and published for all to use instead of suggesting local changes?

  • Tanguy said,
    December 21, 2010 | 5:22 am
    (7 years ago)
     

    Great plugin, but apparently on my test image a user can edit and even delete any admin annotation. Where am I wrong ?
    Thanks.

  • demon said,
    December 23, 2010 | 1:07 am
    (7 years ago)
     

    I just got time to update the plugin to version 2.0, do check some feature like admin page, auto insert id attribute, Gravatar and more!

    • Tanguy said,
      December 24, 2010 | 9:14 pm
      (7 years ago)
       

      I can’t make it work properly under 3.03… I don’t understand why. The auto id insert doesn’t seem to work, previous comments are not loaded, no more ‘add note’ button.

      • demon said,
        December 24, 2010 | 10:44 pm
        (7 years ago)
         

        hi tanguy, I had the same problem before, the problem is either you had too many jquery.min.js load in the header (might be the wordpress theme or other plugin)

        The solution is to disable jquery.min.js in imageannotation.php line 14
        //echo ... 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'

1 2 3 7

Your thought

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