Reasons

  1. You do not have enough hosting space available
  2. You are tired by creating image placeholders and width/height changes on webpage
  3. You are struggling on how to manage uploaded and not uploaded profile images
  4. You are checking ways to get public profile images instead of adding load onto your hosting server
  5. You also want to auto-manage profile images that are uploaded and default image for non-availability of images
  6. You have wasted good amount of time on managing profile images

What are Gravatar images?

Gravatar API has been developed by Automattic, a team behind WordPress, one of the largest used CMSs on the web. Gravatar images are not special, but normal JPG images, with 80px by 80px default sizes, used either with <img> tag or can be used as background-image.

Basic Gravatar API

Gravatar API is based on user’s email hash value. The basic gravatar image request looks like

http://www.gravatar.com/avatar/HASH

where the ‘HASH’ is replaced with user’s email with md5 hash value, as given below. The .jpg extension is optional and not needed to mention in most of the cases.

<img src="http://www.gravatar.com/avatar/4525d8efchj4879634sdwrokj4556te6">
OR
<div style="background: url('<?php echo random_gravatar(150, $row['user_email']); ?>') no-repeat center"></div>

User’s fetched gravatar image

Custom Gravatar Image

There is a parameter in Gravatar API d={url} or default={url} where you can paste your custom image url. So that if gravatar image is not present, your custom image will be displayed instead. Obviously there are following few conditions to use default image:

  • MUST be publicly available (no localhost URL please!)
  • MUST be accessible via either HTTP or HTTPS
  • MUST have an image extension. The extensions allowed are: jpg, jpeg, gif, png
  • MUST NOT include a any query string (period!)

If above conditions are followed, your custom image can turn into gravatar image.

http://www.gravatar.com/avatar/<?php echo random_gravatar(150, "someone@example.com");?>&d=http://cdn.navayan.com/images/navayan-gravatar-logo.jpg
Custom gravatar

Custom gravatar

Gravatar Alternate Images

Well its not over! There are alternate gravatars image available if user does not have their image uploaded. Following alternate images are available:

Gravatar custom images

Gravatar alternate images

The ‘mm’ stands for ‘mystery-man’, which is mostely used. You can use any of these alternate images. This also requires the parameter d={alternate image name}.

<img src="http://www.gravatar.com/avatar/4525d8efchj4879634sdwrokj4556te6?d=mm">
<img src="http://www.gravatar.com/avatar/4525d8efchj4879634sdwrokj4556te6?d=retro">

Random Gravator

Following PHP code will show you how to use random gravator images as fallback. You can use javascript or any other server side programming language to achieve this.

<?php
  function random_gravatar( $size = 100, $email = "" ){
    $random_image = array('mm', 'identicon', 'monsterid', 'wavatar', 'retro'); 
    return "http://www.gravatar.com/avatar/". md5(strtolower(trim($email))) ."?r=g&s=" . $size . "&d=" . $random_image[array_rand($random_image)];
  }

  echo random_gravatar(150, "someone@example.com");
?>