<p>When using the for loop you don't need to set <code>image</code> as it is set in the for loop. You will also need to define <code>transformedImage</code> on every iteration, so move it within the for loop.</p>

<p>Give the below a go, it should do what you are after.</p>

<pre><code>&lt;div id="header-slider"&gt;
  &lt;ul&gt;
    {% for image in entry.bannerSlider %}
      {% set transformedImage = craft.imager.transformImage(image, { width: 1420, height: 550, position: image.focalPoint,  effects: { grayscale: true, gamma: 1.5}, }) %}
      &lt;li data-transition="" data-masterspeed="500"&gt;
        &lt;img src="{{ transformedImage.url }}"/&gt;
      &lt;/li&gt;
    {% endfor %}
  &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

CC BY-SA 3.0
2017-01-09T04:42:27.717Z
What if you wanted to pull the image out of another section? Like `{% for image in craft.entries.section('news').limit(1) %}
          {% set transformedImage = craft.imager.transformImage(image, { width: 1420, height: 550, position: image.focalPoint }) %}
         <img src="{{ image.bannerImage.first().getUrl }}" alt="" />
         {% endfor %}` Where do you then define the image? (bannerImage = asset field)
Nutmeg
CC BY-SA 3.0
2017-01-09T06:44:05.143Z
**This would be better as a new question**. But if you wanted to pull images from different sections you would be better off building up an array in twig then looping through that array to display the images
Fyrebase
CC BY-SA 3.0
2017-01-09T06:56:12.460Z
yes, I agree - would you mind following this up in this new [thread](http://craftcms.stackexchange.com/questions/18434/pulling-images-from-other-sections-with-image-transform)?
Nutmeg
CC BY-SA 3.0
2017-01-09T04:03:00.543Z
2017-01-09T04:26:07.250Z
2017-01-09T04:26:07.250Z
Fyrebase
<p>I'm stuck with the <code>.first()</code> element and why the for-loop code won't work. </p>

<pre><code>&lt;div id="header-slider"&gt;
  &lt;ul&gt;        
    {% set image = entry.bannerSlider.first() %}
    {% set transformedImage = craft.imager.transformImage(image, 
      { width: 1420, height: 550, position: image.focalPoint,  effects: { grayscale: true, gamma: 1.5}, }) %}
    {% for image in entry.bannerSlider %}
      &lt;li data-transition="" data-masterspeed="500"&gt;
        &lt;img src="{{ transformedImage.url }}"/&gt;
      &lt;/li&gt;
    {% endfor %}
  &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>If I remove the <code>.first()</code> element the code breaks ("An unknown image object was used"), but, as this code populates a slider, I need all the images loaded, hence my attempt with the for-loop.</p>

<p>I think I am mixing up different Models, but need someone to point it out, please...</p>

CC BY-SA 3.0
2017-01-09T03:46:33.280Z
Going on that error, you are mixing the models up indeed. What is `bannerSlider`, Is it a asset field, matrix or something else?
Fyrebase
CC BY-SA 3.0
2017-01-09T03:57:44.427Z
The `bannerSlider` is an asset field.
Nutmeg
<forloop><plugin-imager>
Image(r) transform and for loop
# Image(r) transform and for loop

(Asked by: username_0 on 2017-01-09)

I'm stuck with the .first() element and why the for-loop code won't work. 

          
    {% set image = entry.bannerSlider.first() %}
    {% set transformedImage = craft.imager.transformImage(image, 
      { width: 1420, height: 550, position: image.focalPoint,  effects: { grayscale: true, gamma: 1.5}, }) %}
    {% for image in entry.bannerSlider %}
      
        
      
    {% endfor %}
  


If I remove the .first() element the code breaks ("An unknown image object was used"), but, as this code populates a slider, I need all the images loaded, hence my attempt with the for-loop.
I think I am mixing up different Models, but need someone to point it out, please...

**Tags:** forloop, plugin-imager
> **Comments:**
> **username_1**: Going on that error, you are mixing the models up indeed. What is `bannerSlider`, Is it a asset field, matrix or something else?  
> **username_0**: The `bannerSlider` is an asset field.  

---

## 1 answers

### Answer by username_1 on 2017-01-09. Score: 4 | Accepted answer

When using the for loop you don't need to set image as it is set in the for loop. You will also need to define transformedImage on every iteration, so move it within the for loop.
Give the below a go, it should do what you are after.

  
    {% for image in entry.bannerSlider %}
      {% set transformedImage = craft.imager.transformImage(image, { width: 1420, height: 550, position: image.focalPoint,  effects: { grayscale: true, gamma: 1.5}, }) %}
      
        
      
    {% endfor %}

> **Comments:**
> **username_0**: What if you wanted to pull the image out of another section? Like `{% for image in craft.entries.section('news').limit(1) %}           {% set transformedImage = craft.imager.transformImage(image, { width: 1420, height: 550, position: image.focalPoint }) %}          <img src="{{ image.bannerImage.first().getUrl }}" alt="" />          {% endfor %}` Where do you then define the image? (bannerImage = asset field)  
> **username_1**: **This would be better as a new question**. But if you wanted to pull images from different sections you would be better off building up an array in twig then looping through that array to display the images  
> **username_0**: yes, I agree - would you mind following this up in this new [thread](http://craftcms.stackexchange.com/questions/18434/pulling-images-from-other-sections-with-image-transform)?  

---

