Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-06-27T17:02:39.567Z
Answers.Text: 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.
Answers.UserDisplayName: Anna_MediaGirl
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-06-27T17:05:08.477Z
Answers.Text: Updated, sorry. I started answering and got sidetracked.
Answers.UserDisplayName: Matt Stein
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-06-27T17:09:51.890Z
Answers.Text: Your edited answer did the trick! Do you know why my code was failing?
Answers.UserDisplayName: Anna_MediaGirl
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-06-27T17:11:42.867Z
Answers.Text: @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.
Answers.UserDisplayName: Matt Stein
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-06-27T17:17:01.977Z
Answers.Text: @Anna_MediaGirl Glad it helped!
Answers.UserDisplayName: Matt Stein
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-06-27T23:10:17.190Z
Answers.Text: 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
Answers.UserDisplayName: Marion Newlevant
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-06-27T23:11:44.803Z
Answers.Text: @MarionNewlevant Thanks for setting the record straight, Marion!
Answers.UserDisplayName: Matt Stein
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-06-28T17:31:26.153Z
Answers.Text: Very good to know!
Answers.UserDisplayName: Anna_MediaGirl
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-06-27T16:52:04.820Z
Answers.LastActivityDate: 2017-11-27T21:05:10.483Z
Answers.LastEditDate: 2017-11-27T21:05:10.483Z
Answers.UserDisplayName: Matt Stein
Body: <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>
  
Tags: <image-transforms>
Title: Multiple image transforms of same image in template
ThreadText: # 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 }) %}
      <div>
          <a href="{{ large.url }}"><img src="{{ thumb.url }}"></a>
      </div>
  {% 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) %}
      <div>
          <a href="{{ large.url }}"><img src="{{ thumb.url }}"></a>
      </div>
  {% 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 }) %}
      <div>
          <a href="{{ large.url }}"><img src="{{ thumb.url }}"></a>
      </div>
  {% 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() %}
      <div>
          <a href="{{ p.getUrl(large) }}"><img src="{{ p.getUrl(thumb) }}"></a>
      </div>
  {% 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**: @username_0 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**: @username_0 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**: @username_2 Thanks for setting the record straight, username_2!  
  > **username_0**: Very good to know!  
  
  ---
  
  