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.
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 %}
answered Jul 15 '14 at 15:22
-
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
-
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
-
1Might 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
striptagsproblem? (Sorry if I write here, will delete the comment later!) – carlcs Jul 30 '14 at 21:14