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/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 b5943d78..6db32045 100644 --- a/src/photo/PhotoGrid.tsx +++ b/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({
- ).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, + }, + }} + > + +
).concat(additionalTile ?? [])} /> {showMorePath && } diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx index bf30df39..74fca5a9 100644 --- a/src/photo/PhotoLarge.tsx +++ b/src/photo/PhotoLarge.tsx @@ -63,6 +63,7 @@ export default function PhotoLarge({
/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'])} +