How to Customize Default Gravatar Images on Your Website: A Simple Trick

Have you tried using gravatar on your website? but then you don't want to use the default gravatar image if email don't have gravatar. Now here is a trick that you must know if you want to do something about it.

First, we should know how to get a gravatar, in this example code bellow is from gravatar website. We can use this function to get the gravatar image link from any email.

// EXAMPLE USING JAVA SCRIPT
const sha256 = require( 'js-sha256' );

function getGravatarURL( email ) {
  // Trim leading and trailing whitespace from
  // an email address and force all characters
  // to lower case
  const address = String( email ).trim().toLowerCase();

  // Create a SHA256 hash of the final string
  const hash = sha256( address );

  // Grab the actual image URL
  return `https://www.gravatar.com/avatar/${ hash }`;
}

// EXAMPLE USING PHP
function get_gravatar_url( $email ) {
  // Trim leading and trailing whitespace from
  // an email address and force all characters
  // to lower case
  $address = strtolower( trim( $email ) );

  // Create an SHA256 hash of the final string
  $hash = hash( 'sha256', $address );

  // Grab the actual image URL
  return 'https://www.gravatar.com/avatar/' . $hash;
}

These functions will return a link of the image. If you try to open this on your browser, it will show you a gravatar logo instead because this email example@example.com don't have a gravatar image yet.

get_gravatar_url('example@example.com');
// output: https://www.gravatar.com/avatar/31c5543c1734d25c7206f5fd591525d0295bec6fe84ff82f946a34fe970a1e66

We can then use this link in our image like so.

<img src="https://www.gravatar.com/avatar/31c5543c1734d25c7206f5fd591525d0295bec6fe84ff82f946a34fe970a1e66" alt="This is an avatar" />

But the problem is, we don't want to show the gravatar logo if gravatar does not exist. To do that we have to think of a way to make it fail and catch that failure. So how? by adding a query param d=404 in the end like so.

<img src="https://www.gravatar.com/avatar/31c5543c1734d25c7206f5fd591525d0295bec6fe84ff82f946a34fe970a1e66?d=404" alt="This is an avatar" />

This will going to fail and no image will show up. And will render something like this.

That great! we want that to fail if email does not have gravatar. You can try other email too to check it yourself.

Next step we will use onerror property on our img tag that way we can do something to our image if something happens. In this example code bellow we will change the src to our own default image if it fails. We will use this image as our default https://i.imgur.com/S2nhH18.png .

<img 
  width="50" 
  src="https://www.gravatar.com/avatar/31c5543c1734d25c7206f5fd591525d0295bec6fe84ff82f946a34fe970a1e66?d=404" 
  alt="This is an avatar" 
  onerror="this.src = 'https://i.imgur.com/S2nhH18.png'"
/>

As you can see on the example, we change the src to our own default image if the source does not exist.

Check the source code I created here: https://playcode.io/1905487

What is Gravatar?

Gravatar stands for Globally Recognized Avatar. It's a free service that lets you create a profile and associate an avatar image with your email address.

Here's how it works:

• You upload an image and create a profile on Gravatar.

• Whenever you comment on a website that uses Gravatar, your chosen image will appear next to your name.

This way, you can have a consistent online identity across different websites. It's especially useful for websites that allow comments, like blogs and forums. Gravatar is also owned by Automattic, the company behind WordPress.com, so it's widely integrated with WordPress websites.

Should You Create or set Your Own Gravatar Profile

Whether or not you should create your own Gravatar depends on your online activity and goals. Here's a breakdown of the pros and cons to help you decide:

Pros:

• Brand consistency: A Gravatar creates a recognizable image associated with you across the web, especially on sites where you comment or interact. This can help people remember you and build your online presence.

• Convenience: Having a Gravatar saves you the hassle of uploading a separate avatar for each website you use.

• Professionalism: A professional-looking Gravatar can add credibility to your online comments and interactions.

Cons:

• Privacy concerns: Some people might not be comfortable sharing their image online, especially if their email address is associated with personal accounts.

• Limited control: You can't control which websites use Gravatar or how they display your image.

• Unnecessary for some: If you don't frequently comment on websites or have a limited online presence, a Gravatar might not be necessary.

Overall, creating a Gravatar is a good idea if:

• You frequently comment on blogs, forums, or other websites.

• You want to build a recognizable online brand.

• You're comfortable sharing your image online.

If you're unsure, you can always create a Gravatar using an image that doesn't necessarily include your face, like an illustration or logo.