Tweaking Your Blog: Customizing Avatars

Rel­e­vant Word­Press ver­sions: 2.5+. These instruc­tions are invalid for Word­Press ver­sions less than 2.5 as built-in avatar func­tion­al­ity did not yet exist.

Okay, now that you’ve got your blog hooked up with avatars, mak­ing use of Word­Press’ built in gra­vatars fea­ture… Now what?

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

And what about users who don’t have a Gra­vatar account yet… Do they have to be con­tent receiv­ing a bland default image? Isn’t the point of avatars to make users visu­ally 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 out­puts avatars which are 96 pix­els square. But let’s be hon­est, you want more choice than that. Luck­ily for you, that choice exists, and it’s as easy as drop­ping a num­ber into our [code]get_avatar()[/code] call.

• Want 16 pixel avatars (the same size as fav­i­con / book­mark 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 pix­els square, but the option is there. I pre­fer any­thing from 80 to 100 myself, but the lay­out and feel of your site may require some­thing much smaller or even a bit big­ger. Don’t be afraid to exper­i­ment or get feed­back from your read­ers regard­ing what they like best. Remem­ber, you have the lux­ury of read­ing all of your con­tent and com­ments via the admin panel; your read­ers are the ones who will be on the site read­ing, and they will be face to face with the avatars much more than you are.

Dar­ing Defaults…

…because in all hon­esty, this image gets just a tiny bit old:

The good folks at Gra­vatar & Word­Press, how­ever, have pro­vided us a super easy way to switch that image out for some­thing else entirely.

Again, we’ll be tweak­ing the same bit of avatar code, and we’ll be assum­ing a default size of 96 pix­els; how­ever, this time, we’ll be adding some­thing: [code]<?php echo get_avatar($comment, 96, $default); ?>[/code]. It is that third added para­me­ter, [code]$default[/code], that we’ll be play­ing 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 sil­hou­ette image above, your cho­sen default image will be shown for any­one who does not have a gra­vatar 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 sim­ple. Say, for instance, you want all of your default-avatar com­men­ta­tors to be reminded that, even though they do not have a gra­vatar, they can still live long and pros­per, use this code:

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

The result? It’s beautiful:

Sup­pose, though, that you don’t want the major­ity of your com­men­ta­tors 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 fol­low­ing three options (again, assum­ing a 96 pixel size, which you are free to adjust as needed):

• Wavatars:
  [code]<?php echo get_avatar($comment, 96, ‘wavatar’); ?>[/code]
• Mon­sterIDs:
  [code]<?php echo get_avatar($comment, 96, ‘mon­sterid’); ?>[/code]
• Iden­ti­cons:
  [code]<?php echo get_avatar($comment, 96, ‘iden­ti­con’); ?>[/code]

You may be won­der­ing what these options look like, and under­stand­ably so! For your plea­sure, then, I coded up this quick lit­tle demon­stra­tion page which shows off 100 of each type of gra­vatar (fair warn­ing that it may take a while to load for dial-up users as there are 300 images total which will be loading).

The beauty of this method is that the wavatar, mon­sterID, or iden­ti­con which is gen­er­ated for a user is gen­er­ated from the unique hash of their email address. In other words, no mat­ter how many sites they com­ment on which are using, for exam­ple, iden­ti­con avatars, their avatar will look the same!

And because col­li­sions (or dupli­cates) 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 ver­sion of Word­Press (2.6), the option to select wavatars, mon­sterIDs, or iden­ti­cons may be built in to the Set­tings -> Dis­cus­sion panel of the admin area; if that is the case, per­haps we may also some day see an option for select­ing the size as well. If those things come to pass, you’re wel­come to ignore this post as it will no longer be relevant.

Still, until then, I hope this has given you some ideas of how eas­ily you can spice up the avatars of your site, set­ting 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 bor­ders and all sorts of other effects to your avatars. Once you get into styling, though, the pos­si­bil­i­ties are quite lim­it­less, and I sim­ply invite you to dive into the wealth of infor­ma­tion about styling images avail­able via Google!