images.yaml
Every key of config/images.yaml (breakpoints, image defaults and named transforms) and config/sites/<key>/images.yaml.
config/images.yaml holds the install’s image breakpoints, defaults and named transforms. A site’s config/sites/<key>/images.yaml adds transforms or replaces them by name. Image configuration is design, not deployment, so none of it is in engine.yaml.
breakpoints:
md: 48rem
lg: 80rem
transforms:
hero:
aspect: "16:9"
sizes: "100vw"
card:
aspect: "4:3"
widths: [320, 480, 640, 960]
sizes: "(min-width: md) 33vw, 100vw" engine-dmo media transforms prints every resolved transform with its width ladder. See Images.
images.yaml
| Key | Type | Default | Meaning |
|---|---|---|---|
breakpoints | map of string | {} | Named min-widths as CSS lengths, such as md: 48rem, which sizes and sources name |
defaults.density | integer | 2 | The highest pixel density a fixed-width transform serves |
defaults.formats | list of avif, jpeg, png, webp | [avif, webp, jpeg] | The formats every transform generates unless it says otherwise |
defaults.placeholder | blur, dominant, none | dominant | What paints an image’s box before it loads: dominant (its dominant colour), blur or none |
defaults.quality | map of integer | {avif: 55, webp: 75, jpeg: 80} | Quality per format |
defaults.widths | object | {min: 320, max: 2560, ratio: 1.25} | The width range: each width is the previous times ratio, from min to max |
defaults.widths.max | integer | 2560 | See defaults.widths |
defaults.widths.min | integer | 320 | See defaults.widths |
defaults.widths.ratio | number | 1.25 | See defaults.widths |
transforms | map of objects | {} | Named transforms templates use, such as hero or card |
transforms.<key>.animated | first, keep | For an animated source: keep the animation or take the first frame | |
transforms.<key>.aspect | string | The source’s | The proportion, width:height such as 16:9 |
transforms.<key>.background | string | The padding colour for contain | |
transforms.<key>.fit | contain, cover, inside | cover | cover crops to the box around the focal point; contain fits inside and pads with background; inside fits inside and keeps its own proportions |
transforms.<key>.formats | list of avif, jpeg, png, webp | defaults.formats | The formats generated, best first: avif, webp, jpeg, png |
transforms.<key>.height | integer | A fixed height in pixels | |
transforms.<key>.quality | map of integer | defaults.quality | Quality per format, such as { avif: 50 } |
transforms.<key>.sizes | string | The sizes attribute, using breakpoint names | |
transforms.<key>.sources | list of objects | [] | Art direction: another transform used below or from a breakpoint, in a picture |
transforms.<key>.sources[].below | string | A breakpoint name: use transform below it | |
transforms.<key>.sources[].from | string | A breakpoint name: use transform from it up | |
transforms.<key>.sources[].transform | string | Required | The transform to use there |
transforms.<key>.width | integer | A fixed display width in CSS pixels; served at each density up to defaults.density | |
transforms.<key>.widths | list of integer or object | defaults.widths | The widths generated: a list ([480, 800, 1200]) used as written, or a range { min, max, ratio } whose missing keys come from the defaults. Each width 16 to 8192 |
sites/<key>/images.yaml
The same transforms keys as above. A transform here with the same name as the install’s replaces it on this site.
promotions.yaml
Every key of config/sites/<key>/promotions.yaml (engine-dmo): paid promotion slots with their types, capacity, booking length, lead time, eligible tiers and prices, and the promoted label.
Schema files
Every key of a content type file (config/schema/<type>.yaml), of a field definition, and of the shared field groups (schema/_shared.yaml), shared blocks (blocks/_index.yaml) and CRM and enquiry custom field files that use the same field grammar.