Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2024-01-11T20:15:47.460Z
Answers.Text: 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.
Answers.UserDisplayName: Sandwich
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-04-22T14:35:25.153Z
Answers.LastActivityDate: 2021-04-22T14:42:30.860Z
Answers.LastEditDate: 2021-04-22T14:42:30.860Z
Answers.UserDisplayName: Matthias Redl-Mann
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-04-22T11:40:21.660Z
Answers.Text: Thanks, but the question was how to get a resized image into dataUrl(...)
Answers.UserDisplayName: Matthias Redl-Mann
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-04-22T14:44:15.603Z
Answers.Text: @MatthiasRedl-Mann My apologies - I think I've misunderstood the question
Answers.UserDisplayName: Will Kim
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-04-22T15:32:51.137Z
Answers.Text: No worries, good that you tried!
Answers.UserDisplayName: Matthias Redl-Mann
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-04-21T17:11:11.937Z
Answers.LastActivityDate: 2021-04-21T17:11:11.937Z
Answers.UserDisplayName: Will Kim
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-04-22T11:59:10.747Z
Answers.Text: how would I call the static methods from TWIG?
Answers.UserDisplayName: Matthias Redl-Mann
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-04-23T14:47:29.310Z
Answers.Text: @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.
Answers.UserDisplayName: MoritzLost
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-04-23T15:44:51.003Z
Answers.Text: Looks good, I will try!
Answers.UserDisplayName: Matthias Redl-Mann
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-04-22T08:07:09.243Z
Answers.LastActivityDate: 2021-04-23T14:45:10.607Z
Answers.LastEditDate: 2021-04-23T14:45:10.607Z
Answers.UserDisplayName: MoritzLost
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-03-26T12:37:37.980Z
Answers.Text: It is possible, see solution above
Answers.UserDisplayName: Matthias Redl-Mann
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-03-27T13:31:04.943Z
Answers.Text: 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.
Answers.UserDisplayName: Moritz
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-03-27T20:06:42.617Z
Answers.Text: 1.) Did you use the true as second argument to getUrl?
Answers.UserDisplayName: Matthias Redl-Mann
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-03-27T20:07:41.917Z
Answers.Text: 2.) This is important, since otherwise Brandon is right
Answers.UserDisplayName: Matthias Redl-Mann
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-03-27T20:08:05.743Z
Answers.Text: 3.) I even tried it again for you and took a screenshot: https://pasteboard.co/rD2lHd4poo7x.png
Answers.UserDisplayName: Matthias Redl-Mann
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-03-27T20:10:50.470Z
Answers.Text: And just to be clear: the small thumb in the screenshot is of course with src="{{ dataUrl(...) }}"
Answers.UserDisplayName: Matthias Redl-Mann
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-03-23T22:19:09.833Z
Answers.LastActivityDate: 2023-03-23T22:20:14.017Z
Answers.LastEditDate: 2023-03-23T22:20:14.017Z
Answers.UserDisplayName: Moritz
Body: <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>
  
Tags: <templating><image-transforms><emails><function>
Title: TWIG dataUrl function for resized images
ThreadText: # 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.
  
  ```
  <img src="{{ dataUrl('@webroot/assets/img/logo.svg')" />
  
  ```
  
  username_2 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() %}
  <img src="{{ dataUrl(myAsset) }}" />
  
  ```
  
  My question: Does anyone know how to resize the image first, if you pass in an asset?
  
  This does not work:
  
  ```
  <img src="{{ dataUrl(myAsset.getUrl({width: 200, height: 200})) }}" />
  
  ```
  
  **Tags:** templating, image-transforms, emails, function
  
  
  ---
  
  ## 4 answers
  
  ### Answer by username_0 on 2021-04-22. Score: 2 | Accepted answer
  
  Found it, this works:
  
  ```
  <img src="{{ dataUrl('@webroot' ~ myAsset.getUrl({width: 200, height: 200}, true)) }}" />
  
  ```
  
  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:
  
  ```html
  myAsset.getUrl('thumbnail')
  
  ```
  
  > **Comments:**
  > **username_0**: Thanks, but the question was how to get a resized image into dataUrl(...)  
  > **username_2**: @username_0 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](https://docs.craftcms.com/api/v3/craft-elements-asset.html#method-settransform) or [Asset::copyWithTransform](https://docs.craftcms.com/api/v3/craft-elements-asset.html#method-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 username_2 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(...) }}"  
  
  ---
  
  