From 64c4b21f75d0f726a9b4a0714279cf79db704078 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sat, 27 Sep 2025 22:02:19 -0500
Subject: [PATCH] Add 3-photo split layout to og images

---
 src/components/entity/EntityHover.tsx         |  8 +-
 .../components/ImagePhotoGrid.tsx             | 92 ++++++++++++-------
 2 files changed, 64 insertions(+), 36 deletions(-)

diff --git a/src/components/entity/EntityHover.tsx b/src/components/entity/EntityHover.tsx
index 532c0e0c..07c56a18 100644
--- a/src/components/entity/EntityHover.tsx
+++ b/src/components/entity/EntityHover.tsx
@@ -66,7 +66,7 @@ export default function EntityHover({
     }
   }, [photosCount]);
 
-  const splitLayout = photosCount === 3;
+  const hasSplitLayout = photosCount === 3;
 
   const content = useMemo(() =>
     <div className="relative w-full h-full">
@@ -77,7 +77,7 @@ export default function EntityHover({
             <PhotoMedium
               key={photos[index].id}
               photo={photos[index]}
-              className={clsx(splitLayout && index === 0 && 'row-span-2')}
+              className={clsx(hasSplitLayout && index === 0 && 'row-span-2')}
             />)}
       </div>
       {/* Placeholder grid */}
@@ -93,7 +93,7 @@ export default function EntityHover({
             key={index}
             className={clsx(
               'border-[0.5px] border-main',
-              splitLayout && index === 0 && 'row-span-2',
+              hasSplitLayout && index === 0 && 'row-span-2',
             )}
           />)}
       </div>
@@ -137,7 +137,7 @@ export default function EntityHover({
     </div>
   , [
     gridClass,
-    splitLayout,
+    hasSplitLayout,
     photosToShow,
     photos,
     header,
diff --git a/src/image-response/components/ImagePhotoGrid.tsx b/src/image-response/components/ImagePhotoGrid.tsx
index cde6e8f6..f1b893a7 100644
--- a/src/image-response/components/ImagePhotoGrid.tsx
+++ b/src/image-response/components/ImagePhotoGrid.tsx
@@ -26,11 +26,12 @@ export default async function ImagePhotoGrid({
   { width: NextImageSize, widthArbitrary?: undefined } |
   { width?: undefined, widthArbitrary: number }
 ))) {
-  let count = 1;
+  let count = photos.length;
   if (photos.length >= 12) { count = 12; }
   else if (photos.length >= 6) { count = 6; }
   else if (photos.length >= 4) { count = 4; }
-  else if (photos.length >= 2) { count = 2; }
+
+  const hasSplitLayout = count === 3;
 
   const nextImageWidth: NextImageSize = count <= 2
     ? width ?? 1080
@@ -39,17 +40,48 @@ export default async function ImagePhotoGrid({
   let rows = 1;
   if (count > 12) { rows = 4; }
   else if (count > 6) { rows = 3; }
-  else if (count > 3) { rows = 2; }
+  else if (count >= 3) { rows = 2; }
 
-  const imagesPerRow = count / rows;
+  const imagesPerRow = Math.round(count / rows);
 
-  const cellWidth = (width ?? widthArbitrary) / imagesPerRow -
-    (imagesPerRow - 1) * gap / (imagesPerRow);
+  const cellWidth = (
+    (width ?? widthArbitrary) / imagesPerRow -
+    (imagesPerRow - 1) * gap / (imagesPerRow)
+  );
   const cellHeight= height / rows -
     (rows - 1) * gap / rows;
 
   const doOptimizedFilesExist = await doAllPhotosHaveOptimizedFiles(photos);
 
+  const renderPhoto = ({ id, url }: Photo, width: number, height: number) =>
+    <div
+      key={id}
+      style={{
+        display: 'flex',
+        width,
+        height,
+        overflow: 'hidden',
+        filter: 'saturate(1.1)',
+      }}
+    >
+      <img {...{
+        src: getOptimizedPhotoUrl({
+          imageUrl: url,
+          size: nextImageWidth,
+          addBypassSecret: IS_PREVIEW,
+          compatibilityMode: !doOptimizedFilesExist,
+        }),
+        style: {
+          ...imageStyle,
+          width: '100%',
+          ...imagePosition === 'center' && {
+            height: '100%',
+          },
+          objectFit: 'cover',
+        },
+      }} />
+    </div>;
+
   return (
     <div
       style={{
@@ -60,35 +92,31 @@ export default async function ImagePhotoGrid({
         gap,
       }}
     >
-      {photos.slice(0, count).map(({ id, url }) =>
-        <div
-          key={id}
-          style={{
+      {hasSplitLayout
+        ? <>
+          {/* Large image (L) */}
+          <div style={{
             display: 'flex',
             width: cellWidth,
+            height: cellHeight * 2,
+          }}>
+            {renderPhoto(photos[0], cellWidth, cellHeight * 2)}
+          </div>
+          {/* Small images (R) */}
+          <div style={{
+            display: 'flex',
+            flexDirection: 'column',
+            width: cellWidth,
             height: cellHeight,
-            overflow: 'hidden',
-            filter: 'saturate(1.1)',
-          }}
-        >
-          <img {...{
-            src: getOptimizedPhotoUrl({
-              imageUrl: url,
-              size: nextImageWidth,
-              addBypassSecret: IS_PREVIEW,
-              compatibilityMode: !doOptimizedFilesExist,
-            }),
-            style: {
-              ...imageStyle,
-              width: '100%',
-              ...imagePosition === 'center' && {
-                height: '100%',
-              },
-              objectFit: 'cover',
-            },
-          }} />
-        </div>,
-      )}
+          }}>
+            {photos.slice(1).map(photo =>
+              renderPhoto(photo, cellWidth, cellHeight),
+            )}
+          </div>
+        </>
+        : photos.slice(0, count).map(photo =>
+          renderPhoto(photo, cellWidth, cellHeight),
+        )}
     </div>
   );
 }