2

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 %}
5

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 %}
| improve this answer | |
  • 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 Jun 27 '14 at 17:02
  • Updated, sorry. I started answering and got sidetracked. – Matt Stein Jun 27 '14 at 17:05
  • 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. – Matt Stein Jun 27 '14 at 17:11
  • 1
    @Anna_MediaGirl Glad it helped! – Matt Stein Jun 27 '14 at 17:17
  • 1
    In all three of your examples, thumb and large are set to the same AssetFileModel. setTransform sets the default transform for that AssetFileModel – Marion Newlevant Jun 27 '14 at 23:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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