<p>You might consider setting a variable for the image, then one for each transform type.</p>

<pre><code>{% set thumb = { mode: 'crop', width: 300, height: 300 } %}
{% set large = { width: 600 } %}

{% for photo in photos %}
    {% set p = photo.image.first() %}
    &lt;div&gt;
        &lt;a href="{{ p.getUrl(large) }}"&gt;&lt;img src="{{ p.getUrl(thumb) }}"&gt;&lt;/a&gt;
    &lt;/div&gt;
{% endfor %}
</code></pre>

CC BY-SA 3.0
2014-06-27T17:02:39.567Z
I have to set "p" inside the loop... I tried putting the transforms outside the look as you posted put same results. I also tried setting two different image variables and same results.
Anna_MediaGirl
CC BY-SA 3.0
2014-06-27T17:05:08.477Z
Updated, sorry. I started answering and got sidetracked.
Matt Stein
CC BY-SA 3.0
2014-06-27T17:09:51.890Z
Your edited answer did the trick! Do you know why my code was failing?
Anna_MediaGirl
CC BY-SA 3.0
2014-06-27T17:11:42.867Z
@Anna_MediaGirl Authoritatively, no—I have a similar thing working. I assume there's a (significant) difference between Craft applying `.setTransform()` to the same AssetElement twice in a row, and just passing parameters to `.getUrl()` at precisely the point when you need it.
Matt Stein
CC BY-SA 3.0
2014-06-27T17:17:01.977Z
@Anna_MediaGirl Glad it helped!
Matt Stein
CC BY-SA 3.0
2014-06-27T23:10:17.190Z
In all three of your examples, `thumb` and `large` are set to the same `AssetFileModel`. [setTransform](http://buildwithcraft.com/docs/templating/assetfilemodel#setTransform) sets the default transform for that AssetFileModel
Marion Newlevant
CC BY-SA 3.0
2014-06-27T23:11:44.803Z
@MarionNewlevant Thanks for setting the record straight, Marion!
Matt Stein
CC BY-SA 3.0
2014-06-28T17:31:26.153Z
Very good to know!
Anna_MediaGirl
CC BY-SA 3.0
2014-06-27T16:52:04.820Z
2017-11-27T21:05:10.483Z
2017-11-27T21:05:10.483Z
Matt Stein
<p>I'm getting odd results when trying to apply multiple image transforms to the same image. Here's my code:</p>

<pre><code>{% for photo in photos %}
    {% set thumb = photo.image.first().setTransform({ mode: 'crop', width: 300, height: 300 }) %}
    {% set large = photo.image.first().setTransform({ width: 600 }) %}
    &lt;div&gt;
        &lt;a href="{{ large.url }}"&gt;&lt;img src="{{ thumb.url }}"&gt;&lt;/a&gt;
    &lt;/div&gt;
{% endfor %}
</code></pre>

<p>The above code renders an image that is 600px wide for BOTH "thumb" and "large" even though the criteria for each is different and I'm setting unique variables.</p>

<p>Is it possible to have multiple transforms on the same image? Is there another approach I should try?</p>

<hr>

<p>EDIT</p>

<p>Same results with these two code variations:</p>

<pre><code>{% set photos = craft.entries.section('photo').find() %}
{% set thumbTransform = { mode: 'crop', width: 300, height: 300 } %}
{% set largeTransform = { width: 600 } %}
{% for photo in photos %}
    {% set p = photo.image.first() %}
    {% set thumb = p.setTransform(thumbTransform) %}
    {% set large = p.setTransform(largeTransform) %}
    &lt;div&gt;
        &lt;a href="{{ large.url }}"&gt;&lt;img src="{{ thumb.url }}"&gt;&lt;/a&gt;
    &lt;/div&gt;
{% endfor %}
</code></pre>

<p>AND</p>

<pre><code>{% set photos = craft.entries.section('photo').find() %}
{% for photo in photos %}
    {% set thumbImage = photo.image.first() %}
    {% set largeImage = photo.image.first() %}
    {% set thumb = thumbImage.setTransform({ mode: 'crop', position: 'center-center', width: 300, height: 300 }) %}
    {% set large = largeImage.setTransform({ width: 600 }) %}
    &lt;div&gt;
        &lt;a href="{{ large.url }}"&gt;&lt;img src="{{ thumb.url }}"&gt;&lt;/a&gt;
    &lt;/div&gt;
{% endfor %}
</code></pre>

<image-transforms>
Multiple image transforms of same image in template
# Multiple image transforms of same image in template

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

I'm getting odd results when trying to apply multiple image transforms to the same image. Here's my code:
{% for photo in photos %}
    {% set thumb = photo.image.first().setTransform({ mode: 'crop', width: 300, height: 300 }) %}
    {% set large = photo.image.first().setTransform({ width: 600 }) %}
    
        
    
{% endfor %}

The above code renders an image that is 600px wide for BOTH "thumb" and "large" even though the criteria for each is different and I'm setting unique variables.
Is it possible to have multiple transforms on the same image? Is there another approach I should try?

EDIT
Same results with these two code variations:
{% set photos = craft.entries.section('photo').find() %}
{% set thumbTransform = { mode: 'crop', width: 300, height: 300 } %}
{% set largeTransform = { width: 600 } %}
{% for photo in photos %}
    {% set p = photo.image.first() %}
    {% set thumb = p.setTransform(thumbTransform) %}
    {% set large = p.setTransform(largeTransform) %}
    
        
    
{% endfor %}

AND
{% set photos = craft.entries.section('photo').find() %}
{% for photo in photos %}
    {% set thumbImage = photo.image.first() %}
    {% set largeImage = photo.image.first() %}
    {% set thumb = thumbImage.setTransform({ mode: 'crop', position: 'center-center', width: 300, height: 300 }) %}
    {% set large = largeImage.setTransform({ width: 600 }) %}
    
        
    
{% endfor %}

**Tags:** image-transforms

---

## 1 answers

### Answer by username_1 on 2014-06-27. Score: 5 | Accepted answer

You might consider setting a variable for the image, then one for each transform type.
{% set thumb = { mode: 'crop', width: 300, height: 300 } %}
{% set large = { width: 600 } %}

{% for photo in photos %}
    {% set p = photo.image.first() %}
    
        
    
{% endfor %}

> **Comments:**
> **username_0**: I have to set "p" inside the loop... I tried putting the transforms outside the look as you posted put same results. I also tried setting two different image variables and same results.  
> **username_1**: Updated, sorry. I started answering and got sidetracked.  
> **username_0**: Your edited answer did the trick! Do you know why my code was failing?  
> **username_1**: @Anna_MediaGirl Authoritatively, no—I have a similar thing working. I assume there's a (significant) difference between Craft applying `.setTransform()` to the same AssetElement twice in a row, and just passing parameters to `.getUrl()` at precisely the point when you need it.  
> **username_1**: @Anna_MediaGirl Glad it helped!  
> **username_2**: In all three of your examples, `thumb` and `large` are set to the same `AssetFileModel`. [setTransform](http://buildwithcraft.com/docs/templating/assetfilemodel#setTransform) sets the default transform for that AssetFileModel  
> **username_1**: @MarionNewlevant Thanks for setting the record straight, Marion!  
> **username_0**: Very good to know!  

---

