add member photos to member cards

Author: SimonPhumin

apps/blog/src/routes/about/+page.svelte

@@ -40,7 +40,7 @@
 				</div>
 			{/if}
 			{#if about.members.length >= 1}
-				<div class="grid grid-cols-1 md:grid-cols-2 gap-8 w-full">
+				<div class="grid grid-cols-1 md:grid-cols-2 gap-8 w-full items-stretch">
 					{#each about.members as member, index (member.name)}
 						<div use:animate={{ delay: 300 + index * 100 }}>
 							<MemberCard {member} />

packages/ui/src/components/MemberCard.svelte

@@ -1,20 +1,27 @@
 <script lang="ts">
 	import type { Member } from '@a11y.cool/data';
 	import { Globe, LinkedinLogo } from 'phosphor-svelte';
+	import { buildImageUrl } from '@a11y.cool/utils';
 
 	let { member }: { member: Member } = $props();
+
+	// Get API URL from environment
+	const apiUrl = import.meta.env.VITE_API_URL;
+
+	// Build image URL with format detection
+	const imageUrl = $derived(member.image ? buildImageUrl(member.image.id, apiUrl) : null);
 </script>
 
 <article
-	class="rounded-3xl shadow-card border border-border-input bg-background-alt p-6 flex flex-col items-start gap-4 min-h-[320px]"
+	class="rounded-3xl shadow-card border border-border-input bg-background-alt p-6 flex flex-col items-start gap-4 h-full"
 >
 	<!-- Circular member image -->
 	{#if member.image}
 		<div
 			class="w-24 h-24 rounded-full overflow-hidden border-2 border-border-input mb-2 self-center"
 		>
 			<img
-				src={member.image.id}
+				src={imageUrl}
 				alt={member.image.description || `${member.name} profile picture`}
 				class="w-full h-full object-cover"
 			/>
@@ -39,7 +46,7 @@
 	</p>
 
 	<!-- URL links at the bottom -->
-	<div class="flex gap-4 mt-auto">
+	<div class="flex gap-4 mt-auto pt-4">
 		{#if member.website}
 			<a
 				href={member.website}
@@ -48,7 +55,7 @@
 				class="flex items-center gap-2 px-3 py-2 rounded-lg bg-background border border-border-input hover:bg-muted transition-colors"
 				aria-label="Visit {member.name}'s website"
 			>
-				<Globe size={16} />
+				<Globe size={16} aria-hidden="true" />
 				<span class="text-sm">Website</span>
 			</a>
 		{/if}
@@ -61,7 +68,7 @@
 				class="flex items-center gap-2 px-3 py-2 rounded-lg bg-background border border-border-input hover:bg-muted transition-colors"
 				aria-label="Visit {member.name}'s LinkedIn profile"
 			>
-				<LinkedinLogo size={16} />
+				<LinkedinLogo size={16} aria-hidden="true" />
 				<span class="text-sm">LinkedIn</span>
 			</a>
 		{/if}

packages/utils/src/global-utils.ts

@@ -67,3 +67,35 @@ export const getLangLabel = (lang: string) => {
 	};
 	return map[lang] || lang;
 };
+
+/**
+ * Builds an image URL for Directus assets with format detection
+ * @param imageId - The Directus file ID
+ * @param apiUrl - The base API URL (from VITE_API_URL)
+ * @param quality - Image quality (default: 80)
+ * @returns The complete image URL with format parameters
+ */
+export const buildImageUrl = (imageId: string, apiUrl: string, quality: number = 80): string => {
+	// Check if browser supports AVIF format
+	const supportsAvif =
+		typeof window !== 'undefined' &&
+		window.HTMLCanvasElement &&
+		document.createElement('canvas').toDataURL('image/avif').indexOf('data:image/avif') === 0;
+
+	// Check if browser supports WebP format
+	const supportsWebp =
+		typeof window !== 'undefined' &&
+		window.HTMLCanvasElement &&
+		document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') === 0;
+
+	// Determine the best format to use
+	let format = 'jpg'; // fallback
+	if (supportsAvif) {
+		format = 'avif';
+	} else if (supportsWebp) {
+		format = 'webp';
+	}
+
+	// Build the URL with the format
+	return `${apiUrl}/assets/${imageId}?quality=${quality}&format=${format}`;
+};