{ 2007 02 06 }

WP_Identicon

An example of WP_IdenticonAn example of WP_Identicon

A couple weeks ago I made a WordPress plugin to generate unique monsters for each commenter. Don Park came up with the original idea for representing users with geometric shapes. Since I already had the framework in place I thought I’d make a WordPress plugin for the original geometric Identicons. If you want to visually represent users (but maybe you don’t like monsters so much?) then this plugin is for you.

So what is an Identicon? It’s a randomly generated assortment of shapes that is specific to a commenter’s email (or if you prefer IP address). Identicons allow visual representations of commenters without requiring any external sites or user interactions. With 40 possible shapes (about 70 with inversions) in 3 possible positions, around 8000 distinguishable colors and four different rotations for each part, there should be several billion possible shape combinations which, even with the increasing chance of overlap with each additional user, should be quite enough for almost any blog.

The shapes used to create Identicons

Features

  • Dynamically generated avatars for each commenter
  • Consistently themed geometric icons
  • Consistent on any blog
  • Gravatar support
  • Theme edits no longer necessary

Current Version:

WP_Identicon v2.0

Installation instructions:

Unzip wp_identicon.zip. Upload wp_identicon.php and the identicon folder. Make sure the identicon folder is writable. If your unzipping program creates a wp_identicon folder please only upload the contents (wp_identicon.php and the identicon folder). That should be it. Identicons should now appear next to your commenter’s names.

You can adjust the background and foreground colors, the number of squares in and the size of the identicons in the Identicon Control Panel. You can also clear the Identicon image cache in the control panel.

Configuration:

Identicon Size in Pixels
How many pixels high and wide you want your Identicons. 35 by 35 seems like a decent compromise between compactness and clarity but they should remain mostly clear at any reasonable size.
Number of Squares
Number of shape blocks to build Identicon out of. Don Parks uses 3 by 3. I kind of like 4 by 4 myself. More than 4 starts to get a bit cluttered but can be interesting.
Background colors
The color of the background (empty part) of the Identicon. Personally I really like when the background matches the surroundings and the identicon appears to blend into it. Setting this to 0,0,0 makes the background transparent (what I’m using here) but IE6 does not like transparency in PNG’s and just fills the background with grey. If you know the R,G,B values of your background then you could set them directly here or you can put in a range of colors (like 1-255,255,255 to get backgrounds ranging from blue to light blue to white).
Foreground colors
The color of the foreground (colored part) of the Identicon. If this is 1-255,1-255,1-255 you will get Identicons of all the possible R,G,B colors. If you want only a certain color you could set the R,G,B values here (like 255,0,0 for only red Identicons) or you can put in a range of colors (like 1-255,255,255 to get Identicons ranging from blue to light blue to white).
CSS Styling
This is not in the Options menu. You can edit the CSS styling by adjusting the style.css file of your current theme. Identicons can be selected by img.identicon. A good start might be to add img.identicon{float:left; margin-right:3px;} to the bottom of your style.css.

For Advanced Users:

You can add CSS for img.identicon in your theme’s style.css. For even more control, you can disable the automatic placement in the Identicon Control Panel and add an identicon to any comment with identicon_build($comment->comment_author_email, $comment->comment_author);. For example, find the comments.php of your current theme (it should be in the folder wp-content/themes/[currentThemeName]/). Open it up and look for something similar to foreach ($comments as $comment). Inside this loop there should be code that displays the comment author’s name or metadata like <p class="comment-author"> or <p class="comment-metadata">. Just before all this enter:
<?php if (function_exists(identicon_build)) echo identicon_build($comment->comment_author_email, $comment->comment_author); ?>

If you would prefer to base the Identicons on the commentor’s IP address instead of the commentor’s email just replace $comment->comment_author_email in the above with $comment->comment_author_IP.

icoguo has kindly translated the install instructions to Chinese and Tai has translated them to Japanese although these are a bit outdated since version 0.51.

If any of this is unclear just let me know in the comments and I’ll do my best to guide you through it.

Change Log:

  • v2.0 12-10-2014:
    • Fixed Mersenne twister (with code thanks to ruafozy) after MySQL integer overflow “fix” broke the previous version. Unfortunately this will change previous identicons if the cache is cleared.
    • Internationalization support thanks to Anna
  • v1.02 5-6-2008:
    • Fixed WP 2.5+ built-in avatars when $id_or_email not email
  • v1.01 5-2-2008:
    • Fixed WP 2.5+ built-in avatars and gravatar support
  • v1.0 5-1-2008:
    • Fixed automatically adding identicons to sidebar in single posts bug
    • Supports WP 2.5+ built-in avatars
  • v0.62 2-14-2008:
    • Added Recent Comment (with Identicons) Widget
    • Deals with nested directories
  • v0.56 1-27-2007:
    • Fixed manual identicon global problem (Thanks again to Anton)
  • v0.55 1-27-2007:
    • Fixed gravatar option (Thanks Anton)
  • v0.51 1-9-2007:
    • Added custom random number generator
    • Monsters now consistent across servers
    • Added greyscale option (nice for B&W themes)
    • Added auto placement option
    • Added gravatar support
    • Obscured filenames
    • Clarified options page
    • Changed get_settings to get_option
    • Fixed bug in random number generator seed
    • Changed download link to WordPress Extends
  • v0.2 2-6-2007:
    • Switched to heading/distance shape representation
    • Added a bunch of shapes
    • Added transparency
    • Added option to choose number of pieces in Identicon (I’m partial to 4×4)
    • Added height and width attributes to img for accessibility
  • v0.1 1-31-2007:
    • Implemented 9 block identicon as per Don Park’s idea but using the srand() setting method of MonsterID

Posted by ScottS-M on Tuesday, February 6th, 2007, at 11:11 am, and filed under Blogger, Programmer, Web with the tags , , , , , , , , , , , , , , , , , , , , , , , , , , , , , .

Follow any responses to this entry with the RSS 2.0 feed.

You can post a comment, or trackback from your site.