From bbc1626e7be3d087c1ae3926e40911e278d85654 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Fri, 16 Aug 2024 15:56:44 -0500
Subject: [PATCH] Introduce NEXT_PUBLIC_SHOW_LARGE_THUMBNAILS to configure grid
 density

---
 README.md                        |  3 +++
 src/site/SiteChecklistClient.tsx | 12 ++++++++++++
 src/site/config.ts               | 11 +++++++++--
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index d17f0283..0aa8d458 100644
--- a/README.md
+++ b/README.md
@@ -236,6 +236,9 @@ FAQ
 #### Why do vertical images take up so much space?
 > By default, all photos are shown full-width, regardless of orientation. Enable matting to showcase horizontal and vertical photos at similar scales by setting `NEXT_PUBLIC_MATTE_PHOTOS = 1`.
 
+#### Why are my grid thumbnails so small?
+Thumbnail grid density (seen on `/grid`, tag overviews, and other photo sets) is dependent on the aspect ratio configuration (ratios of 1 and under have larger amounts of photos per row). This can be overridden by setting `NEXT_PUBLIC_SHOW_LARGE_THUMBNAILS = 1`.
+
 #### How secure are photos marked “hidden?”
 > While all hidden paths (`/tag/hidden/*`) require authentication, raw links to individual photo assets remain publicly accessible. Randomly generated urls from storage providers are only secure via obscurity. Use with caution.
 
diff --git a/src/site/SiteChecklistClient.tsx b/src/site/SiteChecklistClient.tsx
index b18c7202..6d7a7686 100644
--- a/src/site/SiteChecklistClient.tsx
+++ b/src/site/SiteChecklistClient.tsx
@@ -68,6 +68,8 @@ export default function SiteChecklistClient({
   isOgTextBottomAligned,
   gridAspectRatio,
   hasGridAspectRatio,
+  gridDensity,
+  hasGridDensityPreference,
   // Connection status
   databaseError,
   storageError,
@@ -577,6 +579,16 @@ export default function SiteChecklistClient({
               (default is {'"1"'}, i.e., square)—set to {'"0"'} to disable:
               {renderEnvVars(['NEXT_PUBLIC_GRID_ASPECT_RATIO'])}
             </ChecklistRow>
+            <ChecklistRow
+              title={`Grid density: ${gridDensity ? 'low' : 'high'}`}
+              status={hasGridDensityPreference}
+              optional
+            >
+              Set environment variable to {'"1"'} to ensure large thumbnails
+              on photo grid views (if not configured, density is based on
+              aspect ratio configuration):
+              {renderEnvVars(['NEXT_PUBLIC_SHOW_LARGE_THUMBNAILS'])}
+            </ChecklistRow>
             <ChecklistRow
               title="Legacy OG text alignment"
               status={isOgTextBottomAligned}
diff --git a/src/site/config.ts b/src/site/config.ts
index 11781c9e..896b7d48 100644
--- a/src/site/config.ts
+++ b/src/site/config.ts
@@ -165,7 +165,11 @@ export const OG_TEXT_BOTTOM_ALIGNMENT =
   (process.env.NEXT_PUBLIC_OG_TEXT_ALIGNMENT ?? '').toUpperCase() === 'BOTTOM';
 export const ADMIN_DEBUG_TOOLS_ENABLED = process.env.ADMIN_DEBUG_TOOLS === '1';
 
-export const HIGH_DENSITY_GRID = GRID_ASPECT_RATIO <= 1;
+export const PREFERS_LOW_DENSITY_GRID =
+  process.env.NEXT_PUBLIC_SHOW_LARGE_THUMBNAILS === '1';
+export const HIGH_DENSITY_GRID =
+  GRID_ASPECT_RATIO <= 1 &&
+  !PREFERS_LOW_DENSITY_GRID;
 
 export const CONFIG_CHECKLIST_STATUS = {
   hasDatabase: HAS_DATABASE,
@@ -225,9 +229,12 @@ export const CONFIG_CHECKLIST_STATUS = {
   isOgTextBottomAligned: OG_TEXT_BOTTOM_ALIGNMENT,
   gridAspectRatio: GRID_ASPECT_RATIO,
   hasGridAspectRatio: Boolean(process.env.NEXT_PUBLIC_GRID_ASPECT_RATIO),
+  gridDensity: HIGH_DENSITY_GRID,
+  hasGridDensityPreference:
+    Boolean(process.env.NEXT_PUBLIC_SHOW_LARGE_THUMBNAILS),
   baseUrl: BASE_URL,
-  commitMessage: VERCEL_COMMIT_MESSAGE,
   commitSha: VERCEL_COMMIT_SHA ? VERCEL_COMMIT_SHA.slice(0, 7) : undefined,
+  commitMessage: VERCEL_COMMIT_MESSAGE,
 };
 
 export type ConfigChecklistStatus = typeof CONFIG_CHECKLIST_STATUS;