Impossible to invoke a method ("getUrl") on a string variable ("60")

Question

I'm a beginner and don't understand this error, and how to correct it:

Template error
Impossible to invoke a method ("getUrl") on a string variable ("60")

I'm trying to display only the first entry of one loop. In my case,
'selectedArtwork' has an Entries type and 'pictures' an Assets type.

Here is my code:

{% if entry.selectedArtwork | length %}
    {% for artwork in entry.selectedArtwork %}

        {% set assets = artwork.pictures.first() %}
        {% if assets | length %}
            {% for asset in assets %}

                {% set artworkPicture = { width: 475 } %}
                {% set artworkPictureRetina = { width: 930 } %}

                <figure>
                    <img data-interchange="[{{ asset.getUrl(artworkPicture) }}, (default)], [{{ asset.getUrl(artworkPictureRetina) }}, (retina)]" width="{{ asset.getWidth(artworkPicture) }}" height="{{ asset.getHeight(artworkPicture) }}">

                    <noscript>
                        <img src="{{ asset.getUrl(artworkPicture) }}" width="{{ asset.getWidth(artworkPicture) }}" height="{{ asset.getHeight(artworkPicture) }}">
                    </noscript>
                </figure>
            {% endfor %}
        {% endif %}
    {% endfor %}
{% endif %}

And the part of code highlighted in Craft's debug mode are:

<img data-interchange="[{{ asset.getUrl(artworkPicture) }}, (default)], [{{ asset.getUrl(artworkPictureRetina) }}, (retina)]" width="{{ asset.getWidth(artworkPicture) }}" height="{{ asset.getHeight(artworkPicture) }}">

<noscript>
    <img src="{{ asset.getUrl(artworkPicture) }}" width="{{ asset.getWidth(artworkPicture) }}" height="{{ asset.getHeight(artworkPicture) }}">
</noscript>

This code is working well as an entry template of another page of my website to display all entries, but not here for my homepage to only display the first entry.

Answer 1

I think your problem is here:

{% set assets = artwork.pictures.first() %}
{% if assets | length %}
  {% for asset in assets %}

This sets assets to the first artwork.pictures, not to a list of assets, and then you try to loop over that single asset.

If you want a figure for every pictures of every selectedArtwork of your entry, try this:

{% set artworkPicture = { width: 475 } %}
{% set artworkPictureRetina = { width: 930 } %}

{% for artwork in entry.selectedArtwork %}
  {% for asset in artwork.pictures %}
    <figure>
      <img data-interchange="[{{ asset.getUrl(artworkPicture) }}, (default)], [{{ asset.getUrl(artworkPictureRetina) }}, (retina)]" width="{{ asset.getWidth(artworkPicture) }}" height="{{ asset.getHeight(artworkPicture) }}">
      <noscript>
        <img src="{{ asset.getUrl(artworkPicture) }}" width="{{ asset.getWidth(artworkPicture) }}" height="{{ asset.getHeight(artworkPicture) }}">
      </noscript>
    </figure>
  {% endfor %}
{% endfor %}

• set artworkPicture and artworkPictureRetina once, outside your loop.
• no need to use {% if ...|length %}. If the length is 0, the for loop will run 0 times.

If you want a figure for the first picture of every selectedArtwork, try this:

{% set artworkPicture = { width: 475 } %}
{% set artworkPictureRetina = { width: 930 } %}

{% for artwork in entry.selectedArtwork %}
  {% set asset = artwork.pictures.first %}
  {% if asset %}
    <figure>
      <img data-interchange="[{{ asset.getUrl(artworkPicture) }}, (default)], [{{ asset.getUrl(artworkPictureRetina) }}, (retina)]" width="{{ asset.getWidth(artworkPicture) }}" height="{{ asset.getHeight(artworkPicture) }}">
      <noscript>
        <img src="{{ asset.getUrl(artworkPicture) }}" width="{{ asset.getWidth(artworkPicture) }}" height="{{ asset.getHeight(artworkPicture) }}">
      </noscript>
    </figure>
  {% endif %}
{% endfor %}

If you want a figure for the first picture of the first selectedArtwork, try this:

{% set artworkPicture = { width: 475 } %}
{% set artworkPictureRetina = { width: 930 } %}

{% set artwork = entry.selectedArtwork.first %}
{% if artwork %}
  {% set asset = artwork.pictures.first %}
  {% if asset %}
    <figure>
      <img data-interchange="[{{ asset.getUrl(artworkPicture) }}, (default)], [{{ asset.getUrl(artworkPictureRetina) }}, (retina)]" width="{{ asset.getWidth(artworkPicture) }}" height="{{ asset.getHeight(artworkPicture) }}">
      <noscript>
        <img src="{{ asset.getUrl(artworkPicture) }}" width="{{ asset.getWidth(artworkPicture) }}" height="{{ asset.getHeight(artworkPicture) }}">
      </noscript>
    </figure>
  {% endif %}
{% endif %}