Canvas now provides an apply_image_style Twig filter that applies a Drupal image style to an image array, returning a new array with the styled derivative URL and transformed dimensions.
The filter accepts an image array (with src, width, height, and alt) and an image style machine name.
Use the apply_image_style filter directly in Twig templates:
{% set styled = image|apply_image_style('thumbnail') %}
{% include 'canvas:image' with styled only %}
It can also be combined with Canvas's responsive image handling (recommended):
{% set styled = image|apply_image_style('16_9_crop') %}
{% include 'canvas:image' with styled|merge({
sizes: '(max-width: 768px) 100vw, 50vw',
}) only %}
This lets you combine server-side image effects (such as cropping with focal point) with Canvas's automatic responsive image generation.
Portability note
Image styles are site configuration meaning they are not shipped with the component. If you want your components to be transferable between sites, prefer client-side image transforms (such as CSS object-fit and aspect-ratio) over apply_image_style. Use this filter for cases where server-side processing is necessary, such as focal-point cropping that cannot be achieved in the browser.
