How to Customize Default Gravatar Images on Your Website: A Simple Trick
Tags: webdev, javascript, beginners, tutorial
Published: 2024-06-14 07:24:12

Let us look at how we can use our own default `img` when using gravatar and if email don't have a gravatar `img`. You will learn how you can handle image link errors.

------

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.

```js
// 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 }`;
}
```

```php
// 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.

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

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

```html
<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.

```html
<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.

![](https://i.imgur.com/X3WU4O3.png)

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` .

```html
<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](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](http://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.

---

If you enjoy this article and would like to show your support, you can easily do so by buying me a coffee. Your contribution is greatly appreciated!

[![Jenuel Ganawed Buy me Coffee](https://img.buymeacoffee.com/button-api/?text=Buy%20me%20a%20coffee&emoji=%E2%98%95&slug=jenuel.dev&button_colour=FFDD00&font_colour=000000&font_family=Inter&outline_colour=000000&coffee_colour=ffffff)](https://www.buymeacoffee.com/jenuel.dev)