<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>

CC BY-SA 4.0
2021-10-04T10:23:51.237Z
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
Grant Smith
CC BY-SA 4.0
2021-10-04T10:37:16.423Z
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.
James Smith
CC BY-SA 4.0
2021-10-04T09:59:41.583Z
2021-10-04T10:09:28.973Z
2021-10-04T10:09:28.973Z
James Smith
<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>

<craft3>
Eager loading a photo within a matrix field
# 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 %}

  {% set image = teamEntry.teamPortrait[0] ?? null %}
  {% if image %}
  
    
  
  {% endif %}
  {{ teamEntry.title }}
  {{ teamEntry.jobTitle }}

{% 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":

{% 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 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:
{#---- 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.  

---

