7

I have a detail transform setup and here's my template code:

{% if block.type == 'image' %}
    {% for asset in block.image %}
        <img src="{{ asset.url('detail') }}" alt="{{ asset.title }}" class="{% if block.position in ['left'] %}pull-left{% endif %}">
    {% endfor %}
{% endif %}

But on the front end it's taking a smaller image and stretching it and it's become distorted. If I remove 'detail' from the url() parameter it's fine.

Here's what my Detail Transform looks like:

enter image description here

Any thoughts?

It also looks like all transforms are doing the same thing as well. So it's not just related to the detail transform.

Improve this question
6
  • To clarify, are you saying if the image is less than 690px width you don't want the transform to apply?
    – Peter Tell
    Oct 9, 2014 at 16:30
  • Yes. I didn't choose "Stretch" so shouldn't the Transform NOT touch images under that width?
    – Mark Busnelli Jr
    Oct 9, 2014 at 16:31
  • 1
    Pretty sure no. I think without further rules in the markup it's going to try and set it at the dimensions you specify even if it's not "Sretched" (Which will fill with the whole image, not crop). Cropping will do just that, crop to a dimension that you specify. I'll put an answer below for conditional.... awww. Brandon beat me to it. CURSE YOU BRANDON AND YOUR INFINITE INTERNET POINTS!
    – Peter Tell
    Oct 9, 2014 at 16:35
  • 1
    @PeterTell You had the advantage there too - that was typed from my phone while feeding the baby a bottle :)
    – Brandon Kelly
    Oct 9, 2014 at 16:47
  • @BrandonKelly Oh you had to go there, didn't you. ;-)
    – Peter Tell
    Oct 9, 2014 at 16:51

1 Answer 1

Reset to default
11

I think you're confusing the "Width" setting to mean "Max Width", which it doesn’t. The image will get sized to match your transform's Width setting, regardless of whether it's bigger or smaller than that width beforehand.

If you want to conditionally apply the transform, only if it's larger than the transform's width, you can do this:

{% if asset.width > asset.getWidth('detail') %}
    {% do asset.setTransform('detail') %}
{% endif %}

<img src="{{ asset.url }}" alt="{{ asset.title }}" class="{% if block.position in ['left'] %}pull-left{% endif %}">
Improve this answer
5
  • 2
    Ahh I see! Seems kind of unnecessary to me to have to do that though. Wouldn't it make more sense for the Transforms to be "smart" about that? Or possibly give us a MaxWidth option?
    – Mark Busnelli Jr
    Oct 9, 2014 at 16:41
  • 2
    I don't thinks so. The above code is easy enough to add, and I think most people want transform's to be a way of unifying image sizes, even if that means stretching them up in some cases.
    – Brandon Kelly
    Oct 9, 2014 at 16:43
  • Hmm okay. Agree to disagree then it is :D Thanks for the help!
    – Mark Busnelli Jr
    Oct 9, 2014 at 17:11
  • 1
    I use max width and max height quite a bit on my EE sites, so I personally would find this functionality useful.
    – kmgdev
    Dec 28, 2015 at 3:50
  • @kgrote You can vote for something like that here: feedback.buildwithcraft.com/forums/285221-feature-requests/…
    – Brandon Kelly
    Dec 31, 2015 at 14:48

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.