--- a/src/pyams_default_theme/component/gallery/templates/renderer-default.pt Wed Oct 10 17:43:32 2018 +0200
+++ b/src/pyams_default_theme/component/gallery/templates/renderer-default.pt Thu Oct 11 14:51:45 2018 +0200
@@ -2,33 +2,19 @@
<tal:loop repeat="image context.get_visible_medias()">
<picture tal:define="image_data i18n:image.data;
image_url tales:absolute_url(image_data);
- timestamp tales:timestamp(image);
- base_width 100 / 12;">
- <!-- lg source -->
- <source media="(min-width: 1200px)" sizes="12vw, 25vw, 50vw, 100vw"
- tal:attributes="srcset string:${image_url}/++thumb++lg:w128?_=${timestamp} 128w,
- ${image_url}/++thumb++lg:w256?_=${timestamp} 256w,
- ${image_url}/++thumb++lg:w512?_=${timestamp} 512w,
- ${image_url}/++thumb++lg:w1200?_=${timestamp} 1200w" />
+ timestamp tales:timestamp(image);">
+ <!-- xs source -->
+ <source media="(max-width: 767px)"
+ srcset="${image_url}/++thumb++w768?_=${timestamp}" />
+ <!-- sm source -->
+ <source media="(max-width: 991px)"
+ srcset="${image_url}/++thumb++w992?_=${timestamp}" />
<!-- md source -->
- <source media="(min-width: 992px)" sizes="12vw, 25vw, 50vw, 100vw"
- tal:attributes="srcset string:${image_url}/++thumb++md:w128?_=${timestamp} 128w,
- ${image_url}/++thumb++md:w256?_=${timestamp} 256w,
- ${image_url}/++thumb++md:w512?_=${timestamp} 512w,
- ${image_url}/++thumb++md:w992?_=${timestamp} 992w" />
- <!-- sm source -->
- <source media="(min-width: 768px)" sizes="12vw, 25vw, 50vw, 100vw"
- tal:attributes="srcset string:${image_url}/++thumb++sm:w128?_=${timestamp} 128w,
- ${image_url}/++thumb++sm:w256?_=${timestamp} 256w,
- ${image_url}/++thumb++sm:w512?_=${timestamp} 512w,
- ${image_url}/++thumb++sm:w768?_=${timestamp} 768w,
- " />
- <!-- xs source -->
- <source media="(max-width: 767px)" sizes="12vw, 25vw, 50vw, 100vw"
- tal:attributes="srcset string:${image_url}/++thumb++xs:w128?_=${timestamp} 128w,
- ${image_url}/++thumb++xs:w256?_=${timestamp} 256w,
- ${image_url}/++thumb++xs:w512?_=${timestamp} 512w,
- ${image_url}/++thumb++xs:w768?_=${timestamp} 768w" />
+ <source media="(max-width: 1199px)"
+ srcset="${image_url}/++thumb++w1200?_=${timestamp}" />
+ <!-- lg source -->
+ <source media="(min-width: 1200px)"
+ srcset="${image_url}/++thumb++w1600?_=${timestamp}" />
<!-- fallback image -->
<img style="width: 100%;"
tal:attributes="alt i18n:image.alt_title; src image_url" />