Adding photos to the Beeldmateriaal gallery
# Adding photos to the Beeldmateriaal gallery
This folder holds the photos for the **Beeldmateriaal** gallery page. That page
([_pages/beeldmateriaal.md](/beeldmateriaal)) is **data-driven**:
it loops over [_data/beeldmateriaal.yml](../../_data/beeldmateriaal.yml). You
never hand-write `![]()
` tags — drop the optimized file in the right subfolder,
then register one line in the YAML.
## 1. Folder = section
Each subfolder is one collapsible section on the page; the page order is the
order of sections in the YAML.
| Folder | Section title |
|--------|---------------|
| `praktijkruimtes-zedelgem` | Praktijkruimtes Zedelgem |
| `praktijkruimtes-varsenare` | Praktijkruimte Varsenare |
| `sfeerfotos` | Sfeerfoto's |
| `logopediemateriaal` | Logopediemateriaal |
| `collegas` | Collega's |
## 2. Naming
`-NN.jpg` — two-digit, zero-padded, **continuing the highest existing
number** in that folder (e.g. the next `sfeerfotos` photo is `sfeerfotos-20.jpg`).
Always the `.jpg` extension — never `.jpeg` or `.png`.
## 3. Optimize before committing (macOS, zero-install)
Target: **longest edge ≤ 1400 px, JPEG quality 68** — in line with the rest of
the gallery (≈100–300 KB per photo). Only ever **downscale**; never upscale a
smaller image (it just adds bytes, no detail).
```bash
# Larger than 1400 px on its longest edge -> downscale + recompress:
sips -Z 1400 -s format jpeg -s formatOptions 68 SOURCE.jpg --out sfeerfotos/sfeerfotos-20.jpg
# Already ≤ 1400 px -> just copy it in (no recompression; keeps EXIF intact):
cp SOURCE.jpg sfeerfotos/sfeerfotos-20.jpg
```
## 4. Register it in `_data/beeldmateriaal.yml`
Add one entry under the matching section's `images:` list:
```yaml
- { file: "sfeerfotos-20.jpg", w: 480, h: 640, alt: "Korte Nederlandse beschrijving" }
```
- **`w` / `h` are the DISPLAY dimensions** (with EXIF orientation applied), not
the stored ones. Phone photos are often stored landscape but display portrait;
using the wrong numbers causes layout shift (CLS, a Core Web Vitals signal).
Read the *display* size with:
```bash
mdls -name kMDItemPixelWidth -name kMDItemPixelHeight sfeerfotos/sfeerfotos-20.jpg
```
A brand-new file may need `mdimport ` first so Spotlight reports it. For
a photo with no EXIF rotation, `sips -g pixelWidth -g pixelHeight` gives the
same numbers.
- **`alt`** is descriptive **Dutch** — it's the strongest image-SEO and
accessibility signal. 6–14 words; no `foto van`/`afbeelding van`; no trailing
period; no quotes inside the string. Mention location
(Zedelgem/Varsenare/"in de praktijk"), season/theme, or purpose
("om … te oefenen") where it fits. Match the tone of the existing entries.
## 5. Don't
- Don't add `loading="eager"` or `fetchpriority` anywhere — the template already
marks the first photo of the first section as the LCP image and lazy-loads
every other photo automatically.
- Don't use the `.gallery` class or touch the page HTML — the optimized file
plus the YAML line is all that's needed.
Verify with `bundle exec jekyll build`, then confirm `_site/beeldmateriaal.html`
contains the new `![]()
`. See the root [CLAUDE.md](../../CLAUDE.md) for the
Ruby 3.3 / Bundler setup.