--- a/src/pyams_default_theme/component/illustration/templates/illustration-default.pt Mon Aug 27 11:07:58 2018 +0200
+++ b/src/pyams_default_theme/component/illustration/templates/illustration-default.pt Mon Aug 27 11:08:38 2018 +0200
@@ -1,20 +1,36 @@
<div class="text-center margin-y-5">
- <picture tal:define="image_url tales:absolute_url(view.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: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: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; alt view.alt_title;" />
+ <picture tal:define="image view.data;
+ image_url tales:absolute_url(image);
+ 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" />
+ <!-- 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" />
+ <!-- fallback image -->
+ <img style="width: 100%;"
+ tal:attributes="alt alt; src image_url" />
</picture>
<span tal:content="view.title">legend</span>
</div>