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, 2014 at 21:14

1 Answer 1


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. Jul 15, 2014 at 15:29
  • 2
    Added to The List. Jul 15, 2014 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. Jul 15, 2014 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. Jul 15, 2014 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 Jul 15, 2014 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.