diff --git a/src/photo/PhotoHeader.tsx b/src/photo/PhotoHeader.tsx
index 4a1780f6..3e13c662 100644
--- a/src/photo/PhotoHeader.tsx
+++ b/src/photo/PhotoHeader.tsx
@@ -8,13 +8,11 @@ import {
import ShareButton from '@/components/ShareButton';
import AnimateItems from '@/components/AnimateItems';
import { ReactNode } from 'react';
-import {
- HIGH_DENSITY_GRID,
- SHOW_PHOTO_TITLE_FALLBACK_TEXT,
-} from '@/site/config';
+import { HIGH_DENSITY_GRID } from '@/site/config';
import DivDebugBaselineGrid from '@/components/DivDebugBaselineGrid';
import PhotoPrevNext from './PhotoPrevNext';
import PhotoLink from './PhotoLink';
+import { formatDate } from '@/utility/date';
export default function PhotoHeader({
tag,
@@ -80,14 +78,14 @@ export default function PhotoHeader({
- {entity ?? (
- (selectedPhoto?.title || SHOW_PHOTO_TITLE_FALLBACK_TEXT)
- ?
- : <>X of X>
- )}
+ {entity ?? (selectedPhoto
+ ?
+ {selectedPhoto.title || formatDate(selectedPhoto.takenAt, 'tiny')}
+
+ : undefined)}
PREV
@@ -133,7 +133,7 @@ export default function PhotoPrevNext({
prefetch
>
NEXT
diff --git a/src/utility/date.ts b/src/utility/date.ts
index f758dd8f..fdbe6454 100644
--- a/src/utility/date.ts
+++ b/src/utility/date.ts
@@ -1,5 +1,6 @@
import { format, parseISO, parse } from 'date-fns';
+const DATE_STRING_FORMAT_TINY = 'dd MMM yy';
const DATE_STRING_FORMAT_SHORT = 'dd MMM yyyy';
const DATE_STRING_FORMAT_MEDIUM = 'dd MMM yy h:mma';
const DATE_STRING_FORMAT = 'dd MMM yyyy h:mma';
@@ -7,10 +8,12 @@ const DATE_STRING_FORMAT_POSTGRES = 'yyyy-MM-dd HH:mm:ss';
type AmbiguousTimestamp = number | string;
-type Length = 'short' | 'medium' | 'long';
+type Length = 'tiny' | 'short' | 'medium' | 'long';
export const formatDate = (date: Date, length: Length = 'long') => {
switch (length) {
+ case 'tiny':
+ return format(date, DATE_STRING_FORMAT_TINY);
case 'short':
return format(date, DATE_STRING_FORMAT_SHORT);
case 'medium':