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,