The image tag and srcset filter can pull a named crop group as its own srcset, markdown gains GFM footnotes, and the table of contents skips visually-hidden headings.
{% image %} tag. Pass a size
kwarg to build the <img> from a named crop/resize group instead of the
default responsive widths. The whole group becomes its own srcset — each crop
keeps its aspect ratio — so a square thumbnail set, a wide banner set, etc.
each get correct srcset/width/height:
{% image 'static/photo.jpg', size='thumb', alt='', sizes='240px' %}.
The size name matches a named entry in your images.sizes config. Widths
come from the compile cache, so soft crops (no fixed height) resolve too.size on the srcset filter. Same idea for the raw attribute — pass the
group name as the second argument:
{{ 'static/photo.jpg' | srcset: 'thumb' }} →
static/photo-thumb-480w.webp 480w, static/photo-thumb.webp 960w.[^1] references and [^1]: definitions
render as linked footnotes in both template engines, via
marked-github-footnote.photo-thumb.webp). The peer dependency is pinned to >=1.2.1.marked upgraded 9 → 18 (renderer hooks now take a token object).size
kwarg instead of the old path-suffix trick..sr-only headings. renderToc no longer lists visually-hidden
headings — a visible table of contents linking to invisible content is
confusing.Named crops keep their own aspect ratio.1
That's why they're deliberately kept out of the default responsive srcset. ↩