Image transforms getting applied even when image is smaller than the transform's width

Question

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.

To clarify, are you saying if the image is less than 690px width you don't want the transform to apply? — Peter Tell, Oct 09 '14 at 16:30
Yes. I didn't choose "Stretch" so shouldn't the Transform NOT touch images under that width? — Mark Busnelli Jr, Oct 09 '14 at 16:31
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 09 '14 at 16:35
@PeterTell You had the advantage there too - that was typed from my phone while feeding the baby a bottle :) — Brandon Kelly, Oct 09 '14 at 16:47
possible duplicate of Prevent Asset Transforms from scaling Image past 100% — carlcs, Oct 09 '14 at 17:10

Brandon Kelly · Accepted Answer · 2014-10-09T16:46:05.780

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

edited Oct 09 '14 at 16:46

answered Oct 09 '14 at 16:35

Brandon Kelly

34,307
2
71
137

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 09 '14 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 09 '14 at 16:43
Hmm okay. Agree to disagree then it is :D Thanks for the help! – Mark Busnelli Jr Oct 09 '14 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 '15 at 03:50
@kgrote You can vote for something like that here: http://feedback.buildwithcraft.com/forums/285221-feature-requests/suggestions/10007034-image-transforms-have-option-not-to-scale-up – Brandon Kelly Dec 31 '15 at 14:48

Image transforms getting applied even when image is smaller than the transform's width

1 Answers1

Linked