79 lines
2.5 KiB
Markdown
79 lines
2.5 KiB
Markdown
# Gallery
|
|
|
|
Static photo gallery for logging meals and food memories.
|
|
|
|
The site is based on the HTML5 UP Lens template and currently ships as a plain static site: HTML, CSS, JavaScript, and local image assets.
|
|
|
|
## Repo Layout
|
|
|
|
- `templates/index.html`: source template for the main gallery page
|
|
- `index.html`: generated static gallery page
|
|
- `assets/`: site CSS, JavaScript, fonts, and audio
|
|
- `images/fulls/`: full-size gallery images
|
|
- `images/thumbs/`: gallery thumbnails
|
|
- `data/meals.json`: source of truth for gallery entries
|
|
- `scripts/build.js`: renders static pages from templates and data
|
|
- `scripts/generate-thumbnails.js`: regenerates thumbnails from the full-size images
|
|
- `package.json`: minimal Node build entrypoint
|
|
|
|
## Content Workflow
|
|
|
|
Gallery entries live in `data/meals.json`, and `index.html` is generated from `templates/index.html`.
|
|
|
|
After editing content or templates, rebuild the site with:
|
|
|
|
```sh
|
|
npm run build
|
|
```
|
|
|
|
The build currently renders the main page without changing the existing Lens gallery structure, so the current client-side viewer code continues to work.
|
|
|
|
If you only need to regenerate thumbnails, run:
|
|
|
|
```sh
|
|
npm run build:thumbs
|
|
```
|
|
|
|
To force a full thumbnail rebuild, run:
|
|
|
|
```sh
|
|
npm run build:thumbs:force
|
|
```
|
|
|
|
## Image Conventions
|
|
|
|
- Full-size images and thumbnails share the same numeric ID
|
|
- Full-size images live at `images/fulls/<id>.jpg`
|
|
- Thumbnails live at `images/thumbs/<id>.jpg`
|
|
- `position` controls the full-screen viewer image alignment
|
|
- `thumbnail.focus` optionally overrides the default center crop for generated thumbnails
|
|
|
|
## Thumbnail Focus
|
|
|
|
Thumbnails are generated from `images/fulls` with `sharp` at `240x320`.
|
|
The generator auto-rotates images using EXIF orientation, skips unchanged files by default, and removes stale thumbnail `.jpg` files that no longer map to a meal entry.
|
|
|
|
For images that should crop away from the center, add optional thumbnail focus metadata to the meal entry:
|
|
|
|
```json
|
|
{
|
|
"id": "34",
|
|
"title": "example",
|
|
"description": "example",
|
|
"thumbnail": {
|
|
"focus": {
|
|
"x": 0.35,
|
|
"y": 0.45
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
The `x` and `y` values are normalized from `0` to `1`, where `0.5, 0.5` is the center of the image.
|
|
|
|
## Planned Features
|
|
|
|
1. Automatic image ingestion, potentially with a stronger data model if the static workflow becomes too limiting.
|
|
2. An Elo-style ranking page that shows two food images at a time and updates rankings automatically based on the selected winner.
|
|
3. General cleanup and history cleanup once the bigger structural changes are in place.
|