Can't get `dataUrl( transformedImage )` to work as expected

[proimage]

Description

I'm trying to base64-encode a transformed image asset (an LQIP—low-quality image placeholder), but I can't get it to work:

{# source image is 2560px square #}
{% set img = entry.image.one() %}
{% do img.setTransform({ width: 1280 }) %}
{% set lqip = img %}
{% do lqip.setTransform({ width: 20 }) %}
{{ dataUrl(lqip) }}

The resulting string is a base64-encoded image with the same dimensions as the source image, in this case, 2560px square.

Steps to reproduce

1. Put the above code into a template
2. Load it up in a browser
3. Scroll right for a while because the encoded string is ridiculously long.

Additional info

• Craft version: 3.7.18.2
• PHP version: 7.4.16
• Database driver & version: MySQL 5.5.5

• Plugins & versions:

  • Advanced Image Field 1.0.0
  • Button Box 2.0.4
  • Contact Form 2.2.7
  • Contact Form Honeypot 1.0.2
  • Control Panel CSS 2.4.0
  • Digital Download 2.1.8
  • DigitalOcean Spaces Volume 1.1.3
  • Field Manager 2.2.4
  • Freeform 3.11.12
  • Imager X v3.5.3
  • Imager X Storage Driver for DigitalOcean Spaces 2.0.0
  • Mix 1.5.2
  • Neo 2.11.15
  • oEmbed 1.3.13
  • Postmark 2.1.0
  • Redactor 2.8.8
  • Redactor Custom Styles 3.0.4
  • SEO 3.7.4
  • Super Table 2.6.8
  • Typed link field 1.0.25

[brandonkelly]

dataUrl() doesn’t support image transforms, and we can’t fix that because the transformed image might not be readily available.

[proimage]

Ahh, I see... because template render requests don't trigger image transform creation, only the URL that will create the image transform(s), right? And Imager X, for example, can create base64-encoded image transforms when a template is rendered because unlike Craft, it does generate image transforms at that stage (thus bogging down the render pipeline)?

[brandonkelly]

Ahh, I see... because template render requests don't trigger image transform creation, only the URL that will create the image transform(s), right?

By default yes. (Configurable via generateTransformsBeforePageLoad but we can’t rely on that being true.)

Not sure how Imager X works.

[proimage]

So wait, since that setting exists, is it possible to add a parameter to dataUrl() that will force it to generate the transform being passed to it? Something like this?

{# source image is 2560px square #}
{% set img = entry.image.one() %}
{% do img.setTransform({ width: 1280 }) %}
{% set lqip = img %}
{% do lqip.setTransform({ width: 20 }) %}
{{ dataUrl(lqip, forceTransformGeneration = true) }}

[brandonkelly]

Perhaps but it would also require us to update getContent() and would be a breaking change. Will look into it for Craft 4.

[proimage]

Ok, you certainly know better than I do. ;) Thanks BK!

[proimage]

With Craft 4 out, is this now possible?

[brandonkelly]

Sorry, we didn’t manage to get to this in 4.0. Still on the list though. Do you mind creating a discussion for this instead though?

[proimage]

Done: https://github.com/craftcms/cms/discussions/11388