Tweaking Your Blog: Customizing Avatars

Relevant WordPress versions: 2.5+. These instructions are invalid for WordPress versions less than 2.5 as built-in avatar functionality did not yet exist.

Okay, now that you’ve got your blog hooked up with avatars, making use of WordPress’ built in gravatars feature… Now what?

So your avatars are 96 pixels square… but what if that’s way too big (or small)?

And what about users who don’t have a Gravatar account yet… Do they have to be content receiving a bland default image? Isn’t the point of avatars to make users visually uniquely identifiable?

Size Doesn’t Matter

Unless you have already tweaked it on your own, the avatars code in your comments.php file should still look like this: [code]<?php echo get_avatar($comment); ?>[/code]

And that code outputs avatars which are 96 pixels square. But let’s be honest, you want more choice than that. Luckily for you, that choice exists, and it’s as easy as dropping a number into our [code]get_avatar()[/code] call.

• Want 16 pixel avatars (the same size as favicon / bookmark icons)?
  [code]<?php echo get_avatar($comment, 16); ?>[/code]
• Want 32 pixel avatars?
  [code]<?php echo get_avatar($comment, 32); ?>[/code]
• Want 64 pixel avatars?
  [code]<?php echo get_avatar($comment, 64); ?>[/code]
• Want 80 pixel avatars?
  [code]<?php echo get_avatar($comment, 80); ?>[/code]
• Want 512 pixel avatars (this is the max size)?
  [code]<?php echo get_avatar($comment, 512); ?>[/code]

Easy, no? I’m not sure why you would ever want to use avatars that are 512 pixels square, but the option is there. I prefer anything from 80 to 100 myself, but the layout and feel of your site may require something much smaller or even a bit bigger. Don’t be afraid to experiment or get feedback from your readers regarding what they like best. Remember, you have the luxury of reading all of your content and comments via the admin panel; your readers are the ones who will be on the site reading, and they will be face to face with the avatars much more than you are.

Daring Defaults…

…because in all honesty, this image gets just a tiny bit old:

The good folks at Gravatar & WordPress, however, have provided us a super easy way to switch that image out for something else entirely.

Again, we’ll be tweaking the same bit of avatar code, and we’ll be assuming a default size of 96 pixels; however, this time, we’ll be adding something: [code]<?php echo get_avatar($comment, 96, $default); ?>[/code]. It is that third added parameter, [code]$default[/code], that we’ll be playing with.

First, I’ll show you how to add any image you want as the default avatar (best results will be achieved with a square image). Like the gray silhouette image above, your chosen default image will be shown for anyone who does not have a gravatar linked to the email address they are using while commenting.

[code]<?php echo get_avatar($comment, 96, 'http://address_to_image/'); ?>[/code]

Yes, it really is that simple. Say, for instance, you want all of your default-avatar commentators to be reminded that, even though they do not have a gravatar, they can still live long and prosper, use this code:

[code]<?php echo get_avatar($comment, 96, 'http://fellowship-hall.com/images/avatars/gallery/Star%20Trek%20-%20TOS/Spock5.gif'); ?>[/code]

Suppose, though, that you don’t want the majority of your commentators to have the same avatar; you want avatars — even though they are default — to be uniquely theirs. Well, have it your way with one of the following three options (again, assuming a 96 pixel size, which you are free to adjust as needed):

• Wavatars:
  [code]<?php echo get_avatar($comment, 96, ‘wavatar’); ?>[/code]
• MonsterIDs:
  [code]<?php echo get_avatar($comment, 96, ‘monsterid’); ?>[/code]
• Identicons:
  [code]<?php echo get_avatar($comment, 96, ‘identicon’); ?>[/code]

The beauty of this method is that the wavatar, monsterID, or identicon which is generated for a user is generated from the unique hash of their email address. In other words, no matter how many sites they comment on which are using, for example, identicon avatars, their avatar will look the same!

And because collisions (or duplicates) of hashes are so rare, no two users should ever have the same default avatar show up if you choose to use one of those three methods.

Wrap Up

I have heard talk that in the next major version of WordPress (2.6), the option to select wavatars, monsterIDs, or identicons may be built in to the Settings -> Discussion panel of the admin area; if that is the case, perhaps we may also some day see an option for selecting the size as well. If those things come to pass, you’re welcome to ignore this post as it will no longer be relevant.

Still, until then, I hope this has given you some ideas of how easily you can spice up the avatars of your site, setting them apart from other sites which may be using strictly vanilla avatars.

I didn’t even touch style sheets, either, which can be used to add borders and all sorts of other effects to your avatars. Once you get into styling, though, the possibilities are quite limitless, and I simply invite you to dive into the wealth of information about styling images available via Google!