Announcing EEGravatar.

I’ve written my first plugin in PHP for ExpressionEngine called EEGravatar. It’s basically a simple way of allowing for avatars in your entries or comments using a centralized avatar hosting service called, oddly enough, Gravatar. If you’d like an avatar image of your own for the comments, just go to the Gravatar site and register using the same email address you use to post comments here and upload an avatar no bigger than 80×80 pixels. Once it’s approved it’ll start showing up in your comments automatically.

If you’d like to use EEGravatar on your own ExpressionEngine blog you can download a copy by clicking here. There is also a plugin available for MovableType and WordPress. There’s also a hack for TextPattern.

Update: I’ve duplicated the docs included in the plugin in the extended entry.

Updated Update: Here’s a little Gravatar button I made if you want to use it:

Version Update: The plugin has been updated to EE Gravatar 1.2 for use with ExpressionEngine 1.1 and is now a single tag plugin. See the updated docs in the plugin or down below for examples.

Version Update: The plugin has been updated to EE Gravatar 1.3 (the Lisa-Jill version). Minor change to output for XHTML compliance.

Version Update 10/2/04: EEGavatar is now up to version 1.4. Can now use {name} in addition to email as the one required parameter for use in Member Profiles and other places where the email parameter breaks the plugin. See documentation below for more information.

Version Update 2/19/2009: The ever talented Leevi Graham contributed an update that adds in the parameters of {logged_in_user}, 1 and raw_md5=”“. The plugin also returns the new URL format which allows for .pngs and .jpgs.

Documentation

