--- a/src/pyams_content/component/gallery/zmi/templates/renderer-default.pt Wed Sep 13 15:57:49 2017 +0200
+++ b/src/pyams_content/component/gallery/zmi/templates/renderer-default.pt Wed Sep 13 15:58:14 2017 +0200
@@ -0,0 +1,24 @@
+<div i18n:domain="pyams_content">
+ <tal:loop repeat="image context.values()">
+ <picture tal:define="image_data i18n:image.data;
+ image_url extension:absolute_url(image_data);
+ base_width 100 / 12;
+ width 12;">
+ <source media="(min-width: 1200px)"
+ tal:attributes="srcset string:${image_url}/++thumb++lg:w1200 1200w, ${image_url}/++thumb++lg:w512 512w, ${image_url}/++thumb++lg:w256 256w, ${image_url}/++thumb++lg:w128 128w;
+ sizes string:${round(base_width * width)}vw" />
+ <source media="(min-width: 992px)"
+ tal:attributes="srcset string:${image_url}/++thumb++md:w992 992w, ${image_url}/++thumb++md:w512 512w, ${image_url}/++thumb++md:w256 256w, ${image_url}/++thumb++md:w128 128w;
+ sizes string:${round(base_width * width)}vw" />
+ <source media="(min-width: 768px)"
+ tal:condition="width"
+ tal:attributes="srcset string:${image_url}/++thumb++sm:w768 768w, ${image_url}/++thumb++sm:w512 512w, ${image_url}/++thumb++sm:w256 256w, ${image_url}/++thumb++sm:w128 128w;
+ sizes string:${round(base_width * width)}vw" />
+ <source media="(max-width: 767px)"
+ tal:condition="width"
+ tal:attributes="srcset string:${image_url}/++thumb++xs:w768 768w, ${image_url}/++thumb++xs:w512 512w, ${image_url}/++thumb++xs:w256 256w, ${image_url}/++thumb++xs:w128 128w;
+ sizes string:${round(base_width * width)}vw" />
+ <img style="width: 100%;" tal:attributes="src image_url" />
+ </picture>
+ </tal:loop>
+</div>