thumb64() seems to enforce a square image; can it leave the aspect ratio the same as the original image?

[proimage]

The relevant code is this:

{% set image = block.backgroundImage.first() %}

<header class="image-header" style="background-image: url({{ image.url }}), url({{ thumb64(image, 40, true) }});">

While the full-size header is 1920x1200px, the base64-encoded thumb is 40x40px. Ideally, it would be 40x25px. Is that possible?

[kisonay]

I'll try to take a closer look at this over the next week or two.

[mprofitlich]

Even better would be if an image transform could be applied.

[proimage]

Even better would be if an image transform could be applied.

This. ⬆️ Been breaking my head trying to get this to work:

{% do imgAsset.setTransform( { width: 20, quality: 20 } ) %}
<img src="..." style="background-image: url('{{ image64( imgAsset, true ) }}');">

[kisonay]

OK, I know it has been forever but I finally looked into this. I don't think this plugin is needed anymore.

Craft v4 has the dataUrl function which does exactly what this plugin does.

<img src="{{ dataUrl(myAsset) }}" />

If you wanted to use dataUrl with a transformation you could do something like this:

<img src="{{ dataUrl('@webroot' ~ myAsset.getUrl({width: 200}, true)) }}" />

and it will produce a base64 encoding of the transformed version, keeping the aspect ratio.

This even works with pre-defined image transformations...

<img src="{{ dataUrl('@webroot' ~ myAsset.getUrl('myTransformationName', true)) }}" />

So @proimage and @mprofitlich, what do you think? will the above work and we can retire this plugin?

[proimage]

One issue I discovered recently (even with Craft's native dataUrl()) is that there's no caching of the results. On long listing pages with dozens of base64 encodings, it takes quite some time to generate afresh each pageload. Is caching something that could be added? There's a semi-standard .b64 file extension... 😉

EDIT: Also, dataUrl() explicitly doesn't work on transforms. :-/

[kisonay]

One issue I discovered recently (even with Craft's native dataUrl()) is that there's no caching of the results. On long listing pages with dozens of base64 encodings, it takes quite some time to generate afresh each pageload. Is caching something that could be added? There's a semi-standard .b64 file extension... 😉

I can explore caching...

EDIT: Also, dataUrl() explicitly doesn't work on transforms. :-/

Have you tried my example above? It does indeed work (just not as straightforward as you would expect.) There are two important pieces...

1. prepend the @webroot alias to the myAsset.getUrl(...)
2. set the second parameter of getUrl(...) to true -- This ensures that a real file path is returned by getUrl, because the image is transformed immediately on call.

[proimage]

Have you tried my example above? It does indeed work (just not as straightforward as you would expect.)

Not yet; I was basing my reply off of what I discovered (and Brandon confirmed) a while back, here: https://github.com/craftcms/cms/issues/10108 I'll give your code a try though! :)

EDIT: Just as a follow-up, the code you recommended doesn't work with remotely-stored images (eg. on DigitalOcean Spaces), even if I remove the '@webroot' ~ bit.

[kisonay]

@proimage correct, this only works for local files.