Beta for Kirby 6. Install it with composer require timnarr/kirby-imagex:^0.6@beta. For Kirby 5, stay on 0.5.x.
Added
- New
stackplugin option: the name of a Kirby 6 template stack in your<head>. When set, theimagex-picturesnippet pushes its<style>element (art-direction andfocusstyles) into it instead of rendering it next to the<picture>. Defaults tonull, which keeps the previous output. - New
preloadsnippet option: adds<link rel="preload" as="image">elements withimagesrcset/imagesizesfor critical images to thestack. One format per source (respectingcompareFormats), and art-directed sources get mutually exclusivemediaconditions, so only the image<picture>actually uses is fetched. The exclusions use the Media Queries Level 4 range syntax where possible:(width >= 800px)and(min-width: 800px)are negated as(width < 800px). Requiresloading: 'eager'and thestackoption, both validated with a descriptive error. - New public
Imagex::getPreloadLinks()andImagex::getStack()getters. Theimagex-picture-jsonsnippet outputs the links under the new top-levelpreloadLinkskey (omitted when empty). - New
formatssnippet option: overrides the globalformatsfor a single image, e.g.['webp']for animated GIFs (Kirby converts them to a still AVIF) or[]for no modern formats.null(default) uses the global option.
Fixed
- Bug: With
compareFormatsand an art-directedimage, the art-directed image could be ignored.<source>elements were grouped by format, so when the art-directed image skipped AVIF but the main image didn't, the default AVIF<source>(nomedia) came first and always matched in AVIF browsers.<source>elements are now grouped by source: eachartDirectionentry in all its formats, then the main image in all its formats. The order of<source>elements changes for every art-directed<picture>with more than one format; browsers still pick the same image, except in the buggy case above. Migration: if your CSS or JavaScript relies on the position of<source>elements, select them bymediaortypeinstead. - An
artDirectionentry with its ownimagenow keeps every format its own comparison keeps, even ifcompareFormatsskipped that format for the main image. Previously a format skipped for the main image was skipped for every source. - Files Kirby can't resize (e.g. SVGs) are rendered as a plain
<img>with the original file assrc. Previously every format got a<source>listing the original SVG under every width, with a wrongtypelikeimage/avif.compareFormatsis skipped for them.
Changed
- BREAKING: An
artDirectionentry using a file Kirby can't resize (e.g. an SVG), directly via its ownimageor by falling back to the main image, now throws a descriptiveInvalidArgumentException. Previously it rendered<source>elements that repeated the original file under every width and format. Migration: give the entry its own resizableimage(JPEG, PNG, WebP, AVIF …), or leave outartDirectionfor such files. - BREAKING: Kirby 6 is now required (
extra.kirby.compatibleis^6.0). Kirby 5 is no longer supported. Migration: upgrade your site to Kirby 6, or stay on0.5.xwhile you are on Kirby 5. Aconflictwithgetkirby/cms< 6.0 keeps Composer from installing this version into a Kirby 5 project. No option names, snippet variables or output changed. - BREAKING: PHP 8.3 is now the minimum version (Kirby 6 requires it). PHP 8.2 is no longer supported.
- README, examples and error messages use the Media Queries Level 4 range syntax, e.g.
(width >= 800px)instead of(min-width: 800px). Your ownmediastrings are output unchanged.