How do I target the first item in a Twig for loop?

Question

I'm looping through some images and want to target just the first image. How do I do that?

{% for image in entry.images %}
<img src="{{ image.url }}" alt="{{ image.title }}">
{% endfor %}

Answer 1

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 2

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 %}
    <img src="{{ image.url }}" alt="{{ image.title }}">

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

Answer 3

{% for image in entry.images %}
    {% if loop.first %}
         <img src="{{ image.url }}" alt="{{ image.title }}">
    {% elseif loop.last %}
          <img src="{{ image.url }}" alt="{{ image.title }}">
    {% else %}
          <img src="{{ image.url }}" alt="{{ image.title }}">
    {% endif %}
{% endfor %}

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

Answer 4

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