From 8b0de489ff6f2de6a424bcb67e94d9db30f2e5f2 Mon Sep 17 00:00:00 2001
From: michaelcanova <mcanova.gp@gmail.com>
Date: Fri, 9 Oct 2026 11:18:08 -0400
Subject: [PATCH] [RFP] Updating image scaling for mobile/social media

---
 app/api/og/route.tsx                          | 233 +++++++++---------
 app/grant/[id]/[slug]/page.tsx                |   5 +-
 .../items/FeedItemGrantWithApplicants.tsx     |   2 +-
 components/Funding/GrantDetailsInline.tsx     |   8 +-
 4 files changed, 132 insertions(+), 116 deletions(-)

diff --git a/app/api/og/route.tsx b/app/api/og/route.tsx
index 10809fca2..fd2ae6301 100644
--- a/app/api/og/route.tsx
+++ b/app/api/og/route.tsx
@@ -3,151 +3,158 @@ import { NextRequest } from 'next/server';
 
 export const runtime = 'edge';
 
+const OG_IMAGE_SIZE = { width: 1200, height: 630 };
+
 export async function GET(request: NextRequest) {
   const { searchParams } = new URL(request.url);
   const title = searchParams.get('title');
   const description = searchParams.get('description');
   const author = searchParams.get('author');
   const type = searchParams.get('type') || 'article';
+  const image = searchParams.get('image');
+
+  if (image) {
+    return new ImageResponse(
+      <div style={{ height: '100%', width: '100%', display: 'flex', backgroundColor: '#ffffff' }}>
+        <img src={image} alt="" style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
+      </div>,
+      OG_IMAGE_SIZE
+    );
+  }
 
   return new ImageResponse(
-    (
+    <div
+      style={{
+        height: '100%',
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#ffffff',
+        padding: '60px',
+        fontFamily: 'Inter, system-ui, sans-serif',
+      }}
+    >
+      {/* Background pattern */}
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          background: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)',
+          opacity: 0.1,
+        }}
+      />
+
+      {/* Logo and brand */}
       <div
         style={{
-          height: '100%',
-          width: '100%',
           display: 'flex',
-          flexDirection: 'column',
           alignItems: 'center',
-          justifyContent: 'center',
-          backgroundColor: '#ffffff',
-          padding: '60px',
-          fontFamily: 'Inter, system-ui, sans-serif',
+          marginBottom: '40px',
+          position: 'relative',
+          zIndex: 1,
         }}
       >
-        {/* Background pattern */}
-        <div
+        <img
+          src="https://researchhub.com/logo_blue.png"
+          alt="ResearchHub"
+          width={480}
+          height={120}
           style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            background: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)',
-            opacity: 0.1,
+            display: 'block',
+            background: '#fff',
+            objectFit: 'contain',
           }}
         />
+      </div>
 
-        {/* Logo and brand */}
+      {/* Content type badge */}
+      {type && (
         <div
           style={{
-            display: 'flex',
-            alignItems: 'center',
-            marginBottom: '40px',
-            position: 'relative',
-            zIndex: 1,
+            backgroundColor: '#3b82f6',
+            color: 'white',
+            padding: '8px 16px',
+            borderRadius: '20px',
+            fontSize: '14px',
+            fontWeight: '500',
+            marginBottom: '30px',
+            textTransform: 'uppercase',
+            letterSpacing: '0.5px',
           }}
         >
-          <img
-            src="https://researchhub.com/logo_blue.png"
-            alt="ResearchHub"
-            width={480}
-            height={120}
-            style={{
-              display: 'block',
-              background: '#fff',
-              objectFit: 'contain',
-            }}
-          />
+          {type}
         </div>
+      )}
 
-        {/* Content type badge */}
-        {type && (
-          <div
-            style={{
-              backgroundColor: '#3b82f6',
-              color: 'white',
-              padding: '8px 16px',
-              borderRadius: '20px',
-              fontSize: '14px',
-              fontWeight: '500',
-              marginBottom: '30px',
-              textTransform: 'uppercase',
-              letterSpacing: '0.5px',
-            }}
-          >
-            {type}
-          </div>
-        )}
-
-        {/* Title */}
-        {title && (
-          <h1
-            style={{
-              fontSize: '48px',
-              fontWeight: 'bold',
-              textAlign: 'center',
-              color: '#1f2937',
-              margin: '0 0 20px 0',
-              lineHeight: 1.2,
-              maxWidth: '900px',
-            }}
-          >
-            {title}
-          </h1>
-        )}
+      {/* Title */}
+      {title && (
+        <h1
+          style={{
+            fontSize: '48px',
+            fontWeight: 'bold',
+            textAlign: 'center',
+            color: '#1f2937',
+            margin: '0 0 20px 0',
+            lineHeight: 1.2,
+            maxWidth: '900px',
+          }}
+        >
+          {title}
+        </h1>
+      )}
 
