diff --git a/README.md b/README.md
index 57acf62b..f891fa09 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@ _Database schema changes are expected._

-[](https://vercel.com/new/clone?demo-title=Photo+Blog&demo-description=Store+photos+with+original+camera+data&demo-url=https%3A%2F%2Fphotos.sambecker.com&demo-image=https%3A%2F%2Fphotos.sambecker.com%2Ftemplate-image&project-name=Photo+Blog&repository-name=photo-blog&repository-url=https%3A%2F%2Fgithub.com%2Fsambecker%2Fphoto-blog&from=templates&skippable-integrations=1&env-description=Configure+your+photo+blog+meta&env-link=BLANK&env=NEXT_PUBLIC_SITE_TITLE%2CNEXT_PUBLIC_SITE_DOMAIN&teamCreateStatus=hidden&stores=%5B%7B%22type%22%3A%22postgres%22%7D%2C%7B%22type%22%3A%22blob%22%7D%5D)
+[](https://vercel.com/new/clone?demo-title=Photo+Blog&demo-description=Store+photos+with+original+camera+data&demo-url=https%3A%2F%2Fphotos.sambecker.com&demo-image=https%3A%2F%2Fphotos.sambecker.com%2Ftemplate-image-tight&project-name=Photo+Blog&repository-name=photo-blog&repository-url=https%3A%2F%2Fgithub.com%2Fsambecker%2Fphoto-blog&from=templates&skippable-integrations=1&env-description=Configure+your+photo+blog+meta&env-link=BLANK&env=NEXT_PUBLIC_SITE_TITLE%2CNEXT_PUBLIC_SITE_DOMAIN&teamCreateStatus=hidden&stores=%5B%7B%22type%22%3A%22postgres%22%7D%2C%7B%22type%22%3A%22blob%22%7D%5D)
### 1. Deploy to Vercel
diff --git a/src/app/(isr)/template-image-tight/route.tsx b/src/app/(isr)/template-image-tight/route.tsx
new file mode 100644
index 00000000..57689577
--- /dev/null
+++ b/src/app/(isr)/template-image-tight/route.tsx
@@ -0,0 +1,44 @@
+import DeployImageResponse from '@/photo/image-response/DeployImageResponse';
+import { getPhotos } from '@/services/postgres';
+import { FONT_FAMILY_IBM_PLEX_MONO, getIBMPlexMonoMedium } from '@/site/font';
+import { ImageResponse } from '@vercel/og';
+
+const DEBUG_CACHING: boolean = true;
+
+export const runtime = 'edge';
+
+export async function GET(request: Request) {
+ const photos = await getPhotos('priority');
+ const fontData = await getIBMPlexMonoMedium();
+
+ return new ImageResponse(
+ (
+
+ ),
+ {
+ width: 1200,
+ height: 1200 * 900 / 1600,
+ fonts: [
+ {
+ name: FONT_FAMILY_IBM_PLEX_MONO,
+ data: fontData,
+ style: 'normal',
+ },
+ ],
+ headers: {
+ 'Cache-Control': DEBUG_CACHING
+ ? 's-maxage=1'
+ : 's-maxage=3600, stale-while-revalidate',
+ },
+ },
+ );
+}
diff --git a/src/app/(isr)/template-url/route.tsx b/src/app/(isr)/template-url/route.tsx
index e32e34bb..d1df37aa 100644
--- a/src/app/(isr)/template-url/route.tsx
+++ b/src/app/(isr)/template-url/route.tsx
@@ -12,7 +12,7 @@ export function GET() {
url.searchParams.set('demo-description', DESCRIPTION);
url.searchParams.set('demo-url', 'https://photos.sambecker.com');
url.searchParams.set('demo-description', DESCRIPTION);
- url.searchParams.set('demo-image', 'https://photos.sambecker.com/template-image');
+ url.searchParams.set('demo-image', 'https://photos.sambecker.com/template-image-tight');
url.searchParams.set('project-name', TITLE);
url.searchParams.set('repository-name', REPO_NAME);
url.searchParams.set('repository-url', `https://github.com/sambecker/${REPO_NAME}`);
diff --git a/src/photo/image-response/DeployImageResponse.tsx b/src/photo/image-response/DeployImageResponse.tsx
index c0fd9937..d0526fde 100644
--- a/src/photo/image-response/DeployImageResponse.tsx
+++ b/src/photo/image-response/DeployImageResponse.tsx
@@ -10,7 +10,9 @@ export default function DeployImageResponse({
height,
fontFamily,
outerMargin = 50,
+ includeHeader = true,
darkMode = true,
+ verticalOffset,
}: {
photos: Photo[]
request: Request
@@ -18,7 +20,9 @@ export default function DeployImageResponse({
height: number
fontFamily: string
outerMargin?: number
+ includeHeader?: boolean
darkMode?: boolean
+ verticalOffset?: number
}) {
const innerWidth = width - (outerMargin * 2);
@@ -45,33 +49,34 @@ export default function DeployImageResponse({
marginBottom: outerMargin,
width: '100%',
}}>
-
+ }
);
diff --git a/src/photo/image-response/PhotoGridImageResponse.tsx b/src/photo/image-response/PhotoGridImageResponse.tsx
index 061781a4..92c6abc8 100644
--- a/src/photo/image-response/PhotoGridImageResponse.tsx
+++ b/src/photo/image-response/PhotoGridImageResponse.tsx
@@ -10,6 +10,7 @@ export default function PhotoGridImageResponse({
colCount,
rowCount,
gap = 12,
+ verticalOffset,
}: {
photos: Photo[]
request: Request
@@ -17,6 +18,7 @@ export default function PhotoGridImageResponse({
colCount: number
rowCount: number
gap?: number
+ verticalOffset?: number
}) {
const imageWidth = (width - ((colCount - 1) * gap)) / colCount ;
@@ -24,6 +26,7 @@ export default function PhotoGridImageResponse({
{photos
.slice(0, colCount * rowCount)