Home | Bio | Contact |

Implementing Gravatar, MonsterID And VisiGlyphs Avatars

Bookmark and Share

I've added some silly components to the website. For the comments area.

I added Gravatar last week. Gravatars are little avatars that appear next to your comments. The thing is that each user has to sign up with Gravatar and upload an avatar in order for it to appear otherwise it shows up as a default (which you can specify as the webmaster in your image code or it will default to the Gravatar logo).

Unfortunately Gravatar is currently closed to sign ups because they're doing some work on the server. They'll probably be down through February (though already existing avatars are being served).

Not happy with the fact that the majority of the comments were showing up with just my default question mark avatar (seen to the right), meaning the didn't have one specified, I kept my eyes open for a solution.

I found two this morning, though they're both still in early development.

First there is VisiGlyphs.VisiGlyphs generates 9 block images based off of any criteria. You can us IP Addresses, Email Addresses or any other item that a user may have as a constant. The IP address item probably wouldn't work too well since a lot of people run through proxies and dial up users IP's change all the time. Using an email address of your comments that is encrypted though, which is what Gravatar uses, is a great option since most people will use the same email address to comment with. Below are two samplings of the types of "avatars" that are generated with VisiGlyphs.

visiglyphs1.jpg   visiglyphs2.jpg

They're pretty nice.

Then I stumbled upon MonsterID, an early stage development that is based off of a similar theme as VisiGyphs. MonsterID generates random avatars based off of user information, but this has a little twist. It uses different parts of a monster like selections of eyes, bodies, legs, arms and hair. With the user criteria it generates a unique random avatar for each user. The code is available at the link above.

I'm not too happy with the quality of the images so far, but they're really kind of funny. It's written in PHP and isn't totally complete, but I've managed to hack it together enough to get image caching in so that it's not pounding my server with a PHP request for each avatar image.

I implemented this in conjunction with Gravatar. To do this I edited my templates for the individual and comment preview in my blog software to generate the normal Gravatar image link using the encrypted email, but instead of having the default point to my default blank Gravatar image of the question mark, I had it point back to an image on my server that uses the same Gravatar ID. So if they have a Gravatar it shows otherwise it comes back to my server for a MonsterID. Now comes the tricky part for most of you.

What if the image doesn't exist? Well that's where web servers htaccess comes in. With htaccess you can redirect server queries for files. So if someone goes to a directory looking for an image and it isn't there you can have the server "rewrite" their URL to point them elsewhere.

My default return for Gravatar sent them back to an image named after the encrypted email with a png file extension. Using htaccess if the file doesn't exist I have it take the filename of the PNG and send that to the MonsterID PHP code as the "seed" for the image. This then generates the random avatar, saves it as the PNG file and returns the image to the users browser. So if the file doesn't exist it creates it and displays the avatar. If the file already exists, well then it doesn't have to run the script at all.

I dropped the files in a subdir named monsterid on my site, with the avatars directory underneath that.

Below is a little code if you want to implement this and needed a little help.

Here's the htaccess rewrite code if you put it in your Apache config file:

Simple explanation. line 2 checks if the request is in the monsterid directory. line 3 checks if the file requested exists and line 4 takes the name of the file minus the PNG extension and slaps it onto a url as the seed then redirects the browser there.

If you don't have access to the server conf file (a lot of people don't) you can put it in an .htaccess file in the same directory as the monsterid.php file. Below is all you need.

It does the same thing as the code above.

For caching you'll have to hack the monsterid.php file. Inside of the monsterid.php file you'll need to add the cacheing commands like noted below

Now your Gravatar HTML image code would look similar to this

Note how the PNG name in the default variable is named the same as the gravatar ID.

Looking at the htaccess above you'll see that it's taking that and using it as the seed to monsterid.php if the file isn't found.

Here is more information on MonsterID.

I actually implemented the VisiGlyphs version the exact same way at first, but then decided to use MonsterID because I'm silly like that.

If you're using Moveabletype there is a Gravatar plugin. I had to hack this up too because the Gravatar plugin was kicking an error in the comment preview template. Here's how I hacked it up.

Then inside your template you can use things like below wherever you want your avatars to appear.

It will replace the "MD5" word above with the encrypted email address automatically.

Pretty slick and it works.

Don't you just love technology? Maybe some day I'll tell you about that time I used a socket to pipe data to a custom C coded memory based database that generated cgi code on the fly that when run generated javascript and html for an administration interface that called other cgi to generate images and Excel files on the fly... but that fun 's for another day.

So now I've got MonsterID avatars running in the comments below. Do you want to see what your random avatar looks like?

Comment below and see!

This entry is in the following archive(s):

Next and Previous Entries:

Posted by Digger on January 22, 2007 12:32 PM (Permalink)

The Realm Daily Digest
Have Diggers Realm articles emailed to you daily!

Powered by FeedBlitz
See a sample of what a daily email looks like!


Testing..., I can't seem to get it to work on my own blog...

Posted by: tess on March 7, 2007 12:06 PM

Cool! Thanks! I'll implement it in C++ ;)

Posted by: kiusao on September 30, 2009 03:30 PM

Hmmm... Was wondering how to do something similar and I realized that it was because I hadn't edited my httaccess file. Thanks for this useful post.

Posted by: Maureen on June 14, 2011 11:30 AM

Also see these other great immigration resources

The Dark Side Of Illegal Immigration
The Dark Side Of Illegal Immigration

A 28 part detailed report on the negative impacts of illegal immigration.
Immigration Stance
Immigration Stance

Find out how your members of Congress voted on immigration issues.

The Dark Side Of Illegal Immigration
Read the free 28 part report The Dark Side of
Illegal Immigration

Includes facts, figures
and statistics.

  ... More Categories

Site Meter

Search Diggers Realm
Web Diggers Realm

The Realm Daily Digest
Have Diggers Realm articles emailed to you daily!

Powered by FeedBlitz
See a sample of the email!

ICE Tip Line

Capitol Switchboard

Your Representatives
On Immigration
Find out how your members of Congress voted on immigration issues at Immigration Stance.

Get The Latest Immigration News
Illegal Immigration News
The latest all in one place! Bookmark it today!

Knights Of The Realm

Home | Bio | Contact | Sitemap

Copyright © Dan Amato - 1996-Present