<p>Found it, this works:</p>
<pre><code>&lt;img src=&quot;{{ dataUrl('@webroot' ~ myAsset.getUrl({width: 200, height: 200}, true)) }}&quot; /&gt;
</code></pre>
<p>Two important things:</p>
<ul>
<li>prepend the <code>@webroot</code> alias to the <code>myAsset.getUrl(...)</code></li>
<li>set the second parameter of <code>getUrl(...)</code> to <code>true</code>: <code>myAsset.getUrl({...}, true)</code>. This ensures that a real file path is returned by <code>getUrl</code>, because the image is transformed immediately on call. This is necessary for the <code>dataUrl</code> function to work. If it is not present, Craft might return a URL pointing to the image transformation controller (which transforms when called for the first time, this might go wrong here).</li>
</ul>

CC BY-SA 4.0
2024-01-11T20:15:47.460Z
It seems this only works with locally-stored images. I'm trying to get it working with remote images on DigitalOcean Spaces, to no avail.
Sandwich
CC BY-SA 4.0
2021-04-22T14:35:25.153Z
2021-04-22T14:42:30.860Z
2021-04-22T14:42:30.860Z
Matthias Redl-Mann
<p>One method that comes to my mind is to create an asset configuration in admin panel (Settings -&gt; Assets), where you can create different Image Transform configurations.</p>
<p>For example, I can create an Image Transforms called <em>Thumbnail</em> then set the required dimensions and quality of the image.</p>
<p>Once you create an Image Transforms, you can utilize them with twig template:</p>
<pre class="lang-html prettyprint-override"><code>myAsset.getUrl('thumbnail')
</code></pre>

