How to eager load user Images (photoUrl)?

Question

I've been trying to eager load user Photos, but it does not seem to work.

Here's my stripped down code:

{% set entries = craft.users({
    group: 'coWorkers',
    orderBy: 'lastName',
    with: [
        'getPhoto',
    ],

}) %}

{% for entry in entries %}
    {% set userImage = entry.getPhoto[0] ?? null %}
    {% if userImage|length %}
        <figure class="portrait">
            <a href="{{ userURL }}"><img class="portrait_image" src="{{ entry.getPhoto.getUrl('user') }}" alt="{{ entry.fullName }}" /></a>
        </figure>
    {% endif %}
{% endfor %}

No photos are displayed.

Preferrably I would eager load with the transform as well:

{% set entries = craft.users({
    group: 'mitarbeiter',
    orderBy: 'lastName',
    with: [
        ['getPhoto', { withTransforms: ['user'] }],
    ],

}) %}   

In Craft 2 I could eager load the following way:

{% set entries = craft.users({
    group: 'mitarbeiter',
    orderBy: 'lastName',
    with: [
        'getPhotoUrl(320)',
    ],

}) %}   

Anyone has done this before?

Cheers
Stefan

Answer 1

Your source is set to :

{{ entry.getPhoto.getUrl('user') }}

When in order to access an image, you need to give the array index (as you have in your set statement):

{{ entry.getPhoto[0].getUrl('user')

or better yet, as you have already set it to a variable

{{ userImage.getUrl('user') }}

In full, while adding in to appropriate code for eager loading your transforms:

{% set entries = craft.users({
    group: 'coWorkers',
    orderBy: 'lastName',
    with: [
       [
           'getPhoto', 
           { withTransforms: ['user'] }
       ],
    ]
}) %}

{% for entry in entries %}

    {% set userImage = entry.getPhoto[0] ?? null %}

    {% if userImage %}

        <figure class="portrait">
            <a href="{{ userURL }}">
                <img class="portrait_image"
                     src="{{ userImage.getUrl('user') }}"
                     alt="{{ entry.fullName }}" />
            </a>
        </figure>

    {% endif %}

{% endfor %}

If you need any further information, the Official Documentation does a excellent job of explaining how to implement this on the front end for craft 3