feat(trip): one-liner, description & retina cover on trip list + page

Give trips an optional one-liner (header.tagline) and description (markdown
content), surface them where they help, and fix the soft cover image — all
editable from admin.

- U1: header.cover_image blueprint field → pagemediaselect media picker.
- U2: new macros/cover.html.twig — single source for cover resolution
  (author-selected → first journal image → none; missing file falls back)
  and retina rendering (1x/2x cropResize + srcset). Merged resolve+render
  into one macro since Twig macros can't return a Medium object.
- U3: trip-list card renders the one-liner (when set) and the retina cover.
- U4: trip-page in-column header gains the one-liner, an expandable
  description, and a thin banner strip — gated behind a trip_header_extras
  partial flag (default off) so the shared home active-trip view is
  unchanged (R12/KTD4).
- U5: styles for the card/header one-liner, collapsible description
  (max-height preview, not line-clamp, so it holds across paragraphs) and
  the banner, with a mobile banner-height reduction.

Covers R1–R15. Verified with new Playwright specs + full trip/home/maps
regression against an isolated worktree dev server.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RDS6t8wcpbwKvvrxykVQ5K
This commit is contained in:
2026-07-06 00:02:19 +02:00
co-authored by Claude Opus 4.8
parent b317640dd0
commit ad72739b99
6 changed files with 163 additions and 19 deletions
+5 -14
View File
@@ -1,6 +1,7 @@
{% extends 'partials/base.html.twig' %}
{% block content %}
{% import 'macros/cover.html.twig' as cover %}
<h1 class="trips-heading">Past Trips</h1>
{% set trips = page.children.published()|sort((a, b) => a.date < b.date ? 1 : -1) %}
{% if trips|length == 0 %}
@@ -13,21 +14,11 @@
{% set journal_count = dailies_page ? dailies_page.children.published()|length : 0 %}
{% set story_count = stories_page ? stories_page.children.published()|length : 0 %}
<a class="trip-card" href="{{ trip.url }}">
{% set cover = null %}
{% if trip.header.cover_image and trip.media[trip.header.cover_image] is defined %}
{% set cover = trip.media[trip.header.cover_image] %}
{% elseif dailies_page %}
{% set first_entry = dailies_page.children.published()|first %}
{% if first_entry and first_entry.media.images|length > 0 %}
{% set cover = first_entry.media.images|first %}
{% endif %}
{% endif %}
{% if cover %}
<div class="trip-card-cover">
<img src="{{ cover.cropResize(720, 240).url }}" alt="{{ trip.title }}" loading="lazy">
</div>
{% endif %}
{{ cover.render(trip, trip.title, 720, 240, 'trip-card-cover', '(max-width: 700px) 100vw, 360px') }}
<div class="trip-card-title">{{ trip.title }}</div>
{% if trip.header.tagline %}
<div class="trip-card-tagline">{{ trip.header.tagline }}</div>
{% endif %}
<div class="trip-card-meta">
{% if trip.header.date_start %}
<span class="trip-card-dates">