3

I'm working on creating an image transform to handle retina images. I upload the 2x assets and need an image transform to create my images at 50% their original size. Since images on the site can be varying widths and heights I am currently forced to create a new image transform for each image ratio. Percentage values would cut this down to a single image transform for everything.

  • OT: Stuart, did you solve your striptags problem? (Sorry if I write here, will delete the comment later!) – carlcs Jul 30 '14 at 21:14
5

It’s possible to do this from your templates:

{% for image in entry.myAssetsField %}

    {% set half = {
        width: (image.width/2)|round,
        height: (image.height/2)|round
    } %}

    {% set halfUrl = image.getUrl(half) %}

    <img src="{{ halfUrl }}" srcset="{{ image.url }} 2x" width="{{ half.width }}" height="{{ half.height }}">

{% endfor %}
  • I forget about being able to use math in these situations. Still, would be nice to see percentage values in the CP. – Stuart McCoy Jul 15 '14 at 15:29
  • 2
    Added to The List. – Brandon Kelly Jul 15 '14 at 16:16
  • Great, because I just realized that when this gets mixed with Matrix blocks it gets even more complicated. It works but it's just a mess of variables that make template code harder to parse for bugs. – Stuart McCoy Jul 15 '14 at 17:45
  • 1
    Might want to consider moving chunks of code to separate includes or macros. Feel free to use those features liberally – there’s no noticeable performance penalty. – Brandon Kelly Jul 15 '14 at 17:54
  • Just wanted to chime in to say that, if you are not doing art direction, you don't needs <picture>. An image with srcset and size is enough: picture.responsiveimages.org/#when-to-use this article helps a lot with keeping your sanity ericportis.com/posts/2014/srcset-sizes – Jérôme Coupé Jul 15 '14 at 18: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.