Answers.Body: <p>You've eager-loaded the matrix block(s), but not the image(s) within them. Change to something like this to eager load both, assuming you have named the block type &quot;asset&quot; and the asset field &quot;image&quot;:</p>
  <pre class="lang-twig prettyprint-override"><code>
  {% set teamEntries = craft.entries()
      .section('team')
      .with(['teamPortrait.asset:image'])
      .limit(3)
      .all()
  %}
  </code></pre>
  <p>(To remember the correct syntax, I mentally visualise a colon in the matrix config UI in-between those two columns that hold the matrix block type handles and the blocks' field handles).</p>
  <p>Then your second problem is that you're referencing the first <em>matrix block</em> instead of the asset field <em>within it</em> just here: <code>{% set image = teamEntry.teamPortrait[0] ?? null %}</code>. Instead you'll need <code>{% set image = teamEntry.teamPortrait[0].images[0] ?? null %}</code>. To output the alt text, you'd then need to change it to <code>{{ teamEntry.teamPortrait[0].imageAlt) }}</code> as it's part of the matrix block, not part of the image field. Typically though, when adding alt text to images, I store it directly against the image as an asset field - in which case you'd keep the syntax as-is.</p>
  <p>After you've got that working, look into <a href="https://craftcms.com/docs/3.x/dev/eager-loading-elements.html#eager-loading-image-transform-indexes" rel="nofollow noreferrer">eager loading transforms</a> too, as you'll probably need that if applying a transform (as a general rule you should never output an image as-is from any CMS - even if the current editors are technically-savvy enough to optimise their images, their successors may not be).</p>
  <p>The syntax for eager loading image transforms for images inside matrix blocks gets a little bit hairy, but once you've forced yourself to type it out 400 times you get used to it! That could look something like this:</p>
  <pre class="lang-twig prettyprint-override"><code>{#---- in core layout wrapper for reusability: ----- #}
  {% set transforms = {
      galleryImgHalf: { width: 900 },
      galleryImgThirds: { width: 585 },
      galleryImgQuarters: { width: 420 },
      galleryImgFull: { width: 1080 },
      cardImgCropped: { width: 585, height: 732, mode: 'crop'},
      ... etc
  } %}
  
  
  {#---- in child templates: ----- #}
  {% set teamEntries = craft.entries().section('team').with([
      ['teamPortrait.asset:image', {withTransforms: [
          transforms.galleryImgFull,
          transforms.galleryImgThirds,
          transforms.galleryImgHalf
      ]}],
      ['more.things:here', {withTransforms: [transforms.someTransform]}],
      ['and.more:here', {withTransforms: [transforms.someTransform2]}],
  ]).limit(3).all() %}
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-10-04T10:23:51.237Z
Answers.Text: This is great, thank you. If I keep the image alt with the asset then I don't actually need a matrix field, still great information though
Answers.UserDisplayName: Grant Smith
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-10-04T10:37:16.423Z
Answers.Text: ha ha, ah yes definitely much much much simpler that way! If the only reason you were using a matrix was for visually grouping those two fields together that's generally something to avoid in future, even if it means using two separate fields.
Answers.UserDisplayName: James Smith
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-10-04T09:59:41.583Z
Answers.LastActivityDate: 2021-10-04T10:09:28.973Z
Answers.LastEditDate: 2021-10-04T10:09:28.973Z
Answers.UserDisplayName: James Smith
Body: <p>Thanks to some help recieved on another question I have discovered Eager loading which makes a lot of sense. I am now trying to output an image from a matrix field.</p>
  <p>I am part way there as my <code>imageAlt</code> outputs, but not the actuall photo? If I remove the <code>.url</code> I am presented with a number which I assume is the image ID.</p>
  <p>My Matrix field is as follows:</p>
  <p>Handle: teamPortrait<br />
  Block Types: Asset<br />
  Fields: image (Assets field type) and imageAlt (Plai text field type)</p>
  <pre><code>{% set teamEntries = craft.entries()
  .section('team')
  .with(['teamPortrait'])
  .limit(3)
  .all() %}
  
  {% for teamEntry in teamEntries %}
  &lt;div class=&quot;col-4&quot;&gt;
    {% set image = teamEntry.teamPortrait[0] ?? null %}
    {% if image %}
    &lt;picture&gt;
      &lt;img src=&quot;{{ image.url }}&quot; alt=&quot;{{ image.imageAlt }}&quot; width=&quot;200&quot; height=&quot;300&quot;&gt;
    &lt;/picture&gt;
    {% endif %}
    &lt;h1&gt;{{ teamEntry.title }}&lt;/h1&gt;
    &lt;h2&gt;{{ teamEntry.jobTitle }}&lt;/h2&gt;
  &lt;/div&gt;
  {% endfor %}
  </code></pre>
  
Tags: <craft3>
Title: Eager loading a photo within a matrix field
ThreadText: # Eager loading a photo within a matrix field
  
  (Asked by: username_0 on 2021-10-04)
  
  Thanks to some help recieved on another question I have discovered Eager loading which makes a lot of sense. I am now trying to output an image from a matrix field.
  
  I am part way there as my `imageAlt` outputs, but not the actuall photo? If I remove the `.url` I am presented with a number which I assume is the image ID.
  
  My Matrix field is as follows:
  
  Handle: teamPortrait  
  Block Types: Asset  
  Fields: image (Assets field type) and imageAlt (Plai text field type)
  
  ```
  {% set teamEntries = craft.entries()
  .section('team')
  .with(['teamPortrait'])
  .limit(3)
  .all() %}
  
  {% for teamEntry in teamEntries %}
  <div class="col-4">
    {% set image = teamEntry.teamPortrait[0] ?? null %}
    {% if image %}
    <picture>
      <img src="{{ image.url }}" alt="{{ image.imageAlt }}" width="200" height="300">
    </picture>
    {% endif %}
    <h1>{{ teamEntry.title }}</h1>
    <h2>{{ teamEntry.jobTitle }}</h2>
  </div>
  {% endfor %}
  
  ```
  
  **Tags:** craft3
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2021-10-04. Score: 4 | Accepted answer
  
  You've eager-loaded the matrix block(s), but not the image(s) within them. Change to something like this to eager load both, assuming you have named the block type "asset" and the asset field "image":
  
  ```twig
  
  {% set teamEntries = craft.entries()
      .section('team')
      .with(['teamPortrait.asset:image'])
      .limit(3)
      .all()
  %}
  
  ```
  
  (To remember the correct syntax, I mentally visualise a colon in the matrix config UI in-between those two columns that hold the matrix block type handles and the blocks' field handles).
  
  Then your second problem is that you're referencing the first *matrix block* instead of the asset field *within it* just here: `{% set image = teamEntry.teamPortrait[0] ?? null %}`. Instead you'll need `{% set image = teamEntry.teamPortrait[0].images[0] ?? null %}`. To output the alt text, you'd then need to change it to `{{ teamEntry.teamPortrait[0].imageAlt) }}` as it's part of the matrix block, not part of the image field. Typically though, when adding alt text to images, I store it directly against the image as an asset field - in which case you'd keep the syntax as-is.
  
  After you've got that working, look into [eager loading transforms](https://craftcms.com/docs/3.x/dev/eager-loading-elements.html#eager-loading-image-transform-indexes) too, as you'll probably need that if applying a transform (as a general rule you should never output an image as-is from any CMS - even if the current editors are technically-savvy enough to optimise their images, their successors may not be).
  
  The syntax for eager loading image transforms for images inside matrix blocks gets a little bit hairy, but once you've forced yourself to type it out 400 times you get used to it! That could look something like this:
  
  ```twig
  {#---- in core layout wrapper for reusability: ----- #}
  {% set transforms = {
      galleryImgHalf: { width: 900 },
      galleryImgThirds: { width: 585 },
      galleryImgQuarters: { width: 420 },
      galleryImgFull: { width: 1080 },
      cardImgCropped: { width: 585, height: 732, mode: 'crop'},
      ... etc
  } %}
  
  {#---- in child templates: ----- #}
  {% set teamEntries = craft.entries().section('team').with([
      ['teamPortrait.asset:image', {withTransforms: [
          transforms.galleryImgFull,
          transforms.galleryImgThirds,
          transforms.galleryImgHalf
      ]}],
      ['more.things:here', {withTransforms: [transforms.someTransform]}],
      ['and.more:here', {withTransforms: [transforms.someTransform2]}],
  ]).limit(3).all() %}
  
  ```
  
  > **Comments:**
  > **username_0**: This is great, thank you. If I keep the image alt with the asset then I don't actually need a matrix field, still great information though  
  > **username_1**: ha ha, ah yes definitely much much much simpler that way! If the only reason you were using a matrix was for visually grouping those two fields together that's generally something to avoid in future, even if it means using two separate fields.  
  
  ---
  
  