-        {/* Description */}
-        {description && (
-          <p
-            style={{
-              fontSize: '24px',
-              textAlign: 'center',
-              color: '#6b7280',
-              margin: '0 0 30px 0',
-              lineHeight: 1.4,
-              maxWidth: '800px',
-            }}
-          >
-            {description}
-          </p>
-        )}
+      {/* Description */}
+      {description && (
+        <p
+          style={{
+            fontSize: '24px',
+            textAlign: 'center',
+            color: '#6b7280',
+            margin: '0 0 30px 0',
+            lineHeight: 1.4,
+            maxWidth: '800px',
+          }}
+        >
+          {description}
+        </p>
+      )}
 
-        {/* Author */}
-        {author && (
+      {/* Author */}
+      {author && (
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '12px',
+            fontSize: '18px',
+            color: '#9ca3af',
+          }}
+        >
           <div
             style={{
+              width: '32px',
+              height: '32px',
+              backgroundColor: '#e5e7eb',
+              borderRadius: '50%',
               display: 'flex',
               alignItems: 'center',
-              gap: '12px',
-              fontSize: '18px',
-              color: '#9ca3af',
+              justifyContent: 'center',
+              fontSize: '14px',
+              fontWeight: '600',
+              color: '#6b7280',
             }}
           >
-            <div
-              style={{
-                width: '32px',
-                height: '32px',
-                backgroundColor: '#e5e7eb',
-                borderRadius: '50%',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                fontSize: '14px',
-                fontWeight: '600',
-                color: '#6b7280',
-              }}
-            >
-              {author.charAt(0).toUpperCase()}
-            </div>
-            <span>By {author}</span>
+            {author.charAt(0).toUpperCase()}
           </div>
-        )}
-      </div>
-    ),
-    {
-      width: 1200,
-      height: 630,
-    }
+          <span>By {author}</span>
+        </div>
+      )}
+    </div>,
+    OG_IMAGE_SIZE
   );
 }
diff --git a/app/grant/[id]/[slug]/page.tsx b/app/grant/[id]/[slug]/page.tsx
index 1b0b345c5..102bb8630 100644
--- a/app/grant/[id]/[slug]/page.tsx
+++ b/app/grant/[id]/[slug]/page.tsx
@@ -2,6 +2,7 @@ import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { PostService } from '@/services/post.service';
 import { getWorkMetadata } from '@/lib/metadata-helpers';
+import { SITE_CONFIG } from '@/lib/metadata';
 import { GrantContentSwitcher } from '@/components/Funding/GrantContentSwitcher';
 
 interface Props {
@@ -25,8 +26,10 @@ async function getGrant(id: string) {
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const { id, slug } = await params;
   const grant = await getGrant(id);
+  const shareImage =
+    grant.image && `${SITE_CONFIG.url}/api/og?image=${encodeURIComponent(grant.image)}`;
   return getWorkMetadata({
-    work: grant,
+    work: { ...grant, image: shareImage },
     url: `/grant/${id}/${slug}`,
   });
 }
diff --git a/components/Feed/items/FeedItemGrantWithApplicants.tsx b/components/Feed/items/FeedItemGrantWithApplicants.tsx
index e0de09367..530f6ef24 100644
--- a/components/Feed/items/FeedItemGrantWithApplicants.tsx
+++ b/components/Feed/items/FeedItemGrantWithApplicants.tsx
@@ -180,7 +180,7 @@ export const FeedItemGrantWithApplicants: FC<FeedItemGrantWithApplicantsProps> =
             src={content.previewImage}
             alt={content.title}
             fill
-            className="object-cover transition-transform duration-300 group-hover:scale-105"
+            className="object-contain object-top sm:object-cover sm:object-center transition-transform duration-300 group-hover:scale-105"
             sizes="(max-width: 768px) 100vw, 660px"
           />
         ) : (
diff --git a/components/Funding/GrantDetailsInline.tsx b/components/Funding/GrantDetailsInline.tsx
index 19ce0f5e9..b110f7d81 100644
--- a/components/Funding/GrantDetailsInline.tsx
+++ b/components/Funding/GrantDetailsInline.tsx
@@ -13,7 +13,13 @@ export function GrantDetailsInline({ content, imageUrl }: GrantDetailsInlineProp
     <div className="py-6">
       {imageUrl && (
         <div className="relative w-full h-[200px] sm:h-[280px] rounded-xl overflow-hidden bg-gray-100 mb-6">
-          <Image src={imageUrl} alt="" fill className="object-cover" sizes="860px" />
+          <Image
+            src={imageUrl}
+            alt=""
+            fill
+            className="object-contain sm:object-cover"
+            sizes="860px"
+          />
         </div>
       )}