Newscoop 3 Cookbook

Profile pictures: Gravatar, Facebook, Twitter

Displaying profile pictures alongside comments can make your article a more personal and engaging space. Below you can find ways to call in images from Gravatar, Facebook or Twitter.

Gravatar

Gravatar is a widely used service, providing profile images based on an e-mail address. You can use this service in comments to provide images alongside a comment. If an email is given by the user, the standard image (80 x 80 pixel) is retrieved by calling PHP from the template like this:

{{ assign var="profile_email" value=`$gimme->comment->reader_email` }}
{{ php }}
$profile_email = $this->get_template_vars('profile_email');
print "<img src=\"http://www.gravatar.com/avatar/".md5( strtolower( trim( $profile_email ) ) )."\" />";
{{ /php }}

If the user does not have a Gravatar account, the default Gravatar logo is displayed. You can change the size of the image provided by adding a parameter as shown below. Gravatar images are always square. The following example will deliver an image which is 200 x 200 pixels in size:

{{ assign var="profile_email" value=`$gimme->comment->reader_email` }}
{{ php }}
$profile_email = $this->get_template_vars('profile_email');
print "<img src=\"http://www.gravatar.com/avatar/".md5( strtolower( trim( $profile_email ) ) )."?s=200\" />";
{{ /php }}

Facebook

Calling an image from Facebook is very straightforward. The example below calls in the Sourcefabric image:

<img src=\"http://graph.facebook.com/Sourcefabric/picture\" />

In order to make this work with comments, you could use the nickname input field and label it something like "Facebook name (optional)". The code below checks if an image is available on Facebook, and if not, does not display anything.

{{ assign var="profile_fbname" value=`$gimme->comment->nickname` }}
{{ php }}
$profile_fbname = $this->get_template_vars('profile_fbname');
if (!preg_match("/error/i", file_get_contents("http://graph.facebook.com/".$profile_fbname."/picture"))) {
  print "<img src=\"http://graph.facebook.com/".$profile_fbname."/picture\" />";
}
{{ /php }}

If you are providing a reader registration form for your publication, you can add a custom field to the user profile for the Facebook name. In the template you can check if the user is logged in, and call the image from the Facebook name provided in the user profile.

Twitter

The easiest way to retrieve the profile image from Twitter goes like this:

<img src="http://img.tweetimag.es/i/Sourcefabric" />

You can make this work with comments by using the nickname input field and labelling it something like "Twitter name (optional)". To display the image, include the following code:

{{ assign var="profile_twname" value=`$gimme->comment->nickname` }}
{{ php }}
$profile_twname = $this->get_template_vars('profile_twname');
print "<img src=\"http://img.tweetimag.es/i/". $profile_twname ."\" />";
{{ /php }}

You might want to check if the name provided actually does exist:

{{ assign var="profile_twname" value=`$gimme->comment->nickname` }}
{{ php }}
$profile_twname = $this->get_template_vars('profile_twname');
$api_call = "http://twitter.com/users/show/".$profile_twname.".json";
$results = json_decode(file_get_contents($api_call));
if (!empty($results)) {
print "<img src=\"".$results->profile_image_url."\" />";
}
{{ /php }}