Refactor image handling to use speakerImageUrl for consistent image processing across components

Author: Starefossen

src/app/(main)/speaker/[slug]/opengraph-image.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { ImageResponse } from 'next/og'
-import { sanityImage } from '@/lib/sanity/client'
+import { speakerImageUrl } from '@/lib/sanity/client'
 import { STYLES, OG_IMAGE_SIZE } from '@/lib/og/styles'
 import {
   createSvgDataUrl,
@@ -259,8 +259,12 @@ export default async function Image({
   }
 
   const primaryTalk = talks[0]
-  const speakerImageUrl = speakerData.image
-    ? sanityImage(speakerData.image).width(500).height(500).fit('crop').url()
+  const speakerImgUrl = speakerData.image
+    ? speakerImageUrl(speakerData.image, {
+        width: 500,
+        height: 500,
+        fit: 'crop',
+      })
     : null
 
   const ingressSponsors = conferenceData.sponsors.filter(
@@ -442,7 +446,7 @@ export default async function Image({
             zIndex: 1,
           }}
         >
-          <SpeakerImage imageUrl={speakerImageUrl} name={speakerData.name} />
+          <SpeakerImage imageUrl={speakerImgUrl} name={speakerData.name} />
 
           <h2
             style={{

src/app/(main)/speaker/[slug]/page.tsx

@@ -11,7 +11,7 @@ import { Button } from '@/components/Button'
 import { BackLink } from '@/components/BackButton'
 import { ShowMore } from '@/components/ShowMore'
 import { UserIcon } from '@heroicons/react/24/solid'
-import { sanityImage } from '@/lib/sanity/client'
+import { speakerImageUrl } from '@/lib/sanity/client'
 import { PortableText } from '@portabletext/react'
 import { portableTextComponents } from '@/lib/portabletext/components'
 import { getConferenceForDomain } from '@/lib/conference/sanity'
@@ -151,11 +151,7 @@ async function CachedSpeakerContent({
                 <div className="mb-6 flex justify-center lg:justify-start">
                   {speaker.image ? (
                     <img
-                      src={sanityImage(speaker.image)
-                        .width(400)
-                        .height(400)
-                        .fit('crop')
-                        .url()}
+                      src={speakerImageUrl(speaker.image)}
                       alt={speaker.name}
                       className="h-48 w-48 rounded-full object-cover shadow-lg ring-4 ring-white lg:h-64 lg:w-64 dark:ring-gray-700"
                     />

src/components/SpeakerProfilePreview.tsx

@@ -14,7 +14,7 @@ import {
   languages,
 } from '@/lib/proposal/types'
 import { Topic } from '@/lib/topic/types'
-import { sanityImage } from '@/lib/sanity/client'
+import { speakerImageUrl } from '@/lib/sanity/client'
 import { hasBlueskySocial } from '@/lib/bluesky/utils'
 import { ShowMore } from '@/components/ShowMore'
 import { SpeakerAvatars } from '@/components/SpeakerAvatars'
@@ -69,13 +69,7 @@ export default function SpeakerProfilePreview({
             <div className="sticky top-8 space-y-6">
               {speaker.image ? (
                 <img
-                  src={
-                    sanityImage(speaker.image)
-                      .width(400)
-                      .height(400)
-                      .fit('crop')
-                      .url() || undefined
-                  }
+                  src={speakerImageUrl(speaker.image)}
                   alt={speaker.name}
                   className="mx-auto h-48 w-48 rounded-full object-cover shadow-lg ring-4 ring-white lg:mx-0 lg:h-64 lg:w-64 dark:ring-gray-700"
                 />

src/components/admin/ProposalDetail.tsx

@@ -23,7 +23,7 @@ import { extractSpeakersFromProposal } from '@/lib/proposal/utils'
 import { Flags } from '@/lib/speaker/types'
 import { Topic } from '@/lib/topic/types'
 import { formatDateSafe, formatDateTimeSafe } from '@/lib/time'
-import { sanityImage } from '@/lib/sanity/client'
+import { speakerImageUrl } from '@/lib/sanity/client'
 import { getStatusBadgeConfig } from '@/lib/proposal/ui'
 import { portableTextComponents } from '@/lib/portabletext/components'
 import { iconForLink } from '@/components/SocialIcons'
@@ -75,11 +75,11 @@ function SpeakerCard({ speaker, requiresTravelFunding }: SpeakerCardProps) {
         <div className="float-left mr-4 mb-2">
           {speaker.image ? (
             <img
-              src={sanityImage(speaker.image)
-                .width(128)
-                .height(128)
-                .fit('crop')
-                .url()}
+              src={speakerImageUrl(speaker.image, {
+                width: 128,
+                height: 128,
+                fit: 'crop',
+              })}
               alt={speaker.name}
               width={64}
               height={64}

src/components/admin/ProposalReviewList.tsx

@@ -3,7 +3,7 @@
 import { StarIcon } from '@heroicons/react/24/solid'
 import { Review } from '@/lib/review/types'
 import { Speaker } from '@/lib/speaker/types'
-import { sanityImage } from '@/lib/sanity/client'
+import { speakerImageUrl } from '@/lib/sanity/client'
 import { formatDateSafe } from '@/lib/time'
 
 interface ProposalReviewListProps {
@@ -80,11 +80,11 @@ export function ProposalReviewList({
               <div className="shrink-0">
                 {reviewer?.image ? (
                   <img
-                    src={sanityImage(reviewer.image)
-                      .width(64)
-                      .height(64)
-                      .fit('crop')
-                      .url()}
+                    src={speakerImageUrl(reviewer.image, {
+                      width: 64,
+                      height: 64,
+                      fit: 'crop',
+                    })}
                     alt={reviewer.name || 'Reviewer'}
                     width={32}
                     height={32}

src/components/badge/BadgeDisplay.tsx

@@ -15,7 +15,7 @@ import Link from 'next/link'
 import type { BadgeRecord } from '@/lib/badge/types'
 import type { Speaker } from '@/lib/speaker/types'
 import type { Conference } from '@/lib/conference/types'
-import { sanityImage } from '@/lib/sanity/client'
+import { speakerImageUrl } from '@/lib/sanity/client'
 import { MissingAvatar } from '@/components/common/MissingAvatar'
 import { CloudNativePattern } from '@/components/CloudNativePattern'
 import { BlueskyIcon, LinkedInIcon } from '@/components/SocialIcons'
@@ -85,8 +85,8 @@ export function BadgeDisplay({
     })
   }
 
-  const speakerImageUrl = speaker.image
-    ? sanityImage(speaker.image).width(400).height(400).fit('crop').url()
+  const speakerImgUrl = speaker.image
+    ? speakerImageUrl(speaker.image)
     : undefined
 
   // Get first talk for evidence (if available)
@@ -150,9 +150,9 @@ export function BadgeDisplay({
 
           {/* Recipient Info */}
           <div className="mb-6 flex flex-col items-center gap-4">
-            {speakerImageUrl ? (
+            {speakerImgUrl ? (
               <img
-                src={speakerImageUrl}
+                src={speakerImgUrl}
                 alt={speaker.name}
                 className="h-24 w-24 rounded-full border-4 border-white/30 object-cover shadow-xl"
               />

src/lib/auth.ts

@@ -4,7 +4,7 @@ import LinkedIn from 'next-auth/providers/linkedin'
 import type { NextAuthConfig, Session, User } from 'next-auth'
 import { NextRequest } from 'next/server'
 import { getOrCreateSpeaker } from '@/lib/speaker/sanity'
-import { sanityImage } from '@/lib/sanity/client'
+import { speakerImageUrl } from '@/lib/sanity/client'
 import { AppEnvironment } from '@/lib/environment/config'
 
 export interface NextAuthRequest extends NextRequest {
@@ -95,15 +95,11 @@ const config = {
         }
 
         if (speaker.image) {
-          if (typeof speaker.image === 'object') {
-            token.picture = sanityImage(speaker.image)
-              .width(192)
-              .height(192)
-              .fit('crop')
-              .url()
-          } else if (typeof speaker.image === 'string') {
-            token.picture = speaker.image
-          }
+          token.picture = speakerImageUrl(speaker.image, {
+            width: 192,
+            height: 192,
+            fit: 'crop',
+          })
         }
 
         token.account = account

src/lib/sanity/client.ts

@@ -35,3 +35,28 @@ const builder = createImageUrlBuilder(clientReadCached)
 export function sanityImage(source: SanityImageSource) {
   return builder.image(source)
 }
+
+const SANITY_CDN_PREFIX = 'https://cdn.sanity.io/'
+
+/**
+ * Resolves a speaker image URL for display. Handles both Sanity CDN URLs
+ * (from uploaded images) and external URLs (from OAuth providers like GitHub/LinkedIn).
+ * Only Sanity URLs are passed through the image builder for transforms.
+ */
+export function speakerImageUrl(
+  image: string,
+  opts: { width: number; height: number; fit?: 'crop' | 'max' } = {
+    width: 400,
+    height: 400,
+    fit: 'crop',
+  },
+): string {
+  if (image.startsWith(SANITY_CDN_PREFIX)) {
+    return sanityImage(image)
+      .width(opts.width)
+      .height(opts.height)
+      .fit(opts.fit ?? 'crop')
+      .url()
+  }
+  return image
+}