EXIF-based photo blog with built-in admin panel, Vercel Postgres as CMS, and Vercel Blob for image storage.
EXIF
Photo Bloghttps://github.com/sambecker/exif-photo-blog/assets/169298/4253ea54-558a-4358-8834-89943cfbafb4
NEXT_PUBLIC_SITE_TITLE
(e.g., My Photos)NEXT_PUBLIC_SITE_DOMAIN
(e.g., photos.domain.com)NEXT_PUBLIC_SITE_DESCRIPTION
(optional—mainly used for OG meta)AUTH_SECRET
ADMIN_EMAIL
ADMIN_PASSWORD
/admin
pnpm i
to install dependenciesvercel login
vercel link
to connect the CLI to your projectvercel dev
to start dev server with Vercel-managed environment variables⚠️ READ BEFORE PROCEEDING
Usage of this feature will result in fees from OpenAI. When enabling AI text generation, follow all recommended mitigations in order to avoid unexpected charges and attacks. Make sure your OpenAI secret key environment variable is not prefixed with NEXT_PUBLIC.
OPENAI_SECRET_KEY
AI_TEXT_AUTO_GENERATED_FIELDS = title, semantic
all
(default)title
caption
tags
semantic
none
@vercel/analytics
already included)@vercel/speed-insights
already included)Application behavior can be changed by configuring the following environment variables:
NEXT_PUBLIC_PRO_MODE = 1
enables higher quality image storage (results in increased storage usage)NEXT_PUBLIC_STATICALLY_OPTIMIZE_PAGES = 1
enables static optimization for pages, i.e., renders pages at build time (results in increased project usage)—⚠️ ExperimentalNEXT_PUBLIC_STATICALLY_OPTIMIZE_OG_IMAGES = 1
enables static optimization for OG images, i.e., renders images at build time (results in increased project usage)—⚠️ ExperimentalNEXT_PUBLIC_MATTE_PHOTOS = 1
constrains the size of each photo, and enables a surrounding border (potentially useful for photos with tall aspect ratios)NEXT_PUBLIC_BLUR_DISABLED = 1
prevents image blur data being stored and displayed (potentially useful for limiting Postgres usage)NEXT_PUBLIC_GEO_PRIVACY = 1
disables collection/display of location-based dataNEXT_PUBLIC_IGNORE_PRIORITY_ORDER = 1
prevents priority_order
field affecting photo orderNEXT_PUBLIC_PUBLIC_API = 1
enables public API available at /api
NEXT_PUBLIC_HIDE_REPO_LINK = 1
removes footer link to repoNEXT_PUBLIC_HIDE_FILM_SIMULATIONS = 1
prevents Fujifilm simulations showing up in /grid
sidebar and CMD-K search resultsNEXT_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)Only one storage adapter—Vercel Blob, Cloudflare R2, or AWS S3—can be used at a time. Ideally, this is configured before photos are uploaded (see Issue #34 for migration considerations). If you have multiple adapters, you can set one as preferred by storing "aws-s3," "cloudflare-r2," or "vercel-blob" in NEXT_PUBLIC_STORAGE_PREFERENCE
.
[{ "AllowedHeaders": ["*"], "AllowedMethods": [ "GET", "PUT" ], "AllowedOrigins": [ "http://localhost:3000", "https://{VERCEL_PROJECT_NAME}*.vercel.app", "{PRODUCTION_DOMAIN}" ] }]
NEXT_PUBLIC_CLOUDFLARE_R2_BUCKET
: bucket nameNEXT_PUBLIC_CLOUDFLARE_R2_ACCOUNT_ID
: account id (found on R2 overview page)NEXT_PUBLIC_CLOUDFLARE_R2_PUBLIC_DOMAIN
: either "your-custom-domain.com" or "pub-jf90908...s0d9f8s0s9df.r2.dev" (do not include "https://" in your domain)NEXT_PUBLIC
):CLOUDFLARE_R2_ACCESS_KEY
CLOUDFLARE_R2_SECRET_ACCESS_KEY
[{ "AllowedHeaders": ["*"], "AllowedMethods": [ "GET", "PUT" ], "AllowedOrigins": [ "http://localhost:*", "https://{VERCEL_PROJECT_NAME}*.vercel.app", "{PRODUCTION_DOMAIN}" ], "ExposeHeaders": [] }]
NEXT_PUBLIC_AWS_S3_BUCKET
: bucket nameNEXT_PUBLIC_AWS_S3_REGION
: bucket region, e.g., "us-east-1"{ "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Action": [ "s3:PutObject", "s3:PutObjectACL", "s3:GetObject", "s3:ListBucket", "s3:DeleteObject" ], "Resource": [ "arn:aws:s3:::{BUCKET_NAME}", "arn:aws:s3:::{BUCKET_NAME}/*" ] } ] }
NEXT_PUBLIC
):AWS_S3_ACCESS_KEY
AWS_S3_SECRET_ACCESS_KEY
Vercel Postgres can be switched to another Postgres-compatible, pooling provider by updating POSTGRES_URL
. Some providers only work when SSL is disabled, which can configured by setting DISABLE_POSTGRES_SSL = 1
.
6543
DISABLE_POSTGRES_SSL = 1
Why don’t my OG images load when I share a link?This template statically optimizes core views such as
/
and/grid
to minimize visitor load times. Consequently, when photos are added, edited, or removed, it might take several minutes for those changes to propagate. If it seems like a change is not taking effect, try navigating to/admin/configuration
and clicking "Clear Cache."
Why do vertical images take up so much space?Many services such as iMessage, Slack, and X, require near-instant responses when unfurling link-based content. In order to guarantee sufficient responsiveness, consider rendering pages and image assets ahead of time by enabling static optimization by setting
NEXT_PUBLIC_STATICALLY_OPTIMIZE_PAGES = 1
andNEXT_PUBLIC_STATICALLY_OPTIMIZE_OG_IMAGES = 1
. Keep in mind that this will increase platform usage.
How secure are photos marked “hidden?”By default, all photos are shown full-width, regardless of orientation. Enable matting to showcase horizontal and vertical photos at similar scales by setting
NEXT_PUBLIC_MATTE_PHOTOS = 1
.
My images/content have fallen out of sync with my database and/or my production site no longer matches local development. What do I do?While all hidden paths (
/tag/hidden/*
) require authentication, raw links to individual photo assets remain publicly accessible. Randomly generated urls from storage providers are only secure via obscurity. Use with caution.
I'm seeing server-side runtime errors when loading a page after updating my fork. What do I do?Navigate to
/admin/configuration
and click "Clear Cache."
Why are my thumbnails square?Navigate to
/admin/configuration
and click "Clear Cache." If this doesn't help, open an issue.
Why aren't my Fujifilm simulations importing alongside EXIF data?Absent configuration, the default grid aspect ratio is
1
.NEXT_PUBLIC_GRID_ASPECT_RATIO
can be set to any number (for instance,1.5
for 3:2 images) or ignored by setting to0
.
Why do my images appear flipped/rotated incorrectly?Fujifilm simulation data is stored in vendor-specific Makernote binaries embedded in EXIF data. Under certain circumstances an intermediary may strip out this data. For instance, there is a known issue on iOS where editing an image, e.g., cropping it, causes Makernote data loss. If your simulation data appears to be missing, try importing the original file as it was stored by the camera. Additionally, if you can confirm the simulation mode on camera, you can then edit the photo record and manually select it.
Why does my image placeholder blur look different from photo to photo?For a number of reasons, only EXIF orientations: 1, 3, 6, and 8 are supported. Orientations 2, 4, 5, and 7—which make use of mirroring—are not supported.
Earlier versions of this template generated blur data on the client, which varied visually from browser to browser. Data is now generated consistently on the server. If you wish to update blur data for a particular photo, edit the photo in question, make no changes, and choose "Update."
EXIF-based photo blog with built-in admin panel, Vercel Postgres as CMS, and Vercel Blob for image storage.
EXIF
Photo Bloghttps://github.com/sambecker/exif-photo-blog/assets/169298/4253ea54-558a-4358-8834-89943cfbafb4
NEXT_PUBLIC_SITE_TITLE
(e.g., My Photos)NEXT_PUBLIC_SITE_DOMAIN
(e.g., photos.domain.com)NEXT_PUBLIC_SITE_DESCRIPTION
(optional—mainly used for OG meta)AUTH_SECRET
ADMIN_EMAIL
ADMIN_PASSWORD
/admin
pnpm i
to install dependenciesvercel login
vercel link
to connect the CLI to your projectvercel dev
to start dev server with Vercel-managed environment variables⚠️ READ BEFORE PROCEEDING
Usage of this feature will result in fees from OpenAI. When enabling AI text generation, follow all recommended mitigations in order to avoid unexpected charges and attacks. Make sure your OpenAI secret key environment variable is not prefixed with NEXT_PUBLIC.
OPENAI_SECRET_KEY
AI_TEXT_AUTO_GENERATED_FIELDS = title, semantic
all
(default)title
caption
tags
semantic
none
@vercel/analytics
already included)@vercel/speed-insights
already included)Application behavior can be changed by configuring the following environment variables:
NEXT_PUBLIC_PRO_MODE = 1
enables higher quality image storage (results in increased storage usage)NEXT_PUBLIC_STATICALLY_OPTIMIZE_PAGES = 1
enables static optimization for pages, i.e., renders pages at build time (results in increased project usage)—⚠️ ExperimentalNEXT_PUBLIC_STATICALLY_OPTIMIZE_OG_IMAGES = 1
enables static optimization for OG images, i.e., renders images at build time (results in increased project usage)—⚠️ ExperimentalNEXT_PUBLIC_MATTE_PHOTOS = 1
constrains the size of each photo, and enables a surrounding border (potentially useful for photos with tall aspect ratios)NEXT_PUBLIC_BLUR_DISABLED = 1
prevents image blur data being stored and displayed (potentially useful for limiting Postgres usage)NEXT_PUBLIC_GEO_PRIVACY = 1
disables collection/display of location-based dataNEXT_PUBLIC_IGNORE_PRIORITY_ORDER = 1
prevents priority_order
field affecting photo orderNEXT_PUBLIC_PUBLIC_API = 1
enables public API available at /api
NEXT_PUBLIC_HIDE_REPO_LINK = 1
removes footer link to repoNEXT_PUBLIC_HIDE_FILM_SIMULATIONS = 1
prevents Fujifilm simulations showing up in /grid
sidebar and CMD-K search resultsNEXT_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)Only one storage adapter—Vercel Blob, Cloudflare R2, or AWS S3—can be used at a time. Ideally, this is configured before photos are uploaded (see Issue #34 for migration considerations). If you have multiple adapters, you can set one as preferred by storing "aws-s3," "cloudflare-r2," or "vercel-blob" in NEXT_PUBLIC_STORAGE_PREFERENCE
.
[{ "AllowedHeaders": ["*"], "AllowedMethods": [ "GET", "PUT" ], "AllowedOrigins": [ "http://localhost:3000", "https://{VERCEL_PROJECT_NAME}*.vercel.app", "{PRODUCTION_DOMAIN}" ] }]
NEXT_PUBLIC_CLOUDFLARE_R2_BUCKET
: bucket nameNEXT_PUBLIC_CLOUDFLARE_R2_ACCOUNT_ID
: account id (found on R2 overview page)NEXT_PUBLIC_CLOUDFLARE_R2_PUBLIC_DOMAIN
: either "your-custom-domain.com" or "pub-jf90908...s0d9f8s0s9df.r2.dev" (do not include "https://" in your domain)NEXT_PUBLIC
):CLOUDFLARE_R2_ACCESS_KEY
CLOUDFLARE_R2_SECRET_ACCESS_KEY
[{ "AllowedHeaders": ["*"], "AllowedMethods": [ "GET", "PUT" ], "AllowedOrigins": [ "http://localhost:*", "https://{VERCEL_PROJECT_NAME}*.vercel.app", "{PRODUCTION_DOMAIN}" ], "ExposeHeaders": [] }]
NEXT_PUBLIC_AWS_S3_BUCKET
: bucket nameNEXT_PUBLIC_AWS_S3_REGION
: bucket region, e.g., "us-east-1"{ "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Action": [ "s3:PutObject", "s3:PutObjectACL", "s3:GetObject", "s3:ListBucket", "s3:DeleteObject" ], "Resource": [ "arn:aws:s3:::{BUCKET_NAME}", "arn:aws:s3:::{BUCKET_NAME}/*" ] } ] }
NEXT_PUBLIC
):AWS_S3_ACCESS_KEY
AWS_S3_SECRET_ACCESS_KEY
Vercel Postgres can be switched to another Postgres-compatible, pooling provider by updating POSTGRES_URL
. Some providers only work when SSL is disabled, which can configured by setting DISABLE_POSTGRES_SSL = 1
.
6543
DISABLE_POSTGRES_SSL = 1
Why don’t my OG images load when I share a link?This template statically optimizes core views such as
/
and/grid
to minimize visitor load times. Consequently, when photos are added, edited, or removed, it might take several minutes for those changes to propagate. If it seems like a change is not taking effect, try navigating to/admin/configuration
and clicking "Clear Cache."
Why do vertical images take up so much space?Many services such as iMessage, Slack, and X, require near-instant responses when unfurling link-based content. In order to guarantee sufficient responsiveness, consider rendering pages and image assets ahead of time by enabling static optimization by setting
NEXT_PUBLIC_STATICALLY_OPTIMIZE_PAGES = 1
andNEXT_PUBLIC_STATICALLY_OPTIMIZE_OG_IMAGES = 1
. Keep in mind that this will increase platform usage.
How secure are photos marked “hidden?”By default, all photos are shown full-width, regardless of orientation. Enable matting to showcase horizontal and vertical photos at similar scales by setting
NEXT_PUBLIC_MATTE_PHOTOS = 1
.
My images/content have fallen out of sync with my database and/or my production site no longer matches local development. What do I do?While all hidden paths (
/tag/hidden/*
) require authentication, raw links to individual photo assets remain publicly accessible. Randomly generated urls from storage providers are only secure via obscurity. Use with caution.
I'm seeing server-side runtime errors when loading a page after updating my fork. What do I do?Navigate to
/admin/configuration
and click "Clear Cache."
Why are my thumbnails square?Navigate to
/admin/configuration
and click "Clear Cache." If this doesn't help, open an issue.
Why aren't my Fujifilm simulations importing alongside EXIF data?Absent configuration, the default grid aspect ratio is
1
.NEXT_PUBLIC_GRID_ASPECT_RATIO
can be set to any number (for instance,1.5
for 3:2 images) or ignored by setting to0
.
Why do my images appear flipped/rotated incorrectly?Fujifilm simulation data is stored in vendor-specific Makernote binaries embedded in EXIF data. Under certain circumstances an intermediary may strip out this data. For instance, there is a known issue on iOS where editing an image, e.g., cropping it, causes Makernote data loss. If your simulation data appears to be missing, try importing the original file as it was stored by the camera. Additionally, if you can confirm the simulation mode on camera, you can then edit the photo record and manually select it.
Why does my image placeholder blur look different from photo to photo?For a number of reasons, only EXIF orientations: 1, 3, 6, and 8 are supported. Orientations 2, 4, 5, and 7—which make use of mirroring—are not supported.
Earlier versions of this template generated blur data on the client, which varied visually from browser to browser. Data is now generated consistently on the server. If you wish to update blur data for a particular photo, edit the photo in question, make no changes, and choose "Update."