Image Transforms on the Fly


You want to perform transforms for assets dynamically without having to define them ahead of time.


Rather than passing your transform handle into image.getUrl(), getWidth(), and getHeight(), just pass an object that defines what you want:

{% set transform = {
    mode: 'scale',
    width: 100,
    height: 100
} %}

<img src="{{ image.getUrl(transform) }}"
     width="{{ image.getWidth(transform) }}"
     height="{{ image.getHeight(transform) }}"