I am using Imager to create my image transforms. I am on a category page and I want to list all of the products.

I did a quick .with(['cf_shop_assets']) optimization and wanted to continue with the image transforms.

Frankly, I don't know where to start?

{% set products = craft.commerce.products.relatedTo(category).with(['cf_shop_assets']) %}
{% if products|length %}
    <div class="shop_container block listing_format">
        {% for product in products %}

        {% set variants = product.variants %}
        {% set variant = product.defaultVariant %}

        <div class="shop_item">
            <div class="more_info">
                <a href="{{ product.url }}">
                    {% set image = product.cf_shop_assets[0] ?? null %}
                    {% if image|length %}
                        {% set transformedImage = craft.imager.transformImage(image, {
                            width: 300,
                            quality: 90,
                            format: 'jpg',
                            bgColor: '#EFEFDE',
                            effects: { sharpen: true }
                        }) %}
                            <img src="{{ transformedImage.url }}" class="image_full_width" width="{{ transformedImage.width }}" height="{{ transformedImage.height }}" alt="{{ image.title }} {{ gl_meta.cf_altText }}" />
                    {% endif %}
                    <h2>{{ product.title }}</h2>


        {% endfor %}
{% endif %}

The code works, but it only saves about 5 queries.

Would somebody be so kind to show me how to eager load Imager transforms?

I need Imager because I don't want to use transparent PNGs. There's no native way to transform a PNG to JPG and adding a background color.

Is this even possible?

  • 1
    Those plugin related questions are always difficult to answer because we have to dig deep into the plugin - unless the creator appears. I would suggest you to contact the creator directly and ask him. I doubt it's possible but maybe he could help you create this feature Mar 4, 2018 at 18:11

1 Answer 1


Eager loading is used to reduce the number of database queries. Imager doesn't store any data in the database, it's completely file-based, so it's not relevant to use eager-loading in relation to it.

  • But since Craft can eager-load image transforms using the withTransforms parameter, it would make sense that there should also be a way to have it eager-load Imager transforms, no?
    – Sandwich
    Jul 23, 2019 at 15:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.