Overriding format and specifying srcset-style sizes when eager loading asset transforms

[BigglesZX]

Hi folks,

I'm in the weeds a bit with eager-loading and I wanted to check whether what I'm trying to do is actually supported.

My previous tactic for responsive images was to define a large number of asset transforms sizing in multiples – e.g. square320, square640, square960 etc – and reference those directly in my srcset attributes like this:

{# `image` is an asset already eager-loaded #}
<img srcset="
        {{ image.getUrl('square960') }} {{ image.getWidth('square960') }}w,
        {{ image.getUrl('square640') }} {{ image.getWidth('square640') }}w,
        {{ image.getUrl('square320') }} {{ image.getWidth('square320') }}w"
     src="{{ image.getUrl('square320') }}">

I refactored to use getSrcset() instead, supplying a transform handle and width parameters, to simplify this. So far, so good. I now just have one square transform defined as 320×320:

{# `image` is an asset already eager-loaded #}
<img srcset="{{ image.getSrcset(['1920w', '1600w', '1280w', '960w', '640w', '320w'], 'square') }}"
     src="{{ image.getUrl('square') }}"
     width="{{ image.getWidth('square') }}"
     height="{{ image.getHeight('square') }}">

I then decided to refactor again to use picture and additional source elements to provide webp format images, so I added another call to getSrcset() and supplied a hash overriding the format:

{# `image` is an asset already eager-loaded #}
<picture>
    <source srcset="{{ image.getSrcset(['1920w', '1600w', '1280w', '960w', '640w', '320w'],
                                       { transform: 'square', format: 'webp' }) }}"
            type="image/webp">
    <img srcset="{{ image.getSrcset(['1920w', '1600w', '1280w', '960w', '640w', '320w'], 'square') }}"
         src="{{ image.getUrl('square') }}"
         width="{{ image.getWidth('square') }}"
         height="{{ image.getHeight('square') }}">
</picture>

However, this has created a lot of additional database queries (the examples above are minimal cases; in practice I'm using more asset transforms and multiple images) – I assume because of the large number of transforms that result. Up to this point I've been exhaustively using eager-loading for entries and assets, but not for asset transforms. And trying to add eager-loading for the above scenario has got me a bit confused.

In the section template that renders the above markup, I have an entry with a Matrix field called blocks, one type of which is called standard which contains an asset field called image. Let's say I've also added another transform called hero. I'm doing my eager-loading at the top of the template like this:

{% do craft.app.elements.eagerLoadElements(
    className(entry),
    [entry],
    [
        'blocks',
        ['blocks.standard:image', {
            withTransforms: [
                'square',
                '1920w', '1600w', '1280w', '960w', '640w', '320w',
                { transform: 'square', format: 'webp' },
                '1920w', '1600w', '1280w', '960w', '640w', '320w',
                'hero',
                '1920w', '1600w', '1280w', '960w', '640w', '320w',
                { transform: 'hero', format: 'webp' },
                '1920w', '1600w', '1280w', '960w', '640w', '320w',
            ]
        }],
    ]
) %}

For clarity, what I'm trying to do with that is:

1. Eager-load the square transform
2. Load that transform in these 6 sizes
3. Also load a modified version of square with the format webp
4. Load that modified transform in these 6 sizes
5. Load the hero transform
6. Load that transform in these 6 sizes
7. Also load a modified version of hero with the format webp
8. Load that modified transform in these 6 sizes

This approach is based on documentation I found on overriding named transforms, supplying hashes to withTransforms, and the note about srcset-style values in the docs for the withTransforms AssetQuery class method.

The above does seem to work, in the sense that the eager-loading plan is accepted and the page is rendered, the query count seems to decrease but it's a bit tricky to work out if this is actually working completely as intended. So before I start rolling out this lengthy {% do %} snippet across my templates, I thought I'd better make sure I was on the right track.

So I guess my question is: should the above withTransforms syntax achieve what I'm trying to achieve? Is there a better way to approach this?

Thanks for reading and if I can clarify anything, please ask.

[brandonkelly]

Yep that’s exactly correct! The reason it may not be drastically reducing query count initially is because withTransforms will only eager-load transforms that were already generated previously. So if it’s a new asset, or you’ve recently edited/replaced the asset, or you’ve added new transform sizes, it’s expected that you will start seeing an increase in DB queries again, until all the new transforms have been generated.

[BigglesZX]

Brilliant, thanks for the quick reply. Will proceed accordingly!