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!

Major changes and features:

• New default theme Twenty Ten
• New APIs that allow theme developers to easily implement custom backgrounds, headers, shortlinks, menus, post types, and taxonomies
• New multi-site functionality (merge of MU culminates here)
• New lighter interface
• Contextual help on every screen
• 1,217 bug fixes

For more, read Matt’s announcement on his blog. Download the new release here or update your installation automatically via admin.

On a side note, Matt is coming to Wordcamp Philippines 2010. For more details regarding this event, visit the official Facebook page. More announcements will be made very soon.

After successfully upgrading WordPress, I went through my plugins list. It was only then I realized that I had five active plugins that I wasn’t even using and one plugin that’s been waiting for an upgrade for two years! If you’re wondering which plugins I use, here they are:

• Photopress
• Akismet
• Adhesive
• Daily Top Ten Stealth Edition
• Google Sitemaps
• Guestbook Generator
• Name Dropper
• Paged Comments
• Related Posts
• Stattraq
• Wp-Cache
• Wp-Shortstat

I strong suggest you to upgrade to 2.2.1. Unlike other releases, this one’s actually worth it. While you’re at it, upgrade all your plugins to the latest versions and remove the ones that you don’t really need to free up space and lessen database queries.

Uh oh. Movable Type had just gone open source. What does this mean? Well, WordPress has but one more competitor out to chew a piece off its pie. I rarely see blogs using Movable Type anymore, and there’s one blog on Typepad that I go to once a month. I find this move by Six Apart quite daring, because along with their hopes of innovating its software, there’s one lingering hindrance that I see: Movable Type runs on Perl. Perl’s popularity is on the wane and so is MT’s. Perhaps Six Apart is looking at this past decision with regret?

If Movable Type embraces another programming platform, say, PHP, maybe it can stand a chance. But as of now, they’re way in over their heads.

Plugin Name: Name Dropper
Description: Plugin that allows your visitors to submit your blog posts to select bookmarking services.
Version: 0.2
Author: Andrew dela Serna

Installation:

1. Download the plugin from http://www.alleba.com/blog/wp-downloads/name-dropper.zip
2. Extract and upload name-dropper.php to ‘yourserver.com/wp-content/plugins/’
3. Login to your WordPress admin panel and browse to the Plugins section.
4. Activate the Name Dropper plugin.

0.2 Update: Added some customizable options where you can easily pick which services you want to display. Open the plugin file and set a service to true (to show) or false (not to show). Afterwards, save the file and upload to your plugins folder.

Plugin Name: StumbleUpon It!
Description: Easy plugin that allows your visitors to submit your blog posts to StumbleUpon.com.
Version: 0.1
Author: Andrew dela Serna

Installation:

1. Download the plugin from http://www.alleba.com/blog/wp-downloads/stumbleupon-it.zip
2. Extract and upload the contents of the archive to ‘yourserver.com/wp-content/plugins/stumbleupon-it/’
3. Login to your WordPress admin panel and browse to the Plugins section.
4. Activate the StumbleUpon It! plugin.

For comments and suggestions, please leave a comment. Thanks!

This theme has some bits of inspiration from my current theme, FedEx and a computer game that I used to play. The great thing about it is it’s very usable and straightforward. Expect its release in a day or two.

Plugin Name: Guestbook Generator
Description: Generates a guestbook for WordPress blogs. Once activated, click on Options > Guestbook Generator.
Version: 0.8
Author: Andrew dela Serna
Notice: Compatible only with WordPress 2.1. Support for older versions will continue but updates/upgrades will be focused on the newest versions of WordPress. Scroll down to download Version 0.7 which is designed for Wordress 2.0.X.

Features:

1. No files to edit. Just upload the plugin, activate it then run the generator.
2. Guestbook template seamlessly integrates with your current theme.
3. When changing themes, simply run the generator to create the necessary files.
4. Like a true-blue guestbook, entries are arranged from newest to oldest.
5. Remember the time when guestbooks were the “in” thing? Hopefully this plugin will bring back the ol’ days. Hehe.

Installation:

1. Download the plugin from http://www.alleba.com/blog/wp-downloads/guestbook-generator.zip. If you don’t want paged comments, download this one instead.
2. Extract and upload the contents of the archive to ‘yourserver.com/wp-content/plugins/guestbook-generator/’
3. Login to your WordPress admin panel and browse to the Plugins section.
4. Activate the Guestbook Generator plugin.
5. Go to Options > Guestbook Generator to create your guestbook.
6. That’s it!

On a side note, if you already followed my instructions from my previous posts, you have to delete your current guestbook page and guestbook template files (guestbook.php, guestcomments.php) for the plugin to work. However, I suggest that you stick to your guestbook if you already have a lot of people who signed it. You may use this plugin if you’re switching themes.

I have tested Guestbook Generator on a lot of themes. Some still required a little tweaking especially on the wording. You might want to check out my reloaded instructions if you decide to edit the files in the Theme Editor.

Lastly, since this is the initial release, I would love to hear your comments, complaints or suggestions. Hope you like it.

Update: There is an issue with the guestbook not being found/viewable right after generating it. I’ll fix this tomorrow. In the meantime, you can edit the guestbook and save it. That should do the trick.

0.2 Update: The above issue has been resolved and so far the plugin works perfectly in all the blogs I tested it on.

0.3 Update: Cleaned up some coding.

0.4 Update: Added better error handling. Reversed the order of comments from newest to oldest (Thanks Ulaan B.)

0.5 Update: Even more error handling. Noted issues with the older Default theme and K2 theme.

0.6 Update: Corrected to avoid errors with K2 theme.

0.7 Update: Fixed some replacement mechanisms that will avoid errors with any theme.

0.8 Update: Solved compatibility issues with WordPress 2.1.

0.9 Update: Added paged comments functionality. Requires the Paged Comments plugin.

Version 0.7 for WordPress 2.0.x
For those experiencing problems with chmoding your theme folder, please download this version (WordPress 2.0.x)

Scroll down on the sidebar to see a reduced version implementation.

Feel free to insert this logo in your blog by using the following code:


<img src="http://static.flickr.com/58/202670272_0613a2e828_m.jpg" title="I [heart] WordPress" alt="I [heart] WordPress">