GravatarHack

This entry applies to the latest version of folderblog 3 (beta) only.

A gravatar, or globally recognized avatar, is quite simply an 80×80 pixel avatar image that follows you from site to site, appearing beside your name when you comment on gravatar enabled sites (as seen in these examples).

Signing up for a gravatar account is FREE, and all that's required is your email address. Once you've signed up you can upload your avatar image and soon after you'll start seeing it on gravatar enabled sites!

Avatars help identify your posts on web forums and weblogs, so why not on folderblog? Well, here's how you go about making this happen.

STEP 1: Add The Hack
Locate your fb.php file and find line 438, which looks like this:

$parts[3] = str_rot13(trim($parts[3]));

Replace it with something like this:

$grav_default = "http://www.mydomain.com/images/default.jpg"; 
// full URI to a default image; shown if no Gravatar or email available 
$parts[3] = str_rot13(trim($parts[3])); 
// decodes the email stored in filename_com.txt 
$parts[3] = "http://www.gravatar.com/avatar.php?gravatar_id=".md5($parts[3]). 
"&default=".urlencode($grav_default); 
// encodes email for Gravatar URI

STEP 2: Edit The Template
Locate your template_settings.php file, and find the $comment_format string variable. This is used to define how your comments will be shown, using the <#fbcomments#> tag.

Somewhere in this string variable, you might find another tag, <#fbemail#>, which shows the email address of a user that makes a comment (and bothered to include it). Don't worry if you don't, as not all templates use it. However, we're going to use it display the gravatar instead of the email address.

Keeping this as valid XHTML, change your $comment_format line to something like this:

$comment_format = '<div class="commentbody"><img src="<#fbemail#>" 
alt="Gravatar" class="gravatar" style="width:35px;height:35px;" /> 
<#fbauthor#><br /><small><#fbdate#></small><br /> 
<br/><#fbcomment#></div>'; 
// format for each comment

Tinker with it how you like, but note some key points in the above example. First, the <img> tag, which uses <#fbemail#> as the source URI. This will show the gravatar itself. Second, you need the alt attribute for this to validate as XHTML. Third, note the class attributes, so you can style this with CSS if you wish to. Finally, note the style attribute, which sets the width and height of the gravatar. By default, gravatars are 80x80 pixel images, which are pretty big. Make them smaller (but not larger!) here, if you want to. The rest of this line can be left as per your existing template, so things look roughly the same as before.

STEP 3: Style It
Remember that class attribute you added? You might want to use that to style your gravatar with some CSS rules. Locate your template_style.css and add something like this to the very end of it:

.gravatar { 
 float: left; 
 margin: 2px 10px 0px 0px; 
 border: 1px solid #000; 
 padding: 3px; 
 background: #fff; 
}

Actually, this can be whatever you like, but the big tip here is that float: left bit, which will shunt your gravatar to the left of any comment text. Have a play with it until you get something that works for you.

STEP 4: You're Done!
Well done, you just got your folderblog to use gravatars! To see them in action on a real live folderblog, you can check out this site.

-- Elwing