<p>Got a working solution:</p>

<pre><code>{% set images = entry.wireframeImages %}
{% if images | length %}
  &lt;div class="row mbb"&gt;
    {% for image in images %}
      &lt;div class="col l3 m4 s6"&gt;
        &lt;img class="responsive-img mt bordered" src="{{ image.getURL() }}"&gt;
      &lt;/div&gt;
    {% endfor %}
  &lt;/div&gt;
{% endif %}
</code></pre>

CC BY-SA 3.0
2015-11-21T19:56:44.347Z
2015-11-21T19:56:44.347Z
code-zoop
<p>An Asset field – like all relational fields, including Entries, Categories etc – always return an array-like object which is an instance of a class called <a href="http://buildwithcraft.com/docs/templating/elementcriteriamodel" rel="noreferrer">ElementCriteriaModel</a>. To output the actual file data, this means you have to loop on the field, e.g.:</p>

<pre><code>{% for asset in entry.wireframeImages %}
    &lt;img src="{{ asset.getUrl() }}" /&gt;
{% endfor %}
</code></pre>

<p>The above is true even if there's 1 Asset selected in the field, or 100.</p>

<p>The cool thing about the <code>for</code> loop in Twig is that it won't throw an error if you attempt to loop on an empty array or object. This means that you don't have to wrap the loop in an <code>{% if %}</code> statement to take care of cases where the Asset field may be empty. Moreover, you can add an <code>{% else %}</code> statement to the <code>for</code> loop, which will be executed if the field is in fact empty:</p>

<pre><code>{% for asset in entry.wireframeImages %}
    &lt;img src="{{ asset.getUrl() }}" /&gt;
{% else %}
    &lt;p&gt;Nope, no images here :(&lt;/p&gt;
{% endfor %}
</code></pre>

<p>In situations where your Asset field is limited to 1 file, a loop may seem like overkill – then you can use </p>

<pre><code>{% set asset = entry.wireframeImages.first %}
</code></pre>

<p>to get the first (and only) file. Keep in mind though, that if the Asset field is empty, calling <code>first</code> on it will in fact produce an error. To get around this, you can use the <code>default</code> filter to add a default value to the variable and suppress the error. In these cases you have to have a conditional testing the value as well, though – so the amount of code is about the same as just using a <code>for</code> loop:</p>

<pre><code>{% set asset = entry.wireframeImages.first|default(false) %}
{% if asset %}
    &lt;img src="{{ asset.getUrl() }}" /&gt;
{% endif %}
</code></pre>

<p>Note that <code>first</code> isn't the only method available to ElementCriteriaModel instances, <a href="http://buildwithcraft.com/docs/templating/elementcriteriamodel" rel="noreferrer">check out the official docs</a> to read more about it.</p>

CC BY-SA 3.0
2015-11-21T19:56:54.890Z
2015-11-21T20:02:42.007Z
2015-11-21T20:02:42.007Z
Mats Mikkel Rummelhoff
<p>Sorry, this is kind of a newbie question, but I can't figure out how to loop trough all images in one image asset field supporting multiple images.</p>

<p>The only way I have been able to output anything without an error, is this:</p>

<pre><code>{% set asset = entry.wireframeImages.first() %}

{% if asset %}
    {{ asset.url }}
{% endif %}
</code></pre>

<p>But as you can see, only the first image is printed out.</p>

<p>How can I loop trough all images from this field?</p>

<p>I have been reading trough <a href="http://buildwithcraft.com/docs/assets-fields" rel="noreferrer">this page</a>, but can't figure out how to do this simple task.</p>

<p>Thanks</p>

<templating><assets><image>
Looping through images in a Asset field type
# Looping through images in a Asset field type

(Asked by: username_0 on 2015-11-21)

Sorry, this is kind of a newbie question, but I can't figure out how to loop trough all images in one image asset field supporting multiple images.
The only way I have been able to output anything without an error, is this:
{% set asset = entry.wireframeImages.first() %}

{% if asset %}
    {{ asset.url }}
{% endif %}

But as you can see, only the first image is printed out.
How can I loop trough all images from this field?
I have been reading trough this page, but can't figure out how to do this simple task.
Thanks

**Tags:** templating, assets, image


---

## 2 answers

### Answer by username_1 on 2015-11-21. Score: 11 | Accepted answer

An Asset field – like all relational fields, including Entries, Categories etc – always return an array-like object which is an instance of a class called ElementCriteriaModel. To output the actual file data, this means you have to loop on the field, e.g.:
{% for asset in entry.wireframeImages %}
    
{% endfor %}

The above is true even if there's 1 Asset selected in the field, or 100.
The cool thing about the for loop in Twig is that it won't throw an error if you attempt to loop on an empty array or object. This means that you don't have to wrap the loop in an {% if %} statement to take care of cases where the Asset field may be empty. Moreover, you can add an {% else %} statement to the for loop, which will be executed if the field is in fact empty:
{% for asset in entry.wireframeImages %}
    
{% else %}
    Nope, no images here :(
{% endfor %}

In situations where your Asset field is limited to 1 file, a loop may seem like overkill – then you can use 
{% set asset = entry.wireframeImages.first %}

to get the first (and only) file. Keep in mind though, that if the Asset field is empty, calling first on it will in fact produce an error. To get around this, you can use the default filter to add a default value to the variable and suppress the error. In these cases you have to have a conditional testing the value as well, though – so the amount of code is about the same as just using a for loop:
{% set asset = entry.wireframeImages.first|default(false) %}
{% if asset %}
    
{% endif %}

Note that first isn't the only method available to ElementCriteriaModel instances, check out the official docs to read more about it.


---

### Answer by username_0 on 2015-11-21. Score: 3

Got a working solution:
{% set images = entry.wireframeImages %}
{% if images | length %}
  
    {% for image in images %}
      
        
      
    {% endfor %}
  
{% endif %}


---

