--- a/src/pyams_file/templates/picture.pt Thu Oct 11 14:53:14 2018 +0200
+++ b/src/pyams_file/templates/picture.pt Fri Oct 12 08:16:50 2018 +0200
@@ -1,9 +1,9 @@
<picture
+ class="${css_class}"
tal:define="image_url tales:absolute_url(image);
- timestamp tales:timestamp(image);"
- tal:attributes="class css_class">
- <!-- xs source -->
+ timestamp tales:timestamp(image);">
<tal:if condition="xs_width">
+ <!-- xs source -->
<source media="(max-width: 767px)"
tal:define="width round(768 / 12 * xs_width)"
srcset="${image_url}/++thumb++${xs_thumb}:w${width}?_=${timestamp}" />
@@ -11,8 +11,8 @@
<source media="(max-width: 767px)"
tal:condition="not:xs_width"
srcset="/--static--/pyams_skin/img/dot.png" />
- <!-- sm source -->
<tal:if condition="sm_width">
+ <!-- sm source -->
<source media="(max-width: 991px)"
tal:define="width round(992 / 12 * sm_width)"
srcset="${image_url}/++thumb++${sm_thumb}:w${width}?_=${timestamp}" />
@@ -20,8 +20,8 @@
<source media="(max-width: 991px)"
tal:condition="not:sm_width"
srcset="/--static--/pyams_skin/img/dot.png" />
- <!-- md source -->
<tal:if condition="md_width">
+ <!-- md source -->
<source media="(max-width: 1199px)"
tal:define="width round(1200 / 12 * md_width)"
srcset="${image_url}/++thumb++${md_thumb}:w${width}?_=${timestamp}" />
@@ -29,8 +29,8 @@
<source media="(max-width: 1199px)"
tal:condition="not:md_width"
srcset="/--static--/pyams_skin/img/dot.png" />
- <!-- lg source -->
<tal:if condition="lg_width">
+ <!-- lg source -->
<source media="(min-width: 1200px)"
tal:define="width round(1600 / 12 * lg_width)"
srcset="${image_url}/++thumb++${lg_thumb}:w${width}?_=${timestamp}" />
@@ -40,5 +40,5 @@
srcset="/--static--/pyams_skin/img/dot.png" />
<!-- fallback image -->
<img style="width: 100%;"
- tal:attributes="alt alt; src image_url" />
+ alt="${alt}" src="${image_url}?_=${timestamp}" />
</picture>