Merge pull request #25 from sambecker/grid-layout

Improve aspect ratio handling in photo grids

README.md

@@ -64,9 +64,10 @@ Installation
 
 - `NEXT_PUBLIC_PRO_MODE = 1` enables higher quality image storage
 - `NEXT_PUBLIC_PUBLIC_API = 1` enables public API available at `/api`
-- `NEXT_PUBLIC_OG_TEXT_ALIGNMENT = BOTTOM` keeps OG image text bottom aligned (default is top)
 - `NEXT_PUBLIC_HIDE_REPO_LINK = 1` removes footer link to repo
 - `NEXT_PUBLIC_HIDE_FILM_SIMULATIONS = 1` prevents Fujifilm simulations showing up in `/grid` sidebar
+- `NEXT_PUBLIC_GRID_ASPECT_RATIO = 1.5` sets aspect ratio for grid tiles (defaults to `1`—setting to `0` removes the constraint)
+- `NEXT_PUBLIC_OG_TEXT_ALIGNMENT = BOTTOM` keeps OG image text bottom aligned (default is top)
 
 ### Setup alternate storage
 

src/photo/PhotoDetailPage.tsx

@@ -97,6 +97,7 @@ export default function PhotoDetailPage({
         />}
         contentSide={<div className={cc(
           'grid grid-cols-2',
+          'gap-0.5 sm:gap-1',
           'md:flex md:gap-4',
           'user-select-none',
         )}>

src/photo/PhotoGrid.tsx

@@ -5,6 +5,9 @@ import AnimateItems from '@/components/AnimateItems';
 import { Camera } from '@/camera';
 import MorePhotos from '@/photo/MorePhotos';
 import { FilmSimulation } from '@/simulation';
+import { GRID_ASPECT_RATIO } from '@/site/config';
+
+const HIGH_DENSITY = GRID_ASPECT_RATIO <= 1;
 
 export default function PhotoGrid({
   photos,
@@ -37,10 +40,12 @@ export default function PhotoGrid({
     <div className="space-y-4">
       <AnimateItems
         className={cc(
-          'grid gap-1',
+          'grid gap-0.5 sm:gap-1',
           small
             ? 'grid-cols-3 xs:grid-cols-6'
-            : 'grid-cols-2 sm:grid-cols-4 md:grid-cols-3 lg:grid-cols-4',
+            : HIGH_DENSITY
+              ? 'grid-cols-2 xs:grid-cols-4 lg:grid-cols-5'
+              : 'grid-cols-2 sm:grid-cols-4 md:grid-cols-3 lg:grid-cols-4',
           'items-center',
         )}
         type={animate === false ? 'none' : undefined}
@@ -50,14 +55,30 @@ export default function PhotoGrid({
         animateOnFirstLoadOnly={animateOnFirstLoadOnly}
         staggerOnFirstLoadOnly={staggerOnFirstLoadOnly}
         items={photos.map(photo =>
-          <PhotoSmall
+          <div
             key={photo.id}
-            photo={photo}
-            tag={tag}
-            camera={camera}
-            simulation={simulation}
-            selected={photo.id === selectedPhoto?.id}
-          />).concat(additionalTile ?? [])}
+            className={GRID_ASPECT_RATIO !== 0
+              ? cc(
+                'aspect-square',
+                'overflow-hidden',
+                '[&>*]:flex [&>*]:w-full [&>*]:h-full',
+                '[&>*>*]:object-cover [&>*>*]:min-h-full',
+              )
+              : undefined}
+            style={{
+              ...GRID_ASPECT_RATIO !== 0 && {
+                aspectRatio: GRID_ASPECT_RATIO,
+              },
+            }}
+          >
+            <PhotoSmall {...{
+              photo,
+              tag,
+              camera,
+              simulation,
+              selected: photo.id === selectedPhoto?.id,
+            }} />
+          </div>).concat(additionalTile ?? [])}
       />
       {showMorePath &&
         <MorePhotos path={showMorePath} />}

src/photo/PhotoLarge.tsx

@@ -63,6 +63,7 @@ export default function PhotoLarge({
         <div className={cc(
           'sticky top-4 self-start',
           'grid grid-cols-2 md:grid-cols-1',
+          'gap-x-0.5 sm:gap-x-1',
           'gap-y-4',
           '-translate-y-1',
           'mb-4',

src/site/SiteChecklistClient.tsx

@@ -35,6 +35,7 @@ export default function SiteChecklistClient({
   isPublicApiEnabled,
   isOgTextBottomAligned,
   showRefreshButton,
+  gridAspectRatio,
   secret,
 }: ConfigChecklistStatus & {
   showRefreshButton?: boolean
@@ -273,6 +274,17 @@ export default function SiteChecklistClient({
           simulations showing up in <code>/grid</code> sidebar:
           {renderEnvVars(['NEXT_PUBLIC_HIDE_FILM_SIMULATIONS'])}
         </ChecklistRow>
+        <ChecklistRow
+          title={`Grid Aspect Ratio: ${gridAspectRatio}`}
+          status={gridAspectRatio !== 0}
+          isPending={isPendingPage}
+          optional
+        >
+          Set environment variable to any number to enforce aspect ratio
+          {' '}
+          (defaults to {'"1"'}, i.e., square)—set to {'"0"'} to disable:
+          {renderEnvVars(['NEXT_PUBLIC_GRID_ASPECT_RATIO'])}
+        </ChecklistRow>
         <ChecklistRow
           title="Legacy OG Text Alignment"
           status={isOgTextBottomAligned}

src/site/config.ts

@@ -52,6 +52,9 @@ export const PUBLIC_API_ENABLED = process.env.NEXT_PUBLIC_PUBLIC_API === '1';
 export const SHOW_REPO_LINK = process.env.NEXT_PUBLIC_HIDE_REPO_LINK !== '1';
 export const SHOW_FILM_SIMULATIONS =
   process.env.NEXT_PUBLIC_HIDE_FILM_SIMULATIONS !== '1';
+export const GRID_ASPECT_RATIO = process.env.NEXT_PUBLIC_GRID_ASPECT_RATIO
+  ? parseFloat(process.env.NEXT_PUBLIC_GRID_ASPECT_RATIO)
+  : 1;
 export const OG_TEXT_BOTTOM_ALIGNMENT =
   (process.env.NEXT_PUBLIC_OG_TEXT_ALIGNMENT ?? '').toUpperCase() === 'BOTTOM';
 
@@ -72,6 +75,7 @@ export const CONFIG_CHECKLIST_STATUS = {
   isProModeEnabled: PRO_MODE_ENABLED,
   isPublicApiEnabled: PUBLIC_API_ENABLED,
   isOgTextBottomAligned: OG_TEXT_BOTTOM_ALIGNMENT,
+  gridAspectRatio: GRID_ASPECT_RATIO,
 };
 
 export type ConfigChecklistStatus = typeof CONFIG_CHECKLIST_STATUS;