<p>Twig has <a href="https://twig.symfony.com/doc/2.x/tags/for.html#the-loop-variable" rel="nofollow noreferrer">loop-variables</a> which can be accessed inside for-loops. <code>loop.first</code> will return true on the first iteration.</p>
<pre><code>{% for image in entry.images %}
    &lt;img src=&quot;{{ image.url }}&quot; alt=&quot;{{ image.title }}&quot;&gt;

    {% if loop.first %}
        Do stuff..
    {% endif %}
{% endfor %}
</code></pre>

CC BY-SA 4.0
2014-06-19T00:47:39.277Z
2022-10-21T14:17:39.383Z
2022-10-21T14:17:39.383Z
a-am
<pre><code>{% for image in entry.images %}
    {% if loop.first %}
         &lt;img src="{{ image.url }}" alt="{{ image.title }}"&gt;
    {% elseif loop.last %}
          &lt;img src="{{ image.url }}" alt="{{ image.title }}"&gt;
    {% else %}
          &lt;img src="{{ image.url }}" alt="{{ image.title }}"&gt;
    {% endif %}
{% endfor %}
</code></pre>

<p>It can be done with loop.first &amp; loop.last</p>

CC BY-SA 3.0
2014-06-19T00:46:13.627Z
2014-06-26T19:51:04.403Z
2014-06-26T19:51:04.403Z
julzmon
<p>I'm not sure if you are asking how to grab just the first image, or manipulate just the first image in a loop. You can use <code>.first()</code> on asset fields to grab the first asset in the array only.</p>

<p>You can also do all kinds of cool things with loops in twig: <a href="http://twig.sensiolabs.org/doc/tags/for.html#the-loop-variable">http://twig.sensiolabs.org/doc/tags/for.html#the-loop-variable</a></p>

<p>To manipulate just the first image within the loop, you would use <code>loop.first</code></p>

CC BY-SA 3.0
2014-06-19T01:30:55.517Z
I believe `entry.images[0]` would work as well.
Bill Criswell
CC BY-SA 3.0
2014-06-19T00:59:56.710Z
2014-06-19T01:18:04.513Z
2014-06-19T01:18:04.513Z
Eric Ressler
<p>If the “loop” is an <a href="http://buildwithcraft.com/docs/templating/elementcriteriamodel">ElementCriteriaModel</a> object, then you can grab the first element using <a href="http://buildwithcraft.com/docs/templating/elementcriteriamodel#outputting-elements"><code>.first()</code></a>:</p>

<pre><code>{% set blogPost = craft.entries.section('blog').order('posdDate desc').first() %}
--
{% set image = entry.myAssetsField.first() %}
--
{% set firstTextBlock = entry.myMatrixField.type('text').first() %}
</code></pre>

<p>However if it’s just a normal array, then you will need to grab the <code>[0]</code> syntax instead, or Twig’s <a href="http://twig.sensiolabs.org/doc/filters/first.html"><code>|first</code> filter</a>.</p>

<pre><code>{% set updates = craft.feeds.getFeedItems('http://buildwithcraft.com/updates.rss') %}
{% set latestUpdate = updates[0] %}
--
{% set primaryLocale = craft.i18n.getSiteLocaleIds()|first %}
</code></pre>

<p>Note that the <code>[0]</code> and <code>|first</code> syntaxes are available to ElementCriteriaModel objects as well, and there’s no performance penalty for using those. <code>.first()</code> was the only one you could use originally, but that changed in Craft 1.3. I still prefer <code>.first()</code> when it can be used, just because it looks a little cleaner and jQuery-esque.</p>

<p>One warning about <code>[0]</code>: If the array/ElementCriteriaModel doesn’t have a first item, and if Dev Mode is enabled, Twig will give you an error.</p>

<p>Bad:</p>

<pre><code>{% set firstItem = myArray[0] %}
{% if firstItem %}
    ...
{% endif %}
</code></pre>

<p>Good:</p>

<pre><code>{% if myArray[0] is defined %}
    {% set firstItem = myArray[0] %}
    ...
{% endif %}
</code></pre>

<p>With <code>|first</code> and <code>.first()</code> it’s the other way around, though:</p>

<p>Bad:</p>

<pre><code>{% if myArray|first is defined %}
    {% set firstItem = myArray|first %}
    ...
{% endif %}

--

{% if entry.myAssetsField.first() is defined %}
    {% set firstItem = entry.myAssetsField.first() %}
    ...
{% endif %}
</code></pre>

<p>Good:</p>

<pre><code>{% set firstItem = myArray|first %}
{% if firstItem %}
    ...
{% endif %}

--

{% set firstItem = entry.myAssetsField.first() %}
{% if firstItem %}
    ...
{% endif %}
</code></pre>

CC BY-SA 3.0
2014-06-19T04:59:02.263Z
2014-06-19T04:59:02.263Z
Brandon Kelly
<p>I'm looping through some images and want to target just the first image. How do I do that?</p>

<pre><code>{% for image in entry.images %}
&lt;img src="{{ image.url }}" alt="{{ image.title }}"&gt;
{% endfor %}
</code></pre>

<entries>
How do I target the first item in a Twig for loop?
# How do I target the first item in a Twig for loop?

(Asked by: username_0 on 2014-06-19)

I'm looping through some images and want to target just the first image. How do I do that?
{% for image in entry.images %}

{% endfor %}

**Tags:** entries


---

## 4 answers

### Answer by username_4 on 2014-06-19. Score: 25 | Accepted answer

If the “loop” is an ElementCriteriaModel object, then you can grab the first element using .first():
{% set blogPost = craft.entries.section('blog').order('posdDate desc').first() %}
--
{% set image = entry.myAssetsField.first() %}
--
{% set firstTextBlock = entry.myMatrixField.type('text').first() %}

However if it’s just a normal array, then you will need to grab the [0] syntax instead, or Twig’s |first filter.
{% set updates = craft.feeds.getFeedItems('http://buildwithcraft.com/updates.rss') %}
{% set latestUpdate = updates[0] %}
--
{% set primaryLocale = craft.i18n.getSiteLocaleIds()|first %}

Note that the [0] and |first syntaxes are available to ElementCriteriaModel objects as well, and there’s no performance penalty for using those. .first() was the only one you could use originally, but that changed in Craft 1.3. I still prefer .first() when it can be used, just because it looks a little cleaner and jQuery-esque.
One warning about [0]: If the array/ElementCriteriaModel doesn’t have a first item, and if Dev Mode is enabled, Twig will give you an error.
Bad:
{% set firstItem = myArray[0] %}
{% if firstItem %}
    ...
{% endif %}

Good:
{% if myArray[0] is defined %}
    {% set firstItem = myArray[0] %}
    ...
{% endif %}

With |first and .first() it’s the other way around, though:
Bad:
{% if myArray|first is defined %}
    {% set firstItem = myArray|first %}
    ...
{% endif %}

--

{% if entry.myAssetsField.first() is defined %}
    {% set firstItem = entry.myAssetsField.first() %}
    ...
{% endif %}

Good:
{% set firstItem = myArray|first %}
{% if firstItem %}
    ...
{% endif %}

--

{% set firstItem = entry.myAssetsField.first() %}
{% if firstItem %}
    ...
{% endif %}


---

### Answer by username_1 on 2014-06-19. Score: 34

Twig has loop-variables which can be accessed inside for-loops. loop.first will return true on the first iteration.
{% for image in entry.images %}
    

    {% if loop.first %}
        Do stuff..
    {% endif %}
{% endfor %}


---

### Answer by username_0 on 2014-06-19. Score: 9

{% for image in entry.images %}
    {% if loop.first %}
         
    {% elseif loop.last %}
          
    {% else %}
          
    {% endif %}
{% endfor %}

It can be done with loop.first & loop.last


---

### Answer by username_2 on 2014-06-19. Score: 7

I'm not sure if you are asking how to grab just the first image, or manipulate just the first image in a loop. You can use `.first()` on asset fields to grab the first asset in the array only.

You can also do all kinds of cool things with loops in twig: <http://twig.sensiolabs.org/doc/tags/for.html#the-loop-variable>

To manipulate just the first image within the loop, you would use `loop.first`

> **Comments:**
> **username_3**: I believe `entry.images[0]` would work as well.  

---