The EE Gravatar Plugin allows you to easily insert a “globally recognized avatar” image from Gravatar (http://www.gravatar.com/).

This plugin requires at a bare minimum one of two possible parameters depending on where you wish to use it. The first option is a user’s email address and the second option is a user’s screen name. The reason for this is so the plugin can be used in situations where one or the other parameter won’t return the proper result. It is recommended that you use email for comment and entry loops and name for display in member profile templates, but feel free to experiment. Here’s the two minimum required uses:


<img src="{exp:gravatar email="{email}"}" /> -- For use in comment or entry loops.

<img src="{exp:gravatar name="{name}"}" /> -- For use in templates such as Member Profiles where email won't work as expected.

== OPTIONAL PARAMETERS ==

default=“http://www.somesite.com/someimage.jpg”

Defines a default avatar if there isn’t one associated with the email address or if it exceeds the rating.

rating=”[G | PG | R | X]”

Allows you to limit gravatars to the appropriate rating. Anything exceeding the rating will use the default (if supplied) or not display.

size=”[1..80]”

Allows you to define how big the gravatar will be in pixels. Any size other than 80 will cause the original gravatar image to be downsampled using bicubic resampling before output

border=”[hex color]”

Puts a border of the specified color around the gravatar.

== POSSIBLE EXAMPLES ==

Here’s a few examples that you might use:


<img src="{exp:gravatar email="{email}" rating="PG"}" />

Only displays gravatars of PG rating or lower.


<img src="{exp:gravatar email="{email}" rating="R" size="40" border="FF0000"}" />

Displays 40×40 pixel gravatars of R rating or lower with a red border around them.


<img src="{exp:gravatar email="{email}" size="70" default="http://www.somesite.com/someimage.jpg"}" alt="Picture of {name}" title="{name}" class="avatar" />

Displays gravatars of 70×70 pixels or a default graphic for users without a gravatar. Puts the user’s name in the alt and title tags and styles the image using a class called “avatar.”


<div class='profileTitle'><img src="{exp:gravatar name="{name}" size="80" rating="R"}" border="0" style="float: left; margin: 0; padding: 6px;" alt="{name} pic" title="{name}" />{name}</div>
<
p>{lang:member_group}&nbsp; <b>{member_group}</b></p>

The above is a snippet of code from my Public Member Profile template showing how to insert a gravatar into the member listings for your site.

== Change Log ==

V1.5 – Added {logged_in_user} and 1 parameter as alternate to les@stupidevilbastard.com & {name} for times when you just want to show the logged in users gravatar.
    – Added raw_md5=”” parameter to return the raw md5 encoded version of the email and not the whole gravatar url.

V1.4 – Added {name} parameter as alternate to les@stupidevilbastard.com for use in situations where les@stupidevilbastard.com breaks the plugin such as Member Profiles.

V1.3 – Changed & to & for XHTML validation compliance.

v1.2 – Made les@stupidevilbastard.com into a parameter along for single tag usage for EE 1.1 release.

v1.1 – Minor bug fix.

v1.0 – Initial Release

87 thoughts on “Announcing EEGravatar.

  1. Les,
    Congrats! I have to upload my avatar, and then get the MT plugin workin’ over at the Asylum

    Not bad for a few hours work tho’ huh?

  2. Cool. I’ve uploaded mine and I’m waiting for it to be OK’d. It bothers me a bit that they need to be OK’d though. Where do they draw the line?

  3. It’s not an approval I believe, but rather a rating.  That way people who have g-rated sites can restrict the gravatars to only showing grated ones.  Makes it more globally ‘safe’. =)

  4. Lisa’s right. They don’t seem to draw a line as to what you can use, but they do apply a rating to it. I can see where that might still cause some disputes, but they make it clear they hold final say on all ratings.

    Now I need to fix the layout of SEB so that the containing boxes for the comments expands properly to hold the floating icon. There’s a simple fix that works great in Mozilla, but causes IE to spaz out. I need to rip the site apart and rebuild it anyway I suppose.

  5. Ya know days like this I hate MT

    I started installing it into Movable Type, but with it’s convert linebreaks functionality, things get all wonky wink

    Glad to see you got it running in EE w/out a problem!

    -j

  6. Hmmm. Not sure why that would be a problem. EE does the convert line break as well as convert to XHTML and it doesn’t pose a problem.

  7. Wow, that is interesting. I wouldn’t have thought it would have applied it outside of the confines of the $MTCommentBody$ tag. You’d think if it were applying it to everythign between the MTComment loop it would screw up your layout even more.

  8. Well, I’ve moved the gravatars to the right of the comment, put in a min-height for the comment div to ensure it’s big enough to hold the image without overlap, and modified them so they’re clickable providing a link back to the blog of the commenter in question.

    Given enough time to bang my head against the wall, I eventually knock some sense into it.

  9. Cool! I can’t wait to see mine in! I have been wanting to do this for a while. Just haven’t found a good way of doing it yet. I guess I have now. smile

  10. Lisa’s avatar is scaring me a bit. OK, I understand the rating thing better now. I stand corrected. I have no problem with a rating system, it’s actually a great idea. I guess until you figure out the part about expanding the box to fit the avatar, I’ll just have to write more so you don’t notice it.

    captcha = child Ain’t that the truth.

  11. OK, I give… What do I need to do to get my rated avatar to show up? How does the site know which avatar to put on which comment?

  12. Dave M. – did you get mail back from Gavatar.com yet? Until you do, you won’t see your avatar on Les’ site. Mine just got approved. It’s not automatic at all. Mine is “G” rated.

  13. Dave M. – your avatar is stored based on your email address. So make sure your email address is the same on the sites that use GAvatar. I made mine for my gmail address, but I have about 3 more addresses I post with, depending on the site.

  14. Sue: Yea, I got my rating back. I even changed my e-mail address to match the address I used with GRavatar. They still are not showing up. I thought I had before, but I forgot about needing to put the password in. Now it is the same, yet I’m still not seeing it. Unless when I post this comment it will show up.

    I’m not all that sure I like the idea of using my e-mail address for the link to my avatar. I use different addresses all over the place. One for each site I comment on. That would be quite a few GRavatar’s plus I would be giving GRavatar the addresses I use to determine if I am getting spam from that site. I wouldn’t know if the site is spilling my e-mail address or GRavatar.

    They should use and ID number that can be saved on the site like avatars can now.

    I think I’ll stick with having the user send a link to the avatar they want to use and display that instead.

    Shame really. This had some good potential…

  15. Ya know, I gave up on this for a couple of reasons… one the MT being a bitch about layout issue, and more importantly, as I was going through my MT backend DB… almost no one enters a real email address so whats the point wink

    -j-

  16. Les – Is this going to effect the avatars in the forums as well?

    Dave M. – I’m with you.  I think this a neat feature but I’m not really thrilled about having a centralized e-mail address in order to make use of this.  A linked Gravatar ID would be better.

  17. Les, in order for the “default” attribute to work properly, you should be url encoding the passed in url. In PHP you can do it with urlencode().

    For those that are interested, email addresses are used as the primary key for gravatars for several reasons. Foremost, by basing it on email address, they can be implemented on weblogs without any additional information requirements. This means past entries will also get gravatars, if the proper email address was given. I made gravatars as uncomplicated as possible, to ease implementation. Creating a separate ID that would have to be given on comment forms would require much more work for implementors, increasing the barrier to entry, and making the whole system a big hassle. Additionally, for sites that use something like TypeKey for user authentication, gravatars will also automatically become authenticated.

    If you are worried about anonymity or spam, you can always create a yahoo or hotmail account to use as your email address on gravatar. As the privacy policy states, I will never spam you, nor will I sell, distribute, or otherwise make any emails available to any third parties.

  18. Spocko, I’d imagine it’s probably case sensitive as I’m not doing anything to force it one way or the other at this point. Email addresses are supposed to be lowercase only and currently the plugin assumes it is, though I could put in code to force it to lowercase before sending it to the folks at Gravatar if necessary. I don’t recall if the Gravatar site said anything about their side being case sensitive, but I’ll check.

    DeadScot, for the moment this won’t have any impact on the forum avatars as those are built into that package. I have the same issues as I also use multiple email addresses and I think there may be some room for improvement in that regard, but as Tom points out this is currently the simplest solution. I don’t recall where I read it, but someone brought up the idea of developing a non-centralized distributed avatar solution that sounded like it might be a neat idea even if I haven’t a clue how to go about doing it. It would be fun to write a plugin for, though.

    Etan, it’s simple enough: .avatar {float: right; margin-top: 2px; margin-left: 10px;} and then I added a min-height: 84px; to the comment DIV to make sure it’s always tall enough to hold the avatar up to the maximum size allowed, though I suppose if you were using a smaller sized avatar you could decrease the min-height as necessary.

    Chris, thanks. Had I known you were working on one as well I probably would’ve waited for some other project, but once I got started on it it became a little mini-obsession and I had to finish it.

    Tom, I actually did use the urlencode function and that seems to have been the problem as it wasn’t encoding properly for reasons I’m not sure about. When I took out the urlencode and just passed along the raw URL it started working so for the moment my plugin isn’t encoding the URL at all. Let me know if that’s a problem, but your service seems to be dealing with it just fine.

  19. Spocko, I edited your email address here and made it lowercase and it’s working now so the answer is, yes – it is case sensitive.

    I’ll modify the plugin so it forces lowercase in the future.

  20. It’s really neat to compare what I imagined everyone would do with the gravatar actually chosen.  Cool feature, Les!

    ‘cept seeing my gravitar too many times on a thread will be a clue for me to quiet’n down a bit ‘n let others have a say.

  21. Tom Werner created a new version of the MT plugin for gravatar for those of us who were kinda in hell.

    I now have them enabled on my site, and Loving the way they came out smile

    Now all i need is a better avatar… this is just one I grabed because it was handy and the right size … feh!

    -j-

  22. Geekmom’s and DOF’s Gravatars are exactly how I had the two of them pictured in my mind all along.

    captcha = ‘les’  Now isn’t that special.

  23. I’ve been wondering how long it would be before someone started noticing I had made changes to the captcha word list to include some items related to the blogs here. grin

  24. That’s because Tek IS hot. In my fevered dreams she actually stops to give me the time of day when I ask.

    wink

  25. Looks cool… Have you emailed Gravatar about your plugin? they’re not listing it.

    Its all implemented all i need now is for someone to test it

    DJ

  26. I’ve spoken with Tom about it and he’s offered to include info about it on the Gravatar site (I even sent him the little button I whipped up for it over in the sidebar).

    I’m holding off on having him list it at the moment only because Chris Ruzin has developed a version of this plugin as well and has already managed to implement a caching system into it whereas I’m still learning how to do such a thing. Once Chris gets the bugs worked out of his version I think it will end up supplanting my own as the superior option so rather than have Tom go through the trouble of listing mine only to have Chris’ replace it I’m going to hold off until Chris finishes his and see how he wants to handle things.

  27. Interesting… my avatar was given a PG rating.  For those who might not know, She’s Kali, a Hindu goddess – and this version is her Crone (death) aspect.  I’m tempted to submit one of the Virgin Mary just to see what rating the Christian Crone gets (”… now and at the hour of our death…”).

    (“distance” – what I need to put between me & this keyboard, and get my ass to work!)

  28. Well, she is stomping on someone while holding some poor fellow’s head in one of her hands. I suppose it could be considered a bit on the violent side.

    grin

  29. Oh yeah!

    Spocko wrote:

    Wow! Tek looks hot![/Quote]
    Les wrote:

    That’s because Tek IS hot. In my fevered dreams she actually stops to give me the time of day when I ask.

    I’d read Tek’s blog more often but they only deliver dry ice here once a week.

    captcha = ‘couple’  One can dream.

  30. Thanks guys.

    You are giving me a complex. wink

    I need to see if I want to try this on my blog.  I have so many plug-ins however that I getting a bit para.

    On top of it one of my PC’s is not acting right and I think I need to fix it.

  31. hmmmm… I have no part in this conversation… oh well lets see if my wholesome G-rated Gravatar is working, eh?

  32. Thats a G? Is a monkey holding a gun. How is that less harmful than a God or half a stuck up finger?

  33. Is a monkey holding a gun. How is that less harmful than a God or half a stuck up finger?

    Well, Hmm… Bush is a chimp … therefore all monkeys are to be worshiped and praised here in A’Mor’ica

    Wait! There’s Bush’s WMD—- Weapon of Monkey Distruction!!!

    Back to your regularly scheduled medication … big surprise

    -=j=-

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>