Focal Point

A minimal photo gallery template. Drop in your images and deploy.

Usage

1. Put your JPG/JPEG/PNG images in the images/ folder
2. Run the setup script (or wire up images manually)
3. Deploy

Setup script

Requires ImageMagick and Python 3.

macOS

brew install imagemagick

Linux (Debian/Ubuntu)

sudo apt install imagemagick python3

Linux (Fedora/RHEL)

sudo dnf install imagemagick python3

Windows

winget install ImageMagick.ImageMagick Python.Python.3

The script requires Bash — run it via WSL or Git Bash.

---

./lib/optimise.sh

This will:

• Compress and resize any images over 1920px wide (quality 80)
• Skip images already optimised
• Add new images to index.html automatically with alt text

AI naming

Wire up images with an LLM

Put your images in images/ and give this prompt to any LLM with access to your project:

List all files in the images/ directory, then update index.html to display them.
Replace the existing <img> tags inside <div class="image-container"> with one <img> tag
per image file. Set src to the relative path (e.g. images/photo.jpg or images/photo.png) and write a
meaningful, descriptive alt attribute for each one that describes the image content,
not just the filename. For camera-generated names (DSC*, IMG*, etc.), describe what
the image likely depicts based on any context available.

Better alt text for camera files (macOS)

For camera-generated filenames (DSC*, IMG*, etc.), install the macOS Vision framework to generate descriptive alt text automatically:

pip3 install pyobjc-framework-Vision

View locally

Install Python from python.org if you don't have it, then:

python3 -m http.server

Then open http://localhost:8000.

Deploy

Vercel

npm i -g vercel
vercel

Or drag the project folder into vercel.com/new.

Netlify

Drag the project folder into app.netlify.com/drop. Done.

Accessibility

See ACCESSIBILITY.md for our commitment, known limitations, and how to report issues.

License

MIT