How to Implement Gravatar in Filament: Step-by-Step Guide

Implementing Gravatar in Filament is a simple process that allows your users to display their avatars quickly and efficiently. In this tutorial, I'll show you how to do it in just a few steps.

1. Modifying the User Model

The first step is to modify the User model in your Laravel project. We'll add the necessary interfaces and the function to get the avatar from Gravatar.

use Filament\Models\Contracts\FilamentUser;
use Filament\Models\Contracts\HasAvatar;

class User extends Authenticatable implements FilamentUser, HasAvatar
{
    public function getFilamentAvatarUrl(): ?string
    {
        $hash = md5(strtolower(trim($this->email)));
        return "https://www.gravatar.com/avatar/{$hash}.jpg?s=80&d=mp";
    }
}

2. Code Explanation

• FilamentUser and HasAvatar interfaces: These interfaces are added to the User model to enable integration with Filament and avatar support.
• getFilamentAvatarUrl() function: Inside this function, the user's email is obtained, converted to an MD5 hash (as required by Gravatar), and the URL for the avatar image is generated.

You can customize the size of the image that Gravatar will return by changing the s parameter in the URL. For example, s=80 indicates a size of 80x80 pixels.

3. Verification

That's it! Once you implement these changes and log back into your Filament dashboard, you'll see that the Gravatar image is displayed correctly for each user.

Conclusion

Implementing Gravatar in Filament is not only easy, but it also improves the user experience by allowing custom avatars without the need to store images on your server. If you have any questions or need further customization, feel free to experiment with the Gravatar URL to adjust it to your needs.