Answers.Body: <p>It appears that the correct way to do it is using the url() method. I couldn't replicate the extra queries I mentioned in the question, and can confirm with some more testing that it doesn't cause any extra queries.</p>
  
  <pre><code>{{ teaserImage.url("transform") }}
  </code></pre>
  
  <p>or</p>
  
  <pre><code>{{ teaserImage.getUrl("transform") }}
  </code></pre>
  
  <p>Source: <a href="https://straightupcraft.com/articles/examples-of-eager-loading-elements-in-twig-and-php" rel="nofollow noreferrer">https://straightupcraft.com/articles/examples-of-eager-loading-elements-in-twig-and-php</a></p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-04-08T23:42:07.787Z
Answers.LastActivityDate: 2017-04-08T23:42:07.787Z
Answers.UserDisplayName: JamesNZ
Body: <p>The craft docs on eager loading show you how to <a href="https://craftcms.com/docs/templating/eager-loading-elements#eager-loading-image-transform-indexes" rel="nofollow noreferrer">eager load image transforms</a> in twig. </p>
  
  <pre><code>{% set entries = craft.entries({
      with: [
          ['coolImage', { withTransforms: ['transform'] }]
      ]
  }) %}
  </code></pre>
  
  <p>However it doesn't show you how to actually USE them once they're eager loaded. <a href="https://craftcms.com/docs/templating/eager-loading-elements#accessing-eager-loaded-elements" rel="nofollow noreferrer">Accessing the eager loaded element</a> itself is easy:</p>
  
  <pre><code>{% set teaserImage = entry.coolImage[0] ?? null %}
  </code></pre>
  
  <p>But I'm not sure how to access the transform from there. Using getUrl('transform') appears to still result in an extra query per element loaded (compared with .url() and no transform).</p>
  
  <pre><code>{{ teaserImage.getUrl("transform") }} {# Boo - extra queries #}
  </code></pre>
  
  <p>What am I missing?</p>
  
  <p>Thanks :)</p>
  
Tags: <assets><elementcriteriamodel><eager-loading>
Title: Accessing Eager Loaded Transforms
ThreadText: # Accessing Eager Loaded Transforms
  
  (Asked by: username_0 on 2017-04-05)
  
  The craft docs on eager loading show you how to [eager load image transforms](https://craftcms.com/docs/templating/eager-loading-elements#eager-loading-image-transform-indexes) in twig.
  
  ```
  {% set entries = craft.entries({
      with: [
          ['coolImage', { withTransforms: ['transform'] }]
      ]
  }) %}
  
  ```
  
  However it doesn't show you how to actually USE them once they're eager loaded. [Accessing the eager loaded element](https://craftcms.com/docs/templating/eager-loading-elements#accessing-eager-loaded-elements) itself is easy:
  
  ```
  {% set teaserImage = entry.coolImage[0] ?? null %}
  
  ```
  
  But I'm not sure how to access the transform from there. Using getUrl('transform') appears to still result in an extra query per element loaded (compared with .url() and no transform).
  
  ```
  {{ teaserImage.getUrl("transform") }} {# Boo - extra queries #}
  
  ```
  
  What am I missing?
  
  Thanks :)
  
  **Tags:** assets, elementcriteriamodel, eager-loading
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_0 on 2017-04-08. Score: 1 | Accepted answer
  
  It appears that the correct way to do it is using the url() method. I couldn't replicate the extra queries I mentioned in the question, and can confirm with some more testing that it doesn't cause any extra queries.
  
  ```
  {{ teaserImage.url("transform") }}
  
  ```
  
  or
  
  ```
  {{ teaserImage.getUrl("transform") }}
  
  ```
  
  Source: <https://straightupcraft.com/articles/examples-of-eager-loading-elements-in-twig-and-php>
  
  
  ---
  
  