CC BY-SA 4.0
2021-04-22T11:40:21.660Z
Thanks, but the question was how to get a resized image into dataUrl(...)
Matthias Redl-Mann
CC BY-SA 4.0
2021-04-22T14:44:15.603Z
@MatthiasRedl-Mann My apologies - I think I've misunderstood the question
Will Kim
CC BY-SA 4.0
2021-04-22T15:32:51.137Z
No worries, good that you tried!
Matthias Redl-Mann
CC BY-SA 4.0
2021-04-21T17:11:11.937Z
2021-04-21T17:11:11.937Z
Will Kim
<p>You can use <a href="https://docs.craftcms.com/api/v3/craft-elements-asset.html#method-settransform" rel="nofollow noreferrer">Asset::setTransform</a> or <a href="https://docs.craftcms.com/api/v3/craft-elements-asset.html#method-copywithtransform" rel="nofollow noreferrer">Asset::copyWithTransform</a> to get (a copy) of the asset object with your transform applied. Then you can pass that into dataUrl().</p>
<pre><code>{# Apply the transform to myAsset directly #}
{% do myAsset.setTransform({width: 200, height: 200}) %}
{{ dataUrl(myAsset)  }}

{# Use this if you need myAsset without the transform later #}
{% set thumb = myAsset.copyWithTransform({width: 200, height: 200}) %}
{{ dataUrl(thumb)  }}
</code></pre>

CC BY-SA 4.0
2021-04-22T11:59:10.747Z
how would I call the static methods from TWIG?
Matthias Redl-Mann
CC BY-SA 4.0
2021-04-23T14:47:29.310Z
@Matthias Redl-Mann Sorry for the confusion, they're not static methods, that's just a code notation convention. You can call the methods like any other instance method using dot-notation. I updated the code example with working examples for both methods, either of them should work correctly now.
MoritzLost
CC BY-SA 4.0
2021-04-23T15:44:51.003Z
Looks good, I will try!
Matthias Redl-Mann
CC BY-SA 4.0
2021-04-22T08:07:09.243Z
2021-04-23T14:45:10.607Z
2021-04-23T14:45:10.607Z
MoritzLost
<p>It’s not possible to get a dataUrl from a resized asset at this time, not even in Craft 4.</p>
<p>There’s already an issue for that: <a href="https://github.com/craftcms/cms/discussions/11388" rel="nofollow noreferrer">https://github.com/craftcms/cms/discussions/11388</a>.</p>
<p>In an older, closed issue, the reason is explained: <a href="https://github.com/craftcms/cms/issues/10108" rel="nofollow noreferrer">https://github.com/craftcms/cms/issues/10108</a>.</p>
<p>It is said to be possible with the <a href="https://plugins.craftcms.com/imager-x" rel="nofollow noreferrer">Imager X plugin.</a> And there is a dedicated <a href="https://plugins.craftcms.com/blur-hash" rel="nofollow noreferrer">Blur Hash Plugin</a>.</p>

CC BY-SA 4.0
2023-03-26T12:37:37.980Z
It is possible, see solution above
Matthias Redl-Mann
CC BY-SA 4.0
2023-03-27T13:31:04.943Z
Are you sure the transformation is used? I tried your solution and I got huge base64 code that obviously was generated from the original image file. Brandonkelly explained in November 2021: «dataUrl() doesn’t support image transforms, and we can’t fix that because the transformed image might not be readily available.» The discussion he asked to open is still open.
Moritz
CC BY-SA 4.0
2023-03-27T20:06:42.617Z
1.) Did you use the true as second argument to getUrl?
Matthias Redl-Mann
CC BY-SA 4.0
2023-03-27T20:07:41.917Z
2.) This is important, since otherwise Brandon is right
Matthias Redl-Mann
CC BY-SA 4.0
2023-03-27T20:08:05.743Z
3.) I even tried it again for you and took a screenshot: https://pasteboard.co/rD2lHd4poo7x.png
Matthias Redl-Mann
CC BY-SA 4.0
2023-03-27T20:10:50.470Z
And just to be clear: the small thumb in the screenshot is of course with src="{{ dataUrl(...) }}"
Matthias Redl-Mann
CC BY-SA 4.0
2023-03-23T22:19:09.833Z
2023-03-23T22:20:14.017Z
2023-03-23T22:20:14.017Z
Moritz
<p>Craft provides the very nice TWIG function <code>dataUrl(pathToImg)</code> to inline images in e-mails.</p>
<p>E.g.</p>
<pre><code>&lt;img src=&quot;{{ dataUrl('@webroot/assets/img/logo.svg')&quot; /&gt;
</code></pre>
<p>will base64 encode the image into the <code>src</code>. This also works if you pass in an instance of an asset:</p>
<pre><code>{% set myAsset = craft.assets.id(123).one() %}
&lt;img src=&quot;{{ dataUrl(myAsset) }}&quot; /&gt;
</code></pre>
<p>My question: Does anyone know how to resize the image first, if you pass in an asset?</p>
<p>This does not work:</p>
<pre><code>&lt;img src=&quot;{{ dataUrl(myAsset.getUrl({width: 200, height: 200})) }}&quot; /&gt;
</code></pre>

<templating><image-transforms><emails><function>
TWIG dataUrl function for resized images
# TWIG dataUrl function for resized images

(Asked by: username_0 on 2021-04-21)

Craft provides the very nice TWIG function dataUrl(pathToImg) to inline images in e-mails.
E.g.


will base64 encode the image into the src. This also works if you pass in an instance of an asset:
{% set myAsset = craft.assets.id(123).one() %}


My question: Does anyone know how to resize the image first, if you pass in an asset?
This does not work:

**Tags:** templating, image-transforms, emails, function


---

## 4 answers

### Answer by username_0 on 2021-04-22. Score: 2 | Accepted answer

Found it, this works:


Two important things:

prepend the @webroot alias to the myAsset.getUrl(...)
set the second parameter of getUrl(...) to true: myAsset.getUrl({...}, true). This ensures that a real file path is returned by getUrl, because the image is transformed immediately on call. This is necessary for the dataUrl function to work. If it is not present, Craft might return a URL pointing to the image transformation controller (which transforms when called for the first time, this might go wrong here).

> **Comments:**
> **username_1**: It seems this only works with locally-stored images. I'm trying to get it working with remote images on DigitalOcean Spaces, to no avail.  

---

### Answer by username_2 on 2021-04-21. Score: 1

One method that comes to my mind is to create an asset configuration in admin panel (Settings -> Assets), where you can create different Image Transform configurations.
For example, I can create an Image Transforms called Thumbnail then set the required dimensions and quality of the image.
Once you create an Image Transforms, you can utilize them with twig template:
myAsset.getUrl('thumbnail')

> **Comments:**
> **username_0**: Thanks, but the question was how to get a resized image into dataUrl(...)  
> **username_2**: @MatthiasRedl-Mann My apologies - I think I've misunderstood the question  
> **username_0**: No worries, good that you tried!  

---

### Answer by username_3 on 2021-04-22. Score: 1

You can use Asset::setTransform or Asset::copyWithTransform to get (a copy) of the asset object with your transform applied. Then you can pass that into dataUrl().
{# Apply the transform to myAsset directly #}
{% do myAsset.setTransform({width: 200, height: 200}) %}
{{ dataUrl(myAsset)  }}

{# Use this if you need myAsset without the transform later #}
{% set thumb = myAsset.copyWithTransform({width: 200, height: 200}) %}
{{ dataUrl(thumb)  }}

> **Comments:**
> **username_0**: how would I call the static methods from TWIG?  
> **username_3**: @username_0 Sorry for the confusion, they're not static methods, that's just a code notation convention. You can call the methods like any other instance method using dot-notation. I updated the code example with working examples for both methods, either of them should work correctly now.  
> **username_0**: Looks good, I will try!  

---

### Answer by username_4 on 2023-03-23. Score: 0

It’s not possible to get a dataUrl from a resized asset at this time, not even in Craft 4.

There’s already an issue for that: <https://github.com/craftcms/cms/discussions/11388>.

In an older, closed issue, the reason is explained: <https://github.com/craftcms/cms/issues/10108>.

It is said to be possible with the [Imager X plugin.](https://plugins.craftcms.com/imager-x) And there is a dedicated [Blur Hash Plugin](https://plugins.craftcms.com/blur-hash).

> **Comments:**
> **username_0**: It is possible, see solution above  
> **username_4**: Are you sure the transformation is used? I tried your solution and I got huge base64 code that obviously was generated from the original image file. Brandonkelly explained in November 2021: «dataUrl() doesn’t support image transforms, and we can’t fix that because the transformed image might not be readily available.» The discussion he asked to open is still open.  
> **username_0**: 1.) Did you use the true as second argument to getUrl?  
> **username_0**: 2.) This is important, since otherwise Brandon is right  
> **username_0**: 3.) I even tried it again for you and took a screenshot: https://pasteboard.co/rD2lHd4poo7x.png  
> **username_0**: And just to be clear: the small thumb in the screenshot is of course with src="{{ dataUrl(...) }}"  

---

