Add configuration option for hiding EXIF data

README.md

@@ -68,6 +68,7 @@ Installation
 - `NEXT_PUBLIC_PUBLIC_API = 1` enables public API available at `/api`
 - `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_HIDE_EXIF_DATA = 1` hides EXIF data in photo details and OG images (potentially useful for portfolios, which don't focus on photography)
 - `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)
 

src/photo/PhotoLarge.tsx

@@ -1,4 +1,9 @@
-import { Photo, photoHasCameraData, photoHasExifData, titleForPhoto } from '.';
+import {
+  Photo,
+  shouldShowCameraDataForPhoto,
+  shouldShowExifDataForPhoto,
+  titleForPhoto,
+} from '.';
 import SiteGrid from '@/components/SiteGrid';
 import ImageLarge from '@/components/ImageLarge';
 import { clsx } from 'clsx/lite';
@@ -92,7 +97,7 @@ export default function PhotoLarge({
               {tags.length > 0 &&
                 <PhotoTags tags={tags} />}
             </div>
-            {showCamera && photoHasCameraData(photo) &&
+            {showCamera && shouldShowCameraDataForPhoto(photo) &&
               <div className="space-y-0.5">
                 <PhotoCamera
                   camera={camera}
@@ -107,7 +112,7 @@ export default function PhotoLarge({
               </div>}
           </>)}
           {renderMiniGrid(<>
-            {photoHasExifData(photo) &&
+            {shouldShowExifDataForPhoto(photo) &&
               <ul className="text-medium">
                 <li>
                   {photo.focalLengthFormatted}

src/photo/image-response/PhotoImageResponse.tsx

@@ -1,4 +1,4 @@
-import { Photo, photoHasExifData } from '..';
+import { Photo, shouldShowExifDataForPhoto } from '..';
 import { AiFillApple } from 'react-icons/ai';
 import ImageCaption from './components/ImageCaption';
 import ImagePhotoGrid from './components/ImagePhotoGrid';
@@ -30,7 +30,7 @@ export default function PhotoImageResponse({
         height,
         ...OG_TEXT_BOTTOM_ALIGNMENT && { imagePosition: 'top' },
       }} />
-      {photoHasExifData(photo) &&
+      {shouldShowExifDataForPhoto(photo) &&
         <ImageCaption {...{ width, height, fontFamily }}>
           {photo.make === 'Apple' &&
             <div style={{ display: 'flex' }}>

src/photo/index.ts

@@ -1,4 +1,5 @@
 import { FilmSimulation } from '@/simulation';
+import { SHOW_EXIF_DATA } from '@/site/config';
 import { ABSOLUTE_PATH_FOR_HOME_IMAGE } from '@/site/paths';
 import { formatDateFromPostgresString } from '@/utility/date';
 import {
@@ -221,14 +222,20 @@ export const dateRangeForPhotos = (
   return { start, end, description };
 };
 
-export const photoHasCameraData = (photo: Photo) =>
+const photoHasCameraData = (photo: Photo) =>
   photo.make &&
   photo.model;
 
-export const photoHasExifData = (photo: Photo) =>
+const photoHasExifData = (photo: Photo) =>
   photo.focalLength ||
   photo.focalLengthIn35MmFormat ||
   photo.fNumberFormatted ||
   photo.isoFormatted ||
   photo.exposureTimeFormatted ||
   photo.exposureCompensationFormatted;
+
+export const shouldShowCameraDataForPhoto = (photo: Photo) =>
+  SHOW_EXIF_DATA && photoHasCameraData(photo);
+
+export const shouldShowExifDataForPhoto = (photo: Photo) =>
+  SHOW_EXIF_DATA && photoHasExifData(photo);

src/site/SiteChecklistClient.tsx

@@ -35,6 +35,7 @@ export default function SiteChecklistClient({
   hasDomain,
   showRepoLink,
   showFilmSimulations,
+  showExifInfo,
   isProModeEnabled,
   isGeoPrivacyEnabled,
   isPriorityOrderEnabled,
@@ -317,6 +318,15 @@ export default function SiteChecklistClient({
           simulations showing up in <code>/grid</code> sidebar:
           {renderEnvVars(['NEXT_PUBLIC_HIDE_FILM_SIMULATIONS'])}
         </ChecklistRow>
+        <ChecklistRow
+          title="Show EXIF data"
+          status={showExifInfo}
+          isPending={isPendingPage}
+          optional
+        >
+          Set environment variable to {'"1"'} to hide EXIF data:
+          {renderEnvVars(['NEXT_PUBLIC_HIDE_EXIF_DATA'])}
+        </ChecklistRow>
         <ChecklistRow
           title={`Grid Aspect Ratio: ${gridAspectRatio}`}
           status={gridAspectRatio !== 0}

src/site/config.ts

@@ -83,6 +83,7 @@ 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 SHOW_EXIF_DATA = process.env.NEXT_PUBLIC_HIDE_EXIF_DATA !== '1';
 export const GRID_ASPECT_RATIO = process.env.NEXT_PUBLIC_GRID_ASPECT_RATIO
   ? parseFloat(process.env.NEXT_PUBLIC_GRID_ASPECT_RATIO)
   : 1;
@@ -111,6 +112,7 @@ export const CONFIG_CHECKLIST_STATUS = {
   hasDomain: (process.env.NEXT_PUBLIC_SITE_DOMAIN ?? '').length > 0,
   showRepoLink: SHOW_REPO_LINK,
   showFilmSimulations: SHOW_FILM_SIMULATIONS,
+  showExifInfo: SHOW_EXIF_DATA,
   isProModeEnabled: PRO_MODE_ENABLED,
   isGeoPrivacyEnabled: GEO_PRIVACY_ENABLED,
   isPriorityOrderEnabled: PRIORITY_ORDER_ENABLED,