Files
immich-folio/docs/journal.md
Ralksta 3193c500e4 release: v0.18.0 (#725)
Release v0.18.0 — merges `dev` into `main`.

## Thanks

- [@lancetm714](https://github.com/lancetm714) for the accent-contrast
fix (#680 → #724).
- [@RichKidsDev](https://github.com/RichKidsDev) for reporting the
outdated Impressum (#697).

### Security

- **Journal drafts and password-protected entries no longer render
publicly
  as a subpage essay**
  ([#684](https://github.com/ralksta/immich-folio/pull/684),

[GHSA-987w-cpwm-c9g9](https://github.com/ralksta/immich-folio/security/advisories/GHSA-987w-cpwm-c9g9),
medium). A subpage's `essayFile` read the journal entry straight from
disk,
skipping the draft and password rules `/journal/<slug>` applies. It now
resolves through the same rules: a draft reads as missing for visitors,
and
  a protected entry shows its password gate, sharing the
  `lb_auth_journal_<slug>` cookie.

- **Immich descriptions are escaped in generated subpage essays**
  ([#684](https://github.com/ralksta/immich-folio/pull/684),

[GHSA-8ppx-39jv-q5xm](https://github.com/ralksta/immich-folio/security/advisories/GHSA-8ppx-39jv-q5xm),
  low). The essay built from a subpage's albums (`layout: essay` without
markdown) put each asset's Immich description into the page as raw HTML.
Captions are now HTML-escaped, and they go through `assetCaption()`, so
  `exif.caption: false` is respected there as well. Tracked in
  [#689](https://github.com/ralksta/immich-folio/issues/689).

- **Admin drafts no longer keep a typed password, and the contact form's
  email check runs in linear time**
([#727](https://github.com/ralksta/immich-folio/pull/727)). The admin's
  session drafts wrote a password as typed to `sessionStorage`; a draft
holding a plaintext password is now not kept (the unsaved-changes guard
still warns). The email pattern could backtrack polynomially on a
crafted
domain; its labels now exclude the dot and the length is checked first.
  Both found by CodeQL before release.

### Added

- **A built-in contact form with an inbox in the admin**
  ([#703](https://github.com/ralksta/immich-folio/pull/703), closes
[#702](https://github.com/ralksta/immich-folio/issues/702)). `/contact`
  needs neither SMTP nor a form service: each message is one file in
`content/messages/` (mode `0600`), read under the new _Messages_ tab,
where
_Reply by email_ opens the owner's mail client with the message quoted.
Messages older than `contact.retentionDays` (default 90) are deleted. An
optional ntfy push goes to `contact.notifyUrl` or `CONTACT_NOTIFY_URL`,
and
since [#709](https://github.com/ralksta/immich-folio/pull/709) it
carries a
  fixed "new message" line and nothing about the sender — no name, no
  address, no text. Spam is kept out without a captcha: an off-screen
honeypot, a minimum fill time, three submissions a minute per IP and a
cap
of 500 stored messages. With the Impressum on and no `legal.contactUrl`,
the Impressum links the form as its second contact channel. A new doctor
  check warns when the form is on but nobody is notified.

- **A privacy policy page, next to a list of what the site processes**
  ([#708](https://github.com/ralksta/immich-folio/pull/708)). `/privacy`
renders `content/privacy.md`, edited under Settings → Legal, and the
footer
links it once the file has text; `privacy.enabled: false` hides it.
Folio
writes no legal text. Beside the editor it lists what _this_
installation
  does, read off the configuration — the map, statistics, contact form,
password cookies, CDN — and marks every entry that involves a third
party.
_Insert headings_ adds the matching section headings and nothing else.
The
  doctor warns while the Impressum is on and there is no policy.

- **French, Spanish, Italian and Dutch interface translations**
([#681](https://github.com/ralksta/immich-folio/pull/681)), selected
with
  `settings.yaml: lang` as before. The admin panel stays English.

- **CDN mode for photos and videos**
([#681](https://github.com/ralksta/immich-folio/pull/681)). With
`CDN_URL`
set, image and video URLs point at a pull CDN whose origin is this
server,
  so repeat views reach neither the server nor Immich. A site password
switches the mode off, since a CDN would hand out cached photos without
  checking the unlock cookie. The CDN origin is added to the CSP, and a
  doctor check covers the password and `TRUSTED_PROXY_HOPS` cases. See
  `docs/deployment.md#cdn-mode`.

- **A reworked admin panel**
  ([#712](https://github.com/ralksta/immich-folio/pull/712),
  [#713](https://github.com/ralksta/immich-folio/pull/713),
  [#714](https://github.com/ralksta/immich-folio/pull/714),
  [#716](https://github.com/ralksta/immich-folio/pull/716),
  [#717](https://github.com/ralksta/immich-folio/pull/717),
  [#718](https://github.com/ralksta/immich-folio/pull/718),
  [#719](https://github.com/ralksta/immich-folio/pull/719),
  [#721](https://github.com/ralksta/immich-folio/pull/721)):
- **A sidebar instead of the header row**, grouped by task, with an
unread
    count on Messages and a dot on Diagnostics while Immich is down. It
    collapses to an icon rail, with names shown on hover and focus, and
    remembers that per browser.
  - **`/admin` is an overview**: what needs attention (unread messages,
    doctor warnings), published pages, journal entries and recent views.
  - **The site's own visual language** — the preset's fonts, hairline
borders, the square marker — and one page header on every screen. The
accent is kept for the current place and the primary action; switches
    are now pills reading ON or OFF, in green rather than the accent, so
    Studio Modern's red no longer makes an enabled setting look like an
    error.
- **The page builder is a structure list and a panel.** Hero, subpages
and
standalone albums sit in one list on the left, subpages drag-sorted in
    place; the selected entry is edited on the right instead of in an
    overlay.
- **Dialogs only where a change is permanent.** Deleting a message or a
journal entry, and resetting the favicon (which used to delete the file
without asking), go through one confirm dialog in the admin's own look.
Removals in the page builder, which only touch unsaved state, happen at
    once and offer _Undo_. No `window.confirm()` is left.
  - **Feature switches are grouped by meaning** as one-line rows under
Settings → General; page transitions and scroll-to-top moved to Theme →
    Look & motion. No setting keys changed.

### Changed

- **Fonts and the Leaflet stylesheet are served from the site itself**
([#700](https://github.com/ralksta/immich-folio/pull/700)). Every page
used
to link `fonts.googleapis.com`, which sends each visitor's IP address to
Google. The server now fetches a theme's Google fonts once, rewrites the
  stylesheet and caches the files in `content/.fonts/`; custom fonts in
`theme.fonts` keep working. If Google cannot be reached before a font is
  cached, the page falls back to the theme's system fonts. `leaflet.css`
  comes from the npm package instead of unpkg. The CSP drops
  `fonts.googleapis.com`, `fonts.gstatic.com` and `unpkg.com`.

- **Email addresses are kept out of the served HTML**
([#705](https://github.com/ralksta/immich-folio/pull/705)). The
Impressum
and footer render the address only after hydration, from an encoded
form,
  so harvesters reading raw HTML find nothing. Without JavaScript the
Impressum shows `name [at] example [dot] de`. This defeats bulk
harvesting,
  not a person with a browser.

- **The Impressum cites § 5 DDG and links its contacts**
  ([#698](https://github.com/ralksta/immich-folio/pull/698), reported in
  [#697](https://github.com/ralksta/immich-folio/issues/697) by
[@RichKidsDev](https://github.com/RichKidsDev)). The TMG was replaced by
the
DDG in May 2024; `legal.heading` replaces the line for other laws (e.g.
  § 5 ECG in Austria). `legal.contactUrl` and `legal.contactLabel` add a
  contact form as the second channel, so a phone number stays optional.
  Email, phone and contact URL are now links, and the "Created with the
Impressum generator by eRecht24" line, shown on every site whether true
or
not, is gone. Settings → Legal gains fields for heading, contact URL,
VAT
  ID and tax number, and a doctor check flags missing details.

- **Missing pages answer `404`**
([#704](https://github.com/ralksta/immich-folio/pull/704)). Every
missing
  page used to answer `200`, because streaming had started before
`notFound()` ran. `/contact`, `/impressum`, `/map` and `/privacy` while
switched off, and `/journal/<slug>` without an entry, now return a real
404 with the same not-found page. Album and subpage slugs still depend
on
  Immich and stay soft 404s.

- **Passwords set in the admin are stored as scrypt hashes**
  ([#706](https://github.com/ralksta/immich-folio/pull/706), closes
  [#690](https://github.com/ralksta/immich-folio/issues/690)). Subpage,
album, journal-entry and site passwords were written as typed. The save
routes now hash them; a stored hash reads _Protected_ with _Change_ and
_Remove_ and is never put into an input. Visitors who unlocked a page
stay
signed in across unrelated saves. Existing plaintext passwords are
hashed
  the next time their file is saved in the admin.

- **One notification surface in the admin**
([#707](https://github.com/ralksta/immich-folio/pull/707)) replaces
every
`alert()`: errors stay until dismissed, successes clear themselves, and
  screen readers announce both.

### Fixed

- **Map tiles load again**
([#701](https://github.com/ralksta/immich-folio/pull/701)). CARTO
started
answering every tile with an "API KEY REQUIRED" image, leaving `/map`
and
journal map blocks as a grey grid. Tiles now come from OpenStreetMap;
the
  dark look is a CSS filter, so the map now follows the colour mode.

- **The page builder no longer drops a subpage's `proofing:` flag on
save**
([#711](https://github.com/ralksta/immich-folio/pull/711)). A page
switched
  off for proofing by hand reverted after any unrelated edit.

- **Unsaved edits in Settings and About survive switching admin tabs,
and a
  backup restore is no longer overwritten by the next save**
([#687](https://github.com/ralksta/immich-folio/pull/687)). Editors that
were open during a restore now reload and offer unsaved edits back as a
  conflict. Also: "Restore my changes" after a conflict found nothing,
removing an album left its drawer showing the next album, and the
journal
  saved (rotating a backup) without changes.

- **Accent-backed buttons stay readable with a light or malformed
accent**
  ([#724](https://github.com/ralksta/immich-folio/pull/724), supersedes
[#680](https://github.com/ralksta/immich-folio/pull/680)) — contributed
by
  [@lancetm714](https://github.com/lancetm714). A white accent made the
  proofing dialog's _Download selected (.zip)_ button white on white.
`theme.accent` is now accepted as hex only and normalised to `#rrggbb`,
anything else falls back to the preset, and the proofing dialog and
filter
  pills use the mode-aware `--on-accent` text colour from #688.

- **Every preset's accent is visible in both colour modes**
([#688](https://github.com/ralksta/immich-folio/pull/688)). Presets had
one
accent for both modes; minimal's dark mode drew black buttons on black.
  Presets now carry a light and a dark accent, and text on accent-filled
  buttons picks black or white for contrast. A custom accent stays the
  owner's choice in both modes.

- **Visitor-side inconsistencies**
([#685](https://github.com/ralksta/immich-folio/pull/685)): after
visiting
`/impressum`, every subpage header turned centred and uppercase; back
links
  announced "Back to Back to …"; the hero EXIF chip ignored
`exif.location`/`camera`/`settings`; videos in journal entries opened as
  stills; the setup screen named a non-existent `.env.example`.

- **An essay's lightbox walks only the photos the story shows**
([#686](https://github.com/ralksta/immich-folio/pull/686)), not every
photo
of the subpage's albums, and the proofing bar in essays shows the
selection
  count instead of a filter button that did nothing.

- **The page panel scrolls with the mouse wheel**
  ([#720](https://github.com/ralksta/immich-folio/pull/720)).

- **The journal editor's top bar wraps on phones**
  ([#723](https://github.com/ralksta/immich-folio/pull/723), closes
[#675](https://github.com/ralksta/immich-folio/issues/675)), so the
title
  stays editable and Save stays on screen.

- **Every admin form field has a name for assistive technology**
([#715](https://github.com/ralksta/immich-folio/pull/715)). Only two
inputs
had a linked label; 47 are linked now, and clicking a label focuses its
  field.

### Internal

- **`SettingsEditor` and `PageBuilder` are split up**
  ([#710](https://github.com/ralksta/immich-folio/pull/710),
[#711](https://github.com/ralksta/immich-folio/pull/711)). The
2,200-line
settings editor is a shell with one file per section; the page builder's
YAML handling and edits are pure functions under test. Both were checked
  side by side against `dev` for identical output.
- **`useAdminFetch()`**
([#707](https://github.com/ralksta/immich-folio/pull/707))
gives Analytics, Messages, Backups and the journal list one loading and
  error pattern.
- README brought up to v0.17.0
  ([#678](https://github.com/ralksta/immich-folio/pull/678),
  [#679](https://github.com/ralksta/immich-folio/pull/679)).

### Upgrade notes

**`content/` gains two directories the app writes to:**
`content/.fonts/`
for the cached fonts and `content/messages/` for contact-form messages.
Both
are created on demand, so a writable `content/` is enough, as before.

**The server needs outbound HTTPS to Google once per font** to fill the
font
cache. Until then pages fall back to the theme's system fonts. Visitors'
browsers no longer contact Google.

**A custom CSP or reverse-proxy allowlist** must now allow
`tile.openstreetmap.org` for images instead of
`*.basemaps.cartocdn.com`,
and no longer needs `fonts.googleapis.com`, `fonts.gstatic.com` or
`unpkg.com`. The built-in CSP is updated.

**`theme.accent` must be hex** (`#rgb`, `#rrggbb` or `#rrggbbaa`).
Anything
else, including a value without `#`, falls back to the preset's accent.

**Plaintext passwords in `gallery.yaml`, `settings.yaml` or journal
entries**
are hashed the next time that file is saved in the admin; one save
clears the
doctor's warning.

**New, optional settings:** `contact.*` (the form is off by default),
`privacy.enabled`, `legal.heading`, `legal.contactUrl`,
`legal.contactLabel`,
and the `CDN_URL` and `CONTACT_NOTIFY_URL` environment variables. See
`content/settings.yaml.example` and `.env.local.example`. In the example
file,
`vatId` and `taxId` had swapped sample values; check yours if you copied
them.

No `IMAGE_CACHE_VERSION` bump is needed this time.

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: ralksta <ralksta@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
Co-authored-by: Ralf <rohlenbo79@gmail.com>
Co-authored-by: Paul Thies <110185070+ImScheinox@users.noreply.github.com>
Co-authored-by: lancetm714 <108419425+lancetm714@users.noreply.github.com>
Co-authored-by: Lance Martin <lancetaylor95@gmail.com>
2026-09-27 14:43:38 +02:00

15 KiB

Journal & Photo Essays

Immich Folio has two ways to publish long-form, text-and-image storytelling. They share one Markdown format and one renderer, and differ only in where the result appears:

Feature Lives in URL Use for
Journal content/journal/*.md /journal/<slug> A running series of stories, listed on a /journal index page
Photo Essay content/essays/*.md the subpage's URL Turning one subpage of your gallery into a single narrative page

If you are unsure: use the Journal. A photo essay is the older mechanism and is tied to a subpage; the journal is a standalone section with its own index, cover images, reading times, and drafts.

Contents:

Journal Entries

Each entry is one Markdown file in content/journal/. The filename is the URL slug — content/journal/iceland-highlands.md is served at /journal/iceland-highlands.

A /journal link appears in the site navigation automatically as soon as at least one published (non-draft) entry exists. There is no setting to turn the journal on: an empty content/journal/ directory means no journal.

The journal index listing entries with cover images, dates and reading times

The index at /journal — cover image, title, date and reading time per entry.

A template ships with the project:

cp content/journal/sample-story.md.example content/journal/my-first-story.md

The template is an .example file on purpose — it references no asset IDs (those are specific to your Immich server), so copying it gives you a working skeleton rather than a page full of broken images.

Frontmatter

Optional YAML block at the top of the file:

---
title: 'The Icelandic Highlands'
subtitle: 'A visual journey across volcanic deserts and arctic silence'
author: 'Your Name'
date: '2026-08-05'
coverAssetId: 'asset-uuid-for-the-cover'
draft: false
password: 'clients-only'
---
Field Description
title Entry heading and browser/OG title. Defaults to the slug.
subtitle Subline under the heading; also used as the meta description.
author Shown in the entry byline.
date Publication date shown on the index and the entry.
coverAssetId Immich asset UUID used as the index card image and the OG preview image.
draft true hides the entry from visitors — see Drafts.
password Gates this single entry — see Password-protected Entries.

Reading time and the index excerpt are computed from the text; you do not configure them.

Every one of these fields is also a form control in the Journal Studio, behind Story Settings:

The Story Settings dialog: subtitle, author, publish date, cover photo, password and draft toggle

The same frontmatter, as a form — including the cover picker, the password field and the draft toggle.

Block Syntax

The parser is deliberately small. It understands headings, paragraphs, quotes and photos — one block per blank-line-separated chunk.

Headings

# Into the Wilderness

## Landmannalaugar

# through ###### are supported.

Text

Plain paragraphs. Inline **bold**, *italic* and [links](https://example.com) work; links open in a new tab. Everything else is escaped rather than passed through, so a paragraph can never inject HTML into the page.

Quotes

> Silence in the highlands is a physical weight. -- Anonymous

Text after a -- separator becomes the attribution line.

Photos

Photos are referenced by their Immich asset UUID, not by a file path:

![asset-uuid:fullbleed](Optional caption)
![asset-uuid:wide](Optional caption)
![asset-uuid](Optional caption)
Suffix Width
:fullbleed Edge to edge, breaking out of the text column
:wide Wider than the text column, but still inset
(none) Contained — same width as the text

Two UUIDs separated by a comma render as a side-by-side pair, sized to their real aspect ratios rather than forced equal:

![asset-uuid-left, asset-uuid-right](Optional caption)

Three or more render as a grid — rows of up to three, each row justified like a pair (one shared height, widths from the real ratios, nothing cropped), stacked on phones:

![uuid-1, uuid-2, uuid-3, uuid-4](Optional caption)

Photos in an entry open in the same lightbox as the rest of the site, with keyboard and swipe navigation.

Facts

A ::facts line followed by Label: Value lines in the same paragraph renders as a compact definition list — distance and elevation for a hike, date and venue for a wedding:

::facts
Distance: 21 km
Elevation: 1,240 m
Start: 08:30

The first colon splits label from value, so a time keeps its :. Values take the same inline markdown as text. Lines without a colon are ignored.

Map

A ::map line, with an optional caption after it, starts a map. The lines after it say what is on it — numbered pins in the order written, joined by a line:

::map Busan → Seoul
Busan harbour: 35.098, 129.036
photo: 8f1c0e2a-…
photos: all
Seoul: 37.566, 126.978
line: off
Line Puts on the map
Label: lat, lng A point with a label, exactly where you typed it.
lat, lng A point without a label.
photo: <uuid> One of the entry's photos, placed by its GPS. Several ids may follow, comma-separated.
photos: all Every geotagged photo in the entry, in the order they appear — skipping ids already listed above.
line: off No connecting line. The default draws one when there are two or more pins.

A map with no lines renders nothing. photo, photos and line are reserved as labels; a coordinate pair that does not parse, or lies outside ±90 / ±180, is ignored (the Studio warns before you save).

Typed points are published as typed — they are your content. Photo pins are derived from EXIF, so they follow each album's location: setting the way the map page does: hidden and country add no pin, city snaps to the same 5 km grid, and where an album allows exact positions a journal pin is still snapped to a 1 km grid — the map page shows the mean of an album's photos in a city, never a single photo, and a story map should not be the first surface that places one photo at its doorstep. Photo pins are computed when the page renders; the Studio's preview shows typed points right away and leaves photo pins for the live page.

The block renders only while map: true is set in settings.yaml, typed points included — that setting also means "no map tiles from CartoDB for my visitors".

Album

"The first twelve of the Seoul album", without picking each photo:

::album 371336b4-eb59-409c-b24e-a613f81ede5a
count: 12
skip: 0
layout: grid
caption: Twelve from Seoul
Line Meaning
::album <id> The Immich album id — the Studio's album picker fills it in.
count: N How many photos. Default: the whole album.
skip: N Offset, so two blocks can split one album. Default 0.
layout: … grid (rows of three, default), pairs (rows of two) or wide (one per row).
caption: … One caption under the set.

The block is expanded into ordinary photo blocks when the page renders, so the lightbox and everything else work as for hand-picked photos. Photos come in the album's order; if the gallery pins a manual assetOrder for that album, those come first. The album need not be published in gallery.yaml — an entry may already show any single photo by id, and the author's pick is the gate for a whole album just the same.

A rendered journal entry with heading, body text, a fullbleed photo and a quote

A rendered entry — headings, body text, a fullbleed photo and a pull quote, from the blocks above.

Tip

Writing asset UUIDs by hand is tedious. In the Journal Studio, Add Block → Photo, 2-Photo Pair and Photo Grid open the asset picker and fill the UUIDs in for you; Facts and Map have their own small forms. New entries can also start from a template — Wedding, Hiking, Travel and the others — instead of an empty editor.

Drafts

draft: true in the frontmatter keeps an entry out of the /journal index and out of the navigation link check — but a logged-in admin still sees it, both in the index and at its URL. That makes the draft a preview of the real page rather than a separate preview mode.

Drafts are not secret: the entry stays reachable at its URL for anyone who knows the slug. Use a password if it must not be readable.

Password-protected Entries

A password in the frontmatter puts the entry behind the same gate used for subpages and albums. The unlock cookie is lb_auth_journal_<slug> and expires after 24 hours.

A password set in Journal Studio is stored as a scrypt:salt:hash, never as typed. For hand-written frontmatter the same format described in Gallery Configuration applies. A plaintext password works but is logged as a warning.

Journal Studio

The admin panel's Journal tab lists every entry — drafts included, marked as such — with its cover, date and password state:

The Journal tab listing entries with covers, dates and draft badges

Published and draft entries side by side; the lock marks an entry with a password.

Opening one gives a split-screen editor: blocks on the left, a live preview of the real page on the right, with a draggable divider between them (mouse, keyboard, and touch).

The Journal Studio: block editor on the left, live preview of the entry on the right

The Journal Studio — every block on the left, the real page on the right.

  • Add Block — heading, text, quote, photo, or photo pair
  • Photo picker — browse your Immich library and insert the asset UUID
  • Cover image, title, subtitle, author, date, draft, password — the frontmatter fields, as form controls
  • Reorder and delete blocks; each block carries a type chip so a long entry stays scannable
  • Save writes content/journal/<slug>.md in exactly the format documented above, with a backup of the previous version in content/journal/.backups/

Everything the studio writes can be edited by hand afterwards, and vice versa — the studio parses the same files.

Note

Entries written before the current photo syntax may contain position-based photo references. The studio marks those blocks instead of silently misrendering them, so they can be repointed at an asset UUID.

Photo Essays on a Subpage

A subpage can render a Markdown essay instead of an album grid. Point it at a file, inline the text, or let it build itself from the albums:

subpages:
  - name: Highlands
    title: 'Icelandic Highlands'
    subtitle: 'A Photo Essay'
    essayFile: 'sample-story' # content/journal/sample-story.md
    albums:
      - 'album-uuid-iceland-1'
Key Description
essayFile A slug, not a path — resolved as content/journal/<slug>.md, then content/essays/<slug>.md
essayText The essay Markdown inline in gallery.yaml — what the admin block editor writes
grid.layout essay — renders as an essay even without essayFile or essayText

Any one of the three switches the page into essay mode; setting essayFile or essayText implies it, so grid.layout: essay is only needed on its own.

Important

essayFile takes a bare slug — letters, digits, - and _. A path such as content/essays/sample-story.md is rejected (dots and slashes are not valid slug characters) and the page falls back to the generated essay below.

The Markdown format is identical to a journal entry, including the photo block syntax. The admin panel has a visual block editor for essayText under the subpage's settings.

The album list is used either way: it supplies the photos the lightbox pages through. And with grid.layout: essay but no Markdown at all, the essay is generated from those albums — one heading per album, followed by its photos, using each photo's Immich description as the caption.