Add 3-photo split layout to og images

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,

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,34 +40,26 @@ 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 -
+  const cellWidth = (
-    (imagesPerRow - 1) * gap / (imagesPerRow);
+    (width ?? widthArbitrary) / imagesPerRow -
+    (imagesPerRow - 1) * gap / (imagesPerRow)
+  );
   const cellHeight= height / rows -
     (rows - 1) * gap / rows;
 
   const doOptimizedFilesExist = await doAllPhotosHaveOptimizedFiles(photos);
 
-  return (
+  const renderPhoto = ({ id, url }: Photo, width: number, height: number) =>
-    <div
-      style={{
-        display: 'flex',
-        flexWrap: 'wrap',
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap,
-      }}
-    >
-      {photos.slice(0, count).map(({ id, url }) =>
     <div
       key={id}
       style={{
         display: 'flex',
-            width: cellWidth,
+        width,
-            height: cellHeight,
+        height,
         overflow: 'hidden',
         filter: 'saturate(1.1)',
       }}
@@ -87,7 +80,42 @@ export default async function ImagePhotoGrid({
           objectFit: 'cover',
         },
       }} />
-        </div>,
+    </div>;
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap,
+      }}
+    >
+      {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,
+          }}>
+            {photos.slice(1).map(photo =>
+              renderPhoto(photo, cellWidth, cellHeight),
+            )}
+          </div>
+        </>
+        : photos.slice(0, count).map(photo =>
+          renderPhoto(photo, cellWidth, cellHeight),
         )}
     </div>
   );