From fb2354d2cc33a4eb10edd22e3f5a72b0e46681ba Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Sun, 22 Feb 2026 17:30:30 +0100
Subject: [PATCH] feat: Add aspect ratio support to imgproxy loader and apply
 16:9 aspect ratio to featured images across blog posts and recent posts.

---
 app/[locale]/blog/[slug]/page.tsx  |  2 +-
 components/blog/PostNavigation.tsx |  4 ++--
 components/home/RecentPosts.tsx    |  2 +-
 lib/imgproxy-loader.ts             | 27 ++++++++++++++++++++++++---
 4 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/app/[locale]/blog/[slug]/page.tsx b/app/[locale]/blog/[slug]/page.tsx
index 112ca652..8b628c9b 100644
--- a/app/[locale]/blog/[slug]/page.tsx
+++ b/app/[locale]/blog/[slug]/page.tsx
@@ -76,7 +76,7 @@ export default async function BlogPost({ params }: BlogPostProps) {
         <div className="relative w-full h-[70vh] min-h-[500px] overflow-hidden group">
           <div className="absolute inset-0 transition-transform duration-[3s] ease-out scale-110 group-hover:scale-100">
             <Image
-              src={post.frontmatter.featuredImage}
+              src={`${post.frontmatter.featuredImage}?ar=16:9`}
               alt={post.frontmatter.title}
               fill
               priority
diff --git a/components/blog/PostNavigation.tsx b/components/blog/PostNavigation.tsx
index 5baab409..5c592609 100644
--- a/components/blog/PostNavigation.tsx
+++ b/components/blog/PostNavigation.tsx
@@ -31,7 +31,7 @@ export default function PostNavigation({
           {prev.frontmatter.featuredImage ? (
             <div
               className="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110"
-              style={{ backgroundImage: `url(${prev.frontmatter.featuredImage})` }}
+              style={{ backgroundImage: `url(${prev.frontmatter.featuredImage}?ar=16:9)` }}
             />
           ) : (
             <div className="absolute inset-0 bg-neutral-100" />
@@ -82,7 +82,7 @@ export default function PostNavigation({
           {next.frontmatter.featuredImage ? (
             <div
               className="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110"
-              style={{ backgroundImage: `url(${next.frontmatter.featuredImage})` }}
+              style={{ backgroundImage: `url(${next.frontmatter.featuredImage}?ar=16:9)` }}
             />
           ) : (
             <div className="absolute inset-0 bg-neutral-100" />
diff --git a/components/home/RecentPosts.tsx b/components/home/RecentPosts.tsx
index 578d6ea8..da4117fb 100644
--- a/components/home/RecentPosts.tsx
+++ b/components/home/RecentPosts.tsx
@@ -43,7 +43,7 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
                   {post.frontmatter.featuredImage && (
                     <div className="relative h-64 overflow-hidden">
                       <Image
-                        src={post.frontmatter.featuredImage}
+                        src={`${post.frontmatter.featuredImage}?ar=16:9`}
                         alt={post.frontmatter.title}
                         fill
                         className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
diff --git a/lib/imgproxy-loader.ts b/lib/imgproxy-loader.ts
index 041f58e4..cce62b8a 100644
--- a/lib/imgproxy-loader.ts
+++ b/lib/imgproxy-loader.ts
@@ -23,17 +23,37 @@ export default function imgproxyLoader({
     return src;
   }
 
-  // Check if src contains custom gravity query parameter
+  // Check if src contains custom gravity or aspect ratio query parameters
   let gravity = 'sm'; // Use smart gravity (content-aware) by default
   let cleanSrc = src;
+  let calculatedHeight = 0;
+  let resizingType: 'fit' | 'fill' = 'fit';
 
   try {
     // Dummy base needed for relative URLs
     const url = new URL(src, 'http://localhost');
     const customGravity = url.searchParams.get('gravity');
+    const aspectRatio = url.searchParams.get('ar'); // e.g. "16:9"
+
     if (customGravity) {
       gravity = customGravity;
       url.searchParams.delete('gravity');
+    }
+
+    if (aspectRatio) {
+      const parts = aspectRatio.split(':');
+      if (parts.length === 2) {
+        const arW = parseFloat(parts[0]);
+        const arH = parseFloat(parts[1]);
+        if (!isNaN(arW) && !isNaN(arH) && arW > 0) {
+          calculatedHeight = Math.round(width * (arH / arW));
+          resizingType = 'fill'; // Must use fill to allow imgproxy to crop
+        }
+      }
+      url.searchParams.delete('ar');
+    }
+
+    if (customGravity || aspectRatio) {
       cleanSrc = src.startsWith('http') ? url.href : url.pathname + url.search;
     }
   } catch (e) {
@@ -41,10 +61,11 @@ export default function imgproxyLoader({
   }
 
   // We use the width provided by Next.js for responsive images
-  // Height is set to 0 to maintain aspect ratio
+  // Height is calculated from aspect ratio if provided, otherwise 0 to maintain aspect ratio
   return getImgproxyUrl(cleanSrc, {
     width,
-    resizing_type: 'fit',
+    height: calculatedHeight,
+    resizing_type: resizingType,
     gravity,
   });
 }