As somebody who dabbles in photography and blogging, adding captions to identify who or what are in my photos can sometimes be tedious. For the past month, I’ve been working on a WordPress plugin that allows me to add captions and tags to my pictures in a simple yet intuitive way. The picture above exhibits what this new plugin can do. It shows four people (I’m the second from left), each tagged with his or her name. If you hover your mouse over a face or name in the caption, it reveals the person’s name and position in the picture.
The next sample demonstrates an annotation-style of tagging. Each part of an airplane is tagged with its name.
WP Pic Tagger allows you to tag, caption, annotate pictures and images on your WordPress blog by selecting a region of the image and add names, URLs and descriptions. Implements the jQuery-Notes plugin by Lukas Rydygel (http://jquery-notes.rydygel.de/) and the jQuery-autocomplete plugin by Dylan Verheul (http://code.google.com/p/jquery-autocomplete/).
Installation
1. Download the plugin from http://downloads.wordpress.org/plugin/wp-pic-tagger.zip
2. Unzip the archive ‘wp-pictagger.zip’ to a local folder on your computer.
3. Upload the folder ‘wp-pictagger’ and its contents to your blog’s plugin folder (root/wp-content/plugins) using FTP.
4. Login to your WordPress admin panel and browse to the Plugins section.
5. Activate the WP Pic Tagger plugin.
Enabling Tags on an Image
To tag an image, you need to assign the class “wp-tag-people-abc” or “wp-tag-objects-xyz” to your images through your blog’s HTML editor. ‘abc’ and ‘xyz’ must be unique strings of text to identify an image. Simply use the ‘Tag People’ or ‘Tag Objects’ buttons found in the editor to easily insert these tags.
To tag people, click the ‘Tag People’ button. This type of tag allows you to insert names of people and their website or blog URLs. The URL field may be left empty.
If you wish to tag objects, click the ‘Tag Objects’ button. This tag allows you to add only textual notes or descriptions.
Some samples:
<img src=”images/myfriends01.jpg” alt=”My Friends” class=”wp-tag-people-friends01″ />
If you have more than one image in your post, they must be assigned different classes:
<img src=”images/mydog02.jpg” alt=”My Dog” class=”wp-tag-objects-dog02″ />
<img src=”images/myfriends03.jpg” alt=”My Friends” class=”wp-tag-people-friends03″ />
Do not assign more than one class to an image, such as this:
<img src=”images/myfriends04.jpg” alt=”My Friends” class=”alignnone size-medium wp-image-777″ class=”wp-tag-people-friends04″ />
Doing so will disable the tagging feature.
Tagging the Images
After writing your post, publish it or save it as draft. View or preview the blog post. You will notice that each of your images assigned with the required classes are loading tags. To begin tagging, click the button with the plus (+) sign found below the image.
Click on the image. Drag and resize the tag box to your desired location and size. To save the tag, click on the button with the check mark to save it.
To edit or delete a tag, right-click on the tag to make the necessary changes.
License
This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation.
Disclaimer
The plugin is in its early stages but has been tested thoroughly on a number of blogs. It may not work on all blogs especially those that use complex themes and javascript implementations (mootools, scriptalicious).
As always, I am open to your comments and suggestions. I hope you like this one! Thanks!
Nice plugin, Drew. I’m excited to incorporate this in our future themes. Thanks for sharing!
Awesome plugin! Kudos! I have been looking for a plugin like this and you cracked my search!
Hope it also works on different browser platform. I’m using IE9 and Safari and the tags didn’t show. It works on Firefox 4 though.
@Dulce: Thanks! 🙂
@Beejing: The tags show up for me on those browsers. Hmmm
wow! *speechless*
you it’s hit again.. dude you’re the man…
Astig! This is a fab plugin! Thank you! Can we search for it within the admin page na? Para easy install =P
Irene
I am going to try it 🙂
And is it possible to allow the visitors or only registred users to tag the images, included the one in comments (my visitors can upload images through the comment form).
Thanks!
Hey, this is awesome! Would it be possible to have the tagged names be actual links — perhaps to corresponding tags on the blog?
Thanks!
@Jehz: I’ll write you a speech 🙂
@Faust: What’s that again?
@Mindanaoan: Yes you can search for it in the admin page.
@HD Blog: Let me know how it goes.
@Thomas: Yes it is possible.
@Chanzero: Can you explain further?
I just tried the plugin on a fresh install of WP 3.0.1. I got the buttons to tag buttons and objects, but I do not see the “+” to start tagging the actually picture. What am I missing? Like I said, this is a fresh install of WP, so no other plugins are installed and no themes, other than what came with the install (default theme).
@John: Can you email me a sample link? andrew /at/ alleba.com
Great plugin! I’ve been watching the development of something similar for the Gallery application here:
http://gallery.menalto.com/node/97699
And I’m glad to see this being implemented for WordPress. Great job!
This is awesome. I used to do this, but I just didn’t have the time to do it. I did it not on wordpress but on Adobe photoshop.
Anyway, Pic tagger is really great. they’re really helpful for knowing the names of the people in the photos. Once you tag each picture with names for every face, you will be able to figure out the location of the pictures of a particular person immediately. You could also exclude and combine the tags to refine your search query further. For instance, a search query for “Buddy” and “Brownie” are going to display all of the photos of Buddy with his dog Brownie. If you exclude “birthdays” from the search, youl” find the photos of Buddy and Brownie but with no tagged “birthday.”
I think I have to try the pic tagging through wordpress. Thanks for the info.
Hi drew, this is really a great plugin for wordpress… for some time I was tasked to work for this company before.. http://www.photoimageannotation.com/ unfortunately its not for wordpress.. however its almost the same as tagging.. Minsan ko na naisip to pero may software sila for pic tagging.. CONGRATS!!! BIG HIT TO FOR SURE
WOW AWESOMEST! I wish we’d have this in Blogger too!
Hi Andrew,
Sorry but I don’t understand how it works.
I didn’t find any button in the editor to add names on the image in the post.
Thank you to help me in understanding how to use it.
You can directly contact me by mail.
Hi,
is it possible to insert name or user ID of the commentators ?
Thanks.
Great job! Exactly what I was looking for.
Worth to be developed further!
Right now the only problem I see is, that it is hard to implement for users, that don’t know HTML/CSS.
Maybe bringing the buttons into the visual area, to have a user select an image and press the button. Maybe with an error message if conflicting classes are present.
Very grateful for this plugin!
Happy New Year!
Cheers, Klaus
Perfect plugin. I have found some error that this plugin will conflict with other javascript. Because some theme have called same javascript with this plugin, to fix that conflict, remove javascript called in wp-pictagger.php. remove this:
<!–
<script type="text/javascript" src="/js/jquery-ui-1.8.4.custom.min.js”>–>
I hope you can add feature that administrator and author post owner can add and edit tag from the post.
Sorry some mistake on my comment. Here’s the real fix
Many themes already called google api.
This one is optional but you can try
<script type="text/javascript" src="/js/jquery-ui-1.8.4.custom.min.js”>
Hope this help
hmppp i dunno why my fixes dint show on my comment. easy fix.
in wp-pictagger.php:
1 – in line 77 where google api called ( because many theme called it already )
2- line 78 optional but if still error, delete or comment this line
Hope this help
Hi Andrew,
does the plug-in also works on pages?
On my blog it seems to work on posts only!?
Thanks!
how to support Chinese？
This is great, but it clashes with accordion menu plugin:
http://wordpress.org/extend/plugins/accordion-image-menu/
I’m new to WordPress… any idea how to fix this clash? If they are both installed, they don’t work right.
@Nate: As of the moment, it does clash with other jquery and ajax implementations. Apologies.
So it’s not a simple fix? I found this thread and thought maybe it would be as easy as changing a line of code or adding a no.conflict() bit of code:
http://wordpress.org/support/topic/resolving-jquery-conflicts-in-jquery-plugins?replies=13
Great plug-in, for some reason it’s only working on Posts for me. Any idea why? When I throw it on a page, I am not able to create tags.