September 29th, 2010

WordPress Plugin: WP Pic Tagger

by Andrew dela Serna

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!

Posted in Wordpress, Wordpress Plugins


  1. 35 Comments

  2. Dulce said...

    Nice plugin, Drew. I’m excited to incorporate this in our future themes. Thanks for sharing!

    Sep 29, 2010

  3. Beejing said...

    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.

    Sep 29, 2010

  4. Andrew said...

    @Dulce: Thanks! :)

    @Beejing: The tags show up for me on those browsers. Hmmm

    Sep 29, 2010

  5. jehzlau said...

    wow! *speechless*

    Sep 29, 2010

  6. Faust said...

    you it’s hit again.. dude you’re the man…

    Sep 30, 2010

  7. Blogger from Mindanao said...

    Astig! This is a fab plugin! Thank you! Can we search for it within the admin page na? Para easy install =P

    Irene

    Sep 30, 2010

  8. HD Blog said...

    I am going to try it :)

    Oct 3, 2010

  9. Thomas said...

    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!

    Oct 4, 2010

  10. chanzero said...

    Hey, this is awesome! Would it be possible to have the tagged names be actual links — perhaps to corresponding tags on the blog?

    Thanks!

    Oct 4, 2010

  11. Andrew said...

    @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?

    Oct 4, 2010

  12. John said...

    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).

    Oct 4, 2010

  13. Andrew said...

    @John: Can you email me a sample link? andrew /at/ alleba.com

    Oct 5, 2010

  14. Chris said...

    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!

    Oct 6, 2010

  15. Nonoy said...

    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.

    Oct 23, 2010

  16. James said...

    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

    Nov 1, 2010

  17. Dani said...

    WOW AWESOMEST! I wish we’d have this in Blogger too!

    Nov 2, 2010

  18. Soule Jacques said...

    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.

    Dec 7, 2010

  19. Tanguy said...

    Hi,
    is it possible to insert name or user ID of the commentators ?
    Thanks.

    Dec 27, 2010

  20. Klaus said...

    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

    Dec 31, 2010

  21. deninth said...

    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.

    Jan 9, 2011

  22. deninth said...

    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

    Jan 9, 2011

  23. deninth said...

    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

    Jan 9, 2011

  24. Tomas said...

    Hi Andrew,
    does the plug-in also works on pages?
    On my blog it seems to work on posts only!?
    Thanks!

    Jan 14, 2011

  25. DimDim said...

    how to support Chinese?

    May 12, 2011

  26. Nate said...

    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.

    Jun 7, 2011

  27. Andrew said...

    @Nate: As of the moment, it does clash with other jquery and ajax implementations. Apologies.

    Jun 7, 2011

  28. Nate said...

    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

    Jun 10, 2011

  29. Cole said...

    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.

    Oct 25, 2011


  1. 7 Trackbacks

  2. WordPress Wednesday: WP Pic Tagger « BlueFur.com

    Oct 6, 2010

  3. WP Pic Tagger – Wordpress plugin for Image Tagger | Blogupstairs

    Oct 17, 2010

  4. WP Pic Tagger : ปลั๊กอินติดแท็กให้รูปภาพสำหรับ Wordpress « Blogging In Thai : Thailand Blogging Community : แนะนำทิป/เทคนิค ในการทำเว็บบ

    Nov 27, 2010

  5. Image Annotation Plugins for WordPress | Jesse Pearlman Karlsberg

    Dec 16, 2010

  6. LaTeX, Images, & plugins » Astronomy at UCR

    Feb 7, 2011

  7. 写真にリンクURL、コメントを埋め込む方法/Wordpressプラグイン WP Pic Taggerの使い方 | WordPressにGoogle Maps API V3!ブログ素人のホームページの作成メモ

    Dec 17, 2011

  8. WP Pic Tagger | Best Plugins - wordpress – widgets – plugin 2012

    Nov 8, 2012

Post a Comment


6 − five =