Hovercards: Handle default header image

jcheringer · jcheringer · commit d2ad3c41ee30 · 2025-08-13T16:03:47.000-03:00
diff --git a/web/packages/hovercards/README.md b/web/packages/hovercards/README.md
@@ -240,6 +240,7 @@ interface ProfileData {
     jobTitle?: string;
     company?: string;
     headerImage?: string;
+    hideDefaultHeaderImage?: boolean;
     backgroundColor?: string;
     verifiedAccounts?: Record< 'label' | 'icon' | 'url' | 'type', string >[];
     contactInfo?: ContactInfo;
diff --git a/web/packages/hovercards/src/core.ts b/web/packages/hovercards/src/core.ts
@@ -55,6 +55,7 @@ export interface ProfileData {
 	jobTitle?: string;
 	company?: string;
 	headerImage?: string;
+	hideDefaultHeaderImage?: boolean;
 	backgroundColor?: string;
 	verifiedAccounts?: VerifiedAccount[];
 	contactInfo?: ContactInfo;
@@ -326,6 +327,7 @@ export default class Hovercards {
 			jobTitle,
 			company,
 			headerImage,
+			hideDefaultHeaderImage,
 			verifiedAccounts = [],
 			payments,
 			contactInfo,
@@ -402,7 +404,9 @@ export default class Hovercards {
 
 		hovercard.innerHTML = `
 			<div class="gravatar-hovercard__inner">
-				${ headerImage ? `<div class="gravatar-hovercard__header-image"></div>` : '' }
+				<div class="gravatar-hovercard__header-image">
+					${ ! headerImage && ! hideDefaultHeaderImage ? `<img src="${ escUrl( avatarUrl ) }" alt=""/>` : '' }
+				</div>
 				<div class="gravatar-hovercard__header">
 					<a class="gravatar-hovercard__avatar-link" href="${ trackedProfileUrl }" target="_blank">
 						<img class="gravatar-hovercard__avatar" src="${ escUrl( avatarUrl ) }" width="104" height="104" alt="${ username }" />
diff --git a/web/packages/hovercards/src/style.scss b/web/packages/hovercards/src/style.scss
@@ -100,6 +100,14 @@ $font-sf-pro: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Robo
 		height: 75px;
 		width: 100%;
 		transform: translateX(-50%);
+		overflow-y: hidden;
+
+		img {
+			width: 100%;
+			object-fit: cover;
+			transform: translateY(-30%);
+			filter: blur(40px);
+		}
 	}
 
 	.gravatar-hovercard__header {
