Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2014-06-19T00:47:39.277Z
Answers.LastActivityDate: 2022-10-21T14:17:39.383Z
Answers.LastEditDate: 2022-10-21T14:17:39.383Z
Answers.UserDisplayName: a-am
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-06-19T00:46:13.627Z
Answers.LastActivityDate: 2014-06-26T19:51:04.403Z
Answers.LastEditDate: 2014-06-26T19:51:04.403Z
Answers.UserDisplayName: julzmon
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-06-19T01:30:55.517Z
Answers.Text: I believe `entry.images[0]` would work as well.
Answers.UserDisplayName: Bill Criswell
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-06-19T00:59:56.710Z
Answers.LastActivityDate: 2014-06-19T01:18:04.513Z
Answers.LastEditDate: 2014-06-19T01:18:04.513Z
Answers.UserDisplayName: Eric Ressler
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-06-19T04:59:02.263Z
Answers.LastActivityDate: 2014-06-19T04:59:02.263Z
Answers.UserDisplayName: Brandon Kelly
Body: <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>
  
Tags: <entries>
Title: How do I target the first item in a Twig for loop?
ThreadText: # 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 %}
  <img src="{{ image.url }}" alt="{{ image.title }}">
  {% endfor %}
  
  ```
  
  **Tags:** entries
  
  
  ---
  
  ## 4 answers
  
  ### Answer by username_4 on 2014-06-19. Score: 25 | Accepted answer
  
  If the “loop” is an [ElementCriteriaModel](http://buildwithcraft.com/docs/templating/elementcriteriamodel) object, then you can grab the first element using [`.first()`](http://buildwithcraft.com/docs/templating/elementcriteriamodel#outputting-elements):
  
  ```
  {% 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](http://twig.sensiolabs.org/doc/filters/first.html).
  
  ```
  {% 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](https://twig.symfony.com/doc/2.x/tags/for.html#the-loop-variable) 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 by username_0 on 2014-06-19. Score: 9
  
  ```
  {% 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 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.  
  
  ---
  
  