From ca7db5affeed771e69fdb1a6afe69e8c789b18c4 Mon Sep 17 00:00:00 2001 From: Sam Becker Date: Wed, 6 Dec 2023 10:11:22 -0600 Subject: [PATCH 1/5] Add configuration for grid aspect ratios --- src/photo/PhotoGrid.tsx | 31 ++++++++++++++++++++++++------- src/site/config.ts | 3 +++ 2 files changed, 27 insertions(+), 7 deletions(-) diff --git a/src/photo/PhotoGrid.tsx b/src/photo/PhotoGrid.tsx index b5943d78..335e255f 100644 --- a/src/photo/PhotoGrid.tsx +++ b/src/photo/PhotoGrid.tsx @@ -5,6 +5,7 @@ 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'; export default function PhotoGrid({ photos, @@ -50,14 +51,30 @@ export default function PhotoGrid({ animateOnFirstLoadOnly={animateOnFirstLoadOnly} staggerOnFirstLoadOnly={staggerOnFirstLoadOnly} items={photos.map(photo => - ).concat(additionalTile ?? [])} + className={GRID_ASPECT_RATIO !== 0 + ? cc( + 'aspect-square', + 'overflow-hidden', + '[&>*]:flex [&>*]:w-full [&>*]:h-full', + '[&>*>*]:object-cover', + ) + : undefined} + style={{ + ...GRID_ASPECT_RATIO !== 0 && { + aspectRatio: GRID_ASPECT_RATIO ?? 1, + }, + }} + > + + ).concat(additionalTile ?? [])} /> {showMorePath && } diff --git a/src/site/config.ts b/src/site/config.ts index 119c9ed4..76666fb2 100644 --- a/src/site/config.ts +++ b/src/site/config.ts @@ -54,6 +54,9 @@ 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; export const CONFIG_CHECKLIST_STATUS = { hasPostgres: (process.env.POSTGRES_HOST ?? '').length > 0, From ebd68e1d8e077c1ee67450bc982d500f23eaa75a Mon Sep 17 00:00:00 2001 From: Sam Becker Date: Wed, 6 Dec 2023 13:38:43 -0600 Subject: [PATCH 2/5] Document grid aspect ratio configuration --- README.md | 3 ++- src/photo/PhotoGrid.tsx | 2 +- src/site/SiteChecklistClient.tsx | 12 ++++++++++++ src/site/config.ts | 7 ++++--- 4 files changed, 19 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 65c8b37a..9ee3f54d 100644 --- a/README.md +++ b/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 diff --git a/src/photo/PhotoGrid.tsx b/src/photo/PhotoGrid.tsx index 335e255f..79e5bcf0 100644 --- a/src/photo/PhotoGrid.tsx +++ b/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, }, }} > diff --git a/src/site/SiteChecklistClient.tsx b/src/site/SiteChecklistClient.tsx index ea09d01b..5afe2398 100644 --- a/src/site/SiteChecklistClient.tsx +++ b/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 /grid sidebar: {renderEnvVars(['NEXT_PUBLIC_HIDE_FILM_SIMULATIONS'])} + + 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'])} + 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; From 2cac722284ac1a44110f4f234295c9a018ba2453 Mon Sep 17 00:00:00 2001 From: Sam Becker Date: Wed, 6 Dec 2023 14:26:02 -0600 Subject: [PATCH 3/5] Increase grid density for aspect ratios 1 or lower --- src/photo/PhotoGrid.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/photo/PhotoGrid.tsx b/src/photo/PhotoGrid.tsx index 79e5bcf0..0a12117d 100644 --- a/src/photo/PhotoGrid.tsx +++ b/src/photo/PhotoGrid.tsx @@ -7,6 +7,8 @@ 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, selectedPhoto, @@ -41,7 +43,9 @@ export default function PhotoGrid({ 'grid 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} From 3153d95ae231f9b47d1694d42b3941c87b1b29ef Mon Sep 17 00:00:00 2001 From: Sam Becker Date: Wed, 6 Dec 2023 14:37:07 -0600 Subject: [PATCH 4/5] Fix grid view on Safari --- src/photo/PhotoGrid.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/photo/PhotoGrid.tsx b/src/photo/PhotoGrid.tsx index 0a12117d..4f57b927 100644 --- a/src/photo/PhotoGrid.tsx +++ b/src/photo/PhotoGrid.tsx @@ -62,7 +62,7 @@ export default function PhotoGrid({ 'aspect-square', 'overflow-hidden', '[&>*]:flex [&>*]:w-full [&>*]:h-full', - '[&>*>*]:object-cover', + '[&>*>*]:object-cover [&>*>*]:min-h-full', ) : undefined} style={{ From 816645c3c6d0993d5ff301c286d2f59209474ccb Mon Sep 17 00:00:00 2001 From: Sam Becker Date: Wed, 6 Dec 2023 20:21:06 -0600 Subject: [PATCH 5/5] Refine grid --- src/photo/PhotoDetailPage.tsx | 1 + src/photo/PhotoGrid.tsx | 2 +- src/photo/PhotoLarge.tsx | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/photo/PhotoDetailPage.tsx b/src/photo/PhotoDetailPage.tsx index d057a79e..8efe3eaf 100644 --- a/src/photo/PhotoDetailPage.tsx +++ b/src/photo/PhotoDetailPage.tsx @@ -97,6 +97,7 @@ export default function PhotoDetailPage({ />} contentSide={
diff --git a/src/photo/PhotoGrid.tsx b/src/photo/PhotoGrid.tsx index 4f57b927..6db32045 100644 --- a/src/photo/PhotoGrid.tsx +++ b/src/photo/PhotoGrid.tsx @@ -40,7 +40,7 @@ export default function PhotoGrid({