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/).
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.
<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.
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.
As always, I am open to your comments and suggestions. I hope you like this one! Thanks!