Answers.Body: <p>You can eager-load elements that were already loaded (like an Entry or Product that Craft set up for you &quot;outside&quot; a template) like this:</p>
  <pre><code>{% do craft.app.elements.eagerLoadElements(
    className(product),
    [product],
    [
      ['variants.variantImage', { withTransforms: ['thumbnail'] }],
    ]
  ) %}
  </code></pre>
  <p>This will load + set any downstream elements, just as though you'd chained an equivalent <code>.with()</code> on the original query.</p>
  <p>A couple notes:</p>
  <ul>
  <li><code>className()</code> is used to capture the fully-qualified name of the Element class. It's required to let Craft know what kind of eager-loadable properties the specific Element Type has;</li>
  <li><code>[product]</code> is an array, because eager-loading is always done in &quot;bulk,&quot; even for a single source element;</li>
  </ul>
  <p>You can do a similar thing directly on the Variants, if you've got a reference to them, already:</p>
  <pre><code>{% set variants = product.variants %}
  {% do craft.app.elements.eagerLoadElements(
    className(variants | first),
    variants,
    [
      ['variantImage', { withTransforms: ['thumbnail'] }],
    ]
  ) %}
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2022-02-11T19:43:54.537Z
Answers.LastActivityDate: 2022-02-13T05:13:14.870Z
Answers.LastEditDate: 2022-02-13T05:13:14.870Z
Answers.UserDisplayName: August Miller
Body: <p>In a commerce store that I'm trying out, my product variants have a variant image field.</p>
  <p>I need to get an array of all the variant images in my product template.</p>
  <p>I know I can do something like</p>
  <p><code>{% set variantImages = product.variants|map(variant =&gt; variant.variantImage.one() )}</code></p>
  <p>but I believe this will execute a query for each variant.</p>
  <p>I am aware of <a href="https://craftcms.com/docs/3.x/dev/eager-loading-elements.html" rel="nofollow noreferrer">eager loading in craft</a>, but I am not sure how to use it in this case, as I am not writing a query to get the product or variants - craft auto-injects those into the product template.</p>
  <p>How would I eager load the assets of a variant from within the product template?</p>
  
Tags: <eager-loading><variants>
Title: Eager loading of variant images
ThreadText: # Eager loading of variant images
  
  (Asked by: username_0 on 2022-02-11)
  
  In a commerce store that I'm trying out, my product variants have a variant image field.
  
  I need to get an array of all the variant images in my product template.
  
  I know I can do something like
  
  `{% set variantImages = product.variants|map(variant => variant.variantImage.one() )}`
  
  but I believe this will execute a query for each variant.
  
  I am aware of [eager loading in craft](https://craftcms.com/docs/3.x/dev/eager-loading-elements.html), but I am not sure how to use it in this case, as I am not writing a query to get the product or variants - craft auto-injects those into the product template.
  
  How would I eager load the assets of a variant from within the product template?
  
  **Tags:** eager-loading, variants
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2022-02-11. Score: 4 | Accepted answer
  
  You can eager-load elements that were already loaded (like an Entry or Product that Craft set up for you "outside" a template) like this:
  
  ```
  {% do craft.app.elements.eagerLoadElements(
    className(product),
    [product],
    [
      ['variants.variantImage', { withTransforms: ['thumbnail'] }],
    ]
  ) %}
  
  ```
  
  This will load + set any downstream elements, just as though you'd chained an equivalent `.with()` on the original query.
  
  A couple notes:
  
  * `className()` is used to capture the fully-qualified name of the Element class. It's required to let Craft know what kind of eager-loadable properties the specific Element Type has;
  * `[product]` is an array, because eager-loading is always done in "bulk," even for a single source element;
  
  You can do a similar thing directly on the Variants, if you've got a reference to them, already:
  
  ```
  {% set variants = product.variants %}
  {% do craft.app.elements.eagerLoadElements(
    className(variants | first),
    variants,
    [
      ['variantImage', { withTransforms: ['thumbnail'] }],
    ]
  ) %}
  
  ```
  
  
  ---
  
  