Enable fullscreen and zoom actions for images via env variable

README.md

@@ -120,6 +120,7 @@ Application behavior can be changed by configuring the following environment var
 - `NEXT_PUBLIC_GRID_ASPECT_RATIO = 1.5` sets aspect ratio for grid tiles (defaults to `1`—setting to `0` removes the constraint)
 - `NEXT_PUBLIC_SHOW_LARGE_THUMBNAILS = 1` ensures large thumbnails on photo grid views
 - `NEXT_PUBLIC_OG_TEXT_ALIGNMENT = BOTTOM` keeps OG image text bottom aligned (default is top)
+- `NEXT_PUBLIC_IMAGE_ACTIONS = 1` enables fullscreen and zoom actions when clicking on an image
 
 ## Alternate storage providers
 

src/app/p/[photoId]/page.tsx

@@ -82,7 +82,6 @@ export default async function PhotoPage({
         photo,
         photos,
         photosGrid,
-        enableImageActions: true,
       }}
     />
   );

src/photo/PhotoDetailPage.tsx

@@ -11,6 +11,7 @@ import HiddenHeader from '@/tag/HiddenHeader';
 import FocalLengthHeader from '@/focal/FocalLengthHeader';
 import PhotoHeader from './PhotoHeader';
 import { JSX } from 'react';
+import { IMAGE_ACTIONS_ENABLED } from '@/site/config';
 
 export default function PhotoDetailPage({
   photo,
@@ -25,7 +26,6 @@ export default function PhotoDetailPage({
   dateRange,
   shouldShare,
   includeFavoriteInAdminMenu,
-  enableImageActions,
 }: {
   photo: Photo
   photos: Photo[]
@@ -35,7 +35,6 @@ export default function PhotoDetailPage({
   dateRange?: PhotoDateRange
   shouldShare?: boolean
   includeFavoriteInAdminMenu?: boolean
-  enableImageActions?: boolean
 } & PhotoSetCategory) {
   let customHeader: JSX.Element | undefined;
 
@@ -114,7 +113,7 @@ export default function PhotoDetailPage({
             shouldShareSimulation={simulation !== undefined}
             shouldScrollOnShare={false}
             includeFavoriteInAdminMenu={includeFavoriteInAdminMenu}
-            enableImageActions={enableImageActions}
+            enableImageActions={IMAGE_ACTIONS_ENABLED}
           />,
         ]}
       />

src/site/SiteChecklistClient.tsx

@@ -66,6 +66,7 @@ export default function SiteChecklistClient({
   isPublicApiEnabled,
   arePublicDownloadsEnabled,
   isOgTextBottomAligned,
+  isImageActionsEnabled,
   gridAspectRatio,
   hasGridAspectRatio,
   gridDensity,
@@ -599,6 +600,15 @@ export default function SiteChecklistClient({
               keep OG image text bottom aligned (default is {'"top"'}):
               {renderEnvVars(['NEXT_PUBLIC_OG_TEXT_ALIGNMENT'])}
             </ChecklistRow>
+            <ChecklistRow
+              title="Enable image actions"
+              status={isImageActionsEnabled}
+              optional
+            >
+              Set environment variable to {'"1"'} to enable fullscreen and zoom 
+              actions when clicking on an image:
+              {renderEnvVars(['NEXT_PUBLIC_IMAGE_ACTIONS'])}
+            </ChecklistRow>
           </Checklist>
         </>}
       </div>

src/site/config.ts

@@ -168,6 +168,8 @@ export const GRID_ASPECT_RATIO =
     : 1;
 export const OG_TEXT_BOTTOM_ALIGNMENT =
   (process.env.NEXT_PUBLIC_OG_TEXT_ALIGNMENT ?? '').toUpperCase() === 'BOTTOM';
+export const IMAGE_ACTIONS_ENABLED = 
+  process.env.NEXT_PUBLIC_IMAGE_ACTIONS === '1';
 export const ADMIN_DEBUG_TOOLS_ENABLED = process.env.ADMIN_DEBUG_TOOLS === '1';
 
 export const PREFERS_LOW_DENSITY_GRID =
@@ -232,6 +234,7 @@ export const CONFIG_CHECKLIST_STATUS = {
   isPublicApiEnabled: PUBLIC_API_ENABLED,
   arePublicDownloadsEnabled: ALLOW_PUBLIC_DOWNLOADS,
   isOgTextBottomAligned: OG_TEXT_BOTTOM_ALIGNMENT,
+  isImageActionsEnabled: IMAGE_ACTIONS_ENABLED,
   gridAspectRatio: GRID_ASPECT_RATIO,
   hasGridAspectRatio: Boolean(process.env.NEXT_PUBLIC_GRID_ASPECT_RATIO),
   gridDensity: HIGH_DENSITY_GRID,