[WEB] Use auto format globally and fix profile og image; fixes BAF-388

samtgarson · Mar 23, 2024 · 8872855 · 8872855
1 parent 68144f8
commit 8872855
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/web/src/app/(main)/people/[slug]/og-image.png/route.tsx b/web/src/app/(main)/people/[slug]/og-image.png/route.tsx
@@ -1,5 +1,6 @@
 import { fetchProfile } from '@books-about-food/core/services/profiles/fetch-profile'
 import { NextRequest } from 'next/server'
+import cloudflareLoader from 'src/lib/cloudflare/image-loader'
 import { OGTemplate } from 'src/utils/image-response-helpers'
 import { call } from 'src/utils/service'
 
@@ -35,7 +36,11 @@ export async function GET(
       <OGTemplate.Half right centered>
         {avatar ? (
           <img
-            src={avatar.src}
+            src={cloudflareLoader({
+              src: avatar.path,
+              width: dims.avatar,
+              format: 'png'
+            })}
             width={dims.avatar}
             height={dims.avatar}
             style={{ borderRadius: dims.avatar, objectFit: 'cover' }}

diff --git a/web/src/lib/cloudflare/image-loader.ts b/web/src/lib/cloudflare/image-loader.ts
@@ -8,13 +8,16 @@ const s3Host = process.env.S3_DOMAIN as string
 export default function cloudflareLoader({
   src,
   width,
-  quality
-}: ImageLoaderProps): string {
+  quality,
+  format = 'auto'
+}: ImageLoaderProps & { format?: string }): string {
   if (src.startsWith('/_next')) return src
   if (src.startsWith('http')) src = new URL(src).pathname
+  else if (!src.startsWith('/')) src = `/${src}`
 
   let params = `w=${normalizeWidth(width)},fit=scale-down`
   if (quality) params += `,q=${quality}`
+  if (format) params += `,f=${format}`
 
   return new URL(`/cdn-cgi/image/${params}${src}`, s3Host).toString()
 }