Image Transforms on the Fly

Problem

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

Solution

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) }}"
/>

Submitted by Sprocketeer on 1st February, 2017