Accessing Eager Loaded Transforms

Question

The craft docs on eager loading show you how to eager load image transforms in twig.

{% set entries = craft.entries({
    with: [
        ['coolImage', { withTransforms: ['transform'] }]
    ]
}) %}

However it doesn't show you how to actually USE them once they're eager loaded. Accessing the eager loaded element itself is easy:

{% set teaserImage = entry.coolImage[0] ?? null %}

But I'm not sure how to access the transform from there. Using getUrl('transform') appears to still result in an extra query per element loaded (compared with .url() and no transform).

{{ teaserImage.getUrl("transform") }} {# Boo - extra queries #}

What am I missing?

Thanks :)

Answer 1

It appears that the correct way to do it is using the url() method. I couldn't replicate the extra queries I mentioned in the question, and can confirm with some more testing that it doesn't cause any extra queries.

{{ teaserImage.url("transform") }}

or

{{ teaserImage.getUrl("transform") }}

Source: https://straightupcraft.com/articles/examples-of-eager-loading-elements-in-twig-and-php