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.
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==
demon image annotation settings screencap
image notes listing screencap
== Live Demo==
Where Tsukasa carry the iPhone to?
(2 years ago)
1.4 lens
(2 years ago)
Version 2.4.3 release:
* 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 years ago)
Canon
(2 years ago)
This is nice!!!
(2 years ago)
This is not registering the note!!
(2 years ago)
On my WP, for some reason last version doesn’t work under Safari. Still fine under FF. No problem on your site under Safari, I know…
(2 years ago)
Did you try demon image annotation the latest version?
(2 years ago)
Yeah, it’s the latest update, but tomorrow morning everything ‘s OK under Safari, maybe a problem of cache yesterday (?).
(2 years ago)
By the way, I’d like to be able to approve batches of comments instead of doing this one by one. And there still a security issue : my logged in users can edit any any annotation without letting any trace on the site.
(2 years ago)
Any logged in user are allow to edit the image annotation, what you can do is change the setting to identify by email, here’s how:
1) open up imageannotation.php
2) after line 74 add the code below
< ?php global $user_email;
get_currentuserinfo();
?>
< ?php if ( $user_email != 'your@email.com' ) { ?>
addablepage = false;
addablecon = false;
editable = false;
< ?php } ?>
3) replace ‘your@email.com’ to your administrator email
(2 years ago)
In fact I’ve changed line 66 editable ‘true’ -> ‘false’, and my security issue is fixed. I’d just wish in a future that only authors can edit their own annotations, and maybe that they have access to the list in a kind of admin panel.
Thanks for your support Demon, you rule
(2 years ago)
This is a Canon lens
(2 years ago)
I just installed version 2.4.3 on WordPress 2.1.3
I am getting a console error:
$ is not a function
[Break On This Error] $(” img”).each(function() {
This might be due to the fact jQuery is running in no-conflict mode and therefore cannot identify the $ sign as a function. This is probably not only happening to me. I would recommend running the plugin in no-conflict mode too.
Thanks for your work, I would really love to get to use it.
(2 years ago)
¡Nombrame!
(2 years ago)
same problem here. this also has the effect that every javascript on the whole site is broken
don’t know much about jquery but no-conflict sounds good
(2 years ago)
To mushon and ovidiu,
The plugin might conflict with other plugins or themes jquery, try open imageannotation.php and disable code line 14.
(2 years ago)
Thanks for all your effort on this and for sharing it!
On my install (WP 3.1.3 and Demon 2.4.3 + Chrome) It’s not saving the notes. also my table is not “wp_imagenote” it’s installing as “demon_imagenote” …of course the wp_ is definitely what I’d prefer. But besides that it just not saving the notes and the Drag feature isn’t working although the resize feature is. Any assistance is appreciated.
Thanks again!
(2 years ago)
I see that there’s an explicit reason the table is named demon_ Once I get this working will it be possible to use the wp_ prefix.?
(2 years ago)
I have the same problem as wholmes. It seems to be failing to load the notes from the database when I mouseover the picture. Running WP3.1.3, 2.4.3 & Chrome also.
Fantastic plugin though! Very much appreciated.
(2 years ago)
Hi wholmes and james,
If the plugin falling to load notes means the result that return from php cause the jquery stop running. That indicates that you’re running a really new version of PHP 5, which adds those warnings on older PHP 4 compatible code. Try add this to the top of your wp-config.php file, right after the first < ? php line:
error_reporting(0);
Try and let me know, thanks.
(2 years ago)
Hey Demon,
Yep works perfectly now!
Thanks for the help!
(2 years ago)
Thanks Demon,
Sadly, that did not work for me. The entry form is loading allowing me to comment but when I return to the page the only comments that are saved are with the wp_comment system. The demon comments are not saving.
More… when I first save the comment it creates the thumbnail image and places it at the wp_comments area. But a page refresh it disappears and the wp_comment is all that remains.
(2 years ago)
@ Wholmes and James,
Have you approved comments in the demon admin page before reloading the image ? On my install (unsync with WP comments), the comments don’t show if I don’t approve them. Any new unapproved comment on an image will make crash mouseover. Hope it helps.
(2 years ago)
One more thing… I’m using this on a multisite install. I haven’t network installed it it’s just running on one site within the network. Not sure if this has effect or not.
It might be worth noting that Guam Image annotation version does work on my system as it’s supposed to bu I wanted the added features and admin panel.
Thanks again!
(2 years ago)
All the comments are registering as approved but the demon table is definitely empty.
(2 years ago)
First off love your site and content and this is a awesome plugin.
Its not working for me either. Specs:
WordPress (most stable version) + Networking w/sub-folder
demo here.
http://5thgearpinned.com/prototype/2011/06/25/shanaze-reade-series-episode-9/shanaze-reade-e9-8/
I’ve gone in and changed the target div so it only works on my main image. Any info would help.
(2 years ago)
First off love your site and content (great photos and awesome racing stuff) and this is a awesome plugin.
Its not working for me either. Specs:
WordPress (most stable version) + Networking w/sub-folder
demo here.
http://5thgearpinned.com/prototype/2011/06/25/shanaze-reade-series-episode-9/shanaze-reade-e9-8/
I’ve gone in and changed the target div so it only works on my main image. Any info would help.
(2 years ago)
Sorry for the double comment…
wholmes,
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.
(2 years ago)
Thanks Zane… I was thinking the same thing… Please post if you have a fix, I really appreciate it… could you post the hack just in case Demon doesn’t have time or desire to do the update? Thanks again.
Happy 4th!!
(2 years ago)
Just an added thought… nothing to do with my earlier post above.
One thing I’d like to see in this plugin… The thumbnails that are created contain only the part of the image that was selected in the imagenote.
Example usage: Take a classroom photo and make an imagenote of a classmate… selecting that classmates face in the photo. Then when you look at the comments that persons face is the thumbnail… Seems like a cool and logical next step for the script I think… Anyways Thanks again Demon!