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