Take the 2-minute tour ×
Craft CMS Stack Exchange is a question and answer site for administrators, end users, developers and designers for Craft CMS. It's 100% free, no registration required.

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 %}
share|improve this question

4 Answers 4

up vote 14 down vote accepted

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 %}
share|improve this answer

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 %}
share|improve this answer
{% 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

share|improve this answer

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

share|improve this answer
    
I believe entry.images[0] would work as well. –  Bill Criswell Jun 19 at 1:30

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.