dbaf28ad98
- Add tag frontmatter to all 6 blog articles (3 articles × 2 locales) - Complete i18n.json with all 26 text keys for en-gb and zh-hans - Install and configure Tailwind CSS v4 with PostCSS - Create Tags component using Tailwind utility classes - Inject Tags into DocLayout via theme override - Fix zh-hans homepage icon extension
2.3 KiB
2.3 KiB
title, tags
| title | tags | ||
|---|---|---|---|
| Use Gravatar in First-party Systems |
|
Gravatar (Globally Recognised Avatar) is a service that associates avatar images with email addresses. When a user registers on your platform with their email, you can display their Gravatar as a default avatar without building your own image upload and storage pipeline.
How It Works
Gravatar exposes a simple HTTP endpoint. You compute the SHA256 hash of the user's lowercased and trimmed email address, then embed it in an image URL:
https://gravatar.com/avatar/<hash>
Generating the Hash
Node.js
import { createHash } from "node:crypto";
const email = "user@example.com".trim().toLowerCase();
const hash = createHash("sha256").update(email).digest("hex");
const url = `https://gravatar.com/avatar/${hash}`;
Python
import hashlib
email = "user@example.com".strip().lower()
hash = hashlib.sha256(email.encode()).hexdigest()
url = f"https://gravatar.com/avatar/{hash}"
Shell
echo -n "user@example.com" | tr '[:upper:]' '[:lower:]' | sha256sum | cut -d ' ' -f1
URL Parameters
The /avatar/ endpoint accepts several query parameters to customise the result:
| Parameter | Description | Example |
|---|---|---|
s |
Size in pixels (default: 80) | ?s=200 |
d |
Default image when no Gravatar is found | ?d=identicon |
r |
Content rating (g, pg, r, x) |
?r=g |
Default Image Options (d)
identicon— a geometric pattern based on the hashrobohash— a generated robot imageretro— an 8-bit style pixelated facemonsterid— a generated monster cartoonwavatar— a generated facemp— a generic silhouette (Mystery Person)blank— a transparent PNG- A custom URL (must be URL-encoded)
Putting It Together
<img
src="https://gravatar.com/avatar/a3b4c5d6e7f8?s=160&d=robohash&r=g"
alt="User avatar"
width="160"
height="160"
/>
Always pass the d parameter to avoid broken images for users who have not set up a Gravatar. identicon and
robohash are popular choices because they generate a unique, recognisable image for every hash.