Phones were downloading the full 1.5 MB / 2 MB hero JPEG. Now the
image macro emits a `srcset` ladder (480/768/1200/1600/2560/3840/5345 w)
with `sizes="100vw"`, so a 480 px-wide phone picks the ~19 KB variant
and 5K screens still get the native resolution.
Also drop `loading="lazy"` on the first slide — it is the LCP element
and should load eager.
Macro changes:
- Add `srcset_widths` (CSV string, since Tera macros only allow scalar
defaults) and `sizes` parameters.
- Add `lazy=true` parameter; callers can pass `lazy=false` for
above-the-fold images.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Bootstrap-3 caps slide images with `max-width: 100%` only; if the
natural image is narrower than the viewport, the slide stops short
of the column edge. The macro was downscaling to 1920 px, which made
the hero shrink on >1920 px screens.
Match live's behaviour by serving the raw source image (5345 / 5621 px
wide) without resize — the source images are intentionally oversized
for this reason.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Three corrections after diffing the rebuild against the actual theme
twig templates (modular/news.html.twig, employees.html.twig,
about.html.twig):
1. section_title macro learns a `with_anchor` flag for the case where
live always wraps the h2 in `<div class="anchor" id="">` even with
an empty anchor id. Default behavior unchanged.
2. team_carousel macro drops its `.anchor` wrapper around the title.
employees.html.twig renders the h2 directly — including the wrapper
was producing an extra layout element on /team that live doesn't
have.
3. index.html's news section now calls section_title with
with_anchor=true and wraps the loaded news content in an outer <p>,
reproducing the grav markdown pipeline's behavior (the outer <p>
auto-closes on the first inner <p>, leaving one leading empty <p>
that contributes the expected 10px margin).
The image macro was resizing every call to its width arg, including
upscaling 270x180 service thumbnails to 600x400 and rendering 400x400
doctor portraits at full size. Live serves service thumbs at native
270x180 (CSS-floated) and doctor portraits at 200x200.
- image macro: width=0 (default) skips resize, emits raw <img> with no
width/height — lets theme CSS do the sizing, matching live pattern
- img shortcode: defaults width to 0 so callers can omit it
- service grid (home + 7 service pages): drop width=600
- doctor portraits on /team: width=200 (matches live render)
Restores the markup contracts the theme CSS expects on the home page:
- imports section_title macro (st) and calls it on all four sections
- news/about/services/team sections get bordered-icon headings via macro
- service cards use thumbnail/caption/clearfix structure (2-col grid)
- team portraits use figure/figcaption with small for position
- gray-bg (not bg-gray) on the services section
The live site had the Maps iframe removed because third-party embeds
trigger cookie-consent obligations under GDPR. The Phase-1 1:1 pass
accidentally reintroduced it; this commit removes:
- the inline iframe on the home page (templates/index.html)
- the map() shortcode (templates/shortcodes/map.html)
- the {{ map() }} call on the contact page (content/contact.md)
Do not re-add without a working consent gate.
- page.html generic single-page template
- legal.md with slug=impressum to match live URL
- contact.md with practice info, hours, map embed
- map shortcode (iframe-based) usable from markdown
- Home template inlines the map iframe directly (shortcodes can't be called from templates)
- Extends base.html, uses shared image macro for resize_image
- Refactored img shortcode to forward to macros/image.html (DRY)
- News pulled via get_page from content/news.md
- Notfall section skipped (was unpublished in grav)
- Map call commented out until shortcode lands in Task 20
Brummel