Document grid aspect ratio configuration

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/PhotoGrid.tsx

@@ -63,7 +63,7 @@ export default function PhotoGrid({
               : undefined}
             style={{
               ...GRID_ASPECT_RATIO !== 0 && {
-                aspectRatio: GRID_ASPECT_RATIO ?? 1,
+                aspectRatio: GRID_ASPECT_RATIO,
               },
             }}
           >

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,11 +52,11 @@ 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 OG_TEXT_BOTTOM_ALIGNMENT =
-  (process.env.NEXT_PUBLIC_OG_TEXT_ALIGNMENT ?? '').toUpperCase() === 'BOTTOM';
 export const GRID_ASPECT_RATIO = process.env.NEXT_PUBLIC_GRID_ASPECT_RATIO
   ? parseFloat(process.env.NEXT_PUBLIC_GRID_ASPECT_RATIO)
-  : undefined;
+  : 1;
+export const OG_TEXT_BOTTOM_ALIGNMENT =
+  (process.env.NEXT_PUBLIC_OG_TEXT_ALIGNMENT ?? '').toUpperCase() === 'BOTTOM';
 
 export const CONFIG_CHECKLIST_STATUS = {
   hasPostgres: (process.env.POSTGRES_HOST ?? '').length > 0,
@@ -75,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;