# HG changeset patch
# User Thierry Florac <thierry.florac@onf.fr>
# Date 1539262394 -7200
# Node ID 4bfd57a83213483f5992f8942eafc86763058bc1
# Parent  d480d9cb0b2572cb6ceaf2d501153da5787db4a3
Updated picture template

diff -r d480d9cb0b25 -r 4bfd57a83213 src/pyams_file/templates/picture.pt
--- a/src/pyams_file/templates/picture.pt	Tue Oct 09 16:33:03 2018 +0200
+++ b/src/pyams_file/templates/picture.pt	Thu Oct 11 14:53:14 2018 +0200
@@ -1,49 +1,43 @@
 <picture
 	tal:define="image_url tales:absolute_url(image);
-				timestamp tales:timestamp(image);
-				base_width 100 / 12;"
+				timestamp tales:timestamp(image);"
 	tal:attributes="class css_class">
-	<!-- lg source -->
-	<source media="(min-width: 1200px)"
-			tal:condition="lg_width"
-			tal:attributes="srcset string:${image_url}/++thumb++${lg_thumb}:w128?_=${timestamp} 128w,
-										  ${image_url}/++thumb++${lg_thumb}:w256?_=${timestamp} 256w,
-										  ${image_url}/++thumb++${lg_thumb}:w512?_=${timestamp} 512w,
-										  ${image_url}/++thumb++${lg_thumb}:w1200?_=${timestamp} 1200w" />
-	<source media="(min-width: 1200px)"
-			srcset="/--static--/pyams_skin/img/dot.png" sizes="100vw"
-			tal:condition="not:lg_width" />
+	<!-- xs source -->
+	<tal:if condition="xs_width">
+		<source media="(max-width: 767px)"
+				tal:define="width round(768 / 12 * xs_width)"
+				srcset="${image_url}/++thumb++${xs_thumb}:w${width}?_=${timestamp}" />
+	</tal:if>
+	<source media="(max-width: 767px)"
+			tal:condition="not:xs_width"
+			srcset="/--static--/pyams_skin/img/dot.png" />
+	<!-- sm source -->
+	<tal:if condition="sm_width">
+		<source media="(max-width: 991px)"
+				tal:define="width round(992 / 12 * sm_width)"
+				srcset="${image_url}/++thumb++${sm_thumb}:w${width}?_=${timestamp}" />
+	</tal:if>
+	<source media="(max-width: 991px)"
+			tal:condition="not:sm_width"
+			srcset="/--static--/pyams_skin/img/dot.png" />
 	<!-- md source -->
-	<source media="(min-width: 992px)"
-			tal:condition="md_width"
-			tal:attributes="srcset string:${image_url}/++thumb++${md_thumb}:w128?_=${timestamp} 128w,
-										  ${image_url}/++thumb++${md_thumb}:w256?_=${timestamp} 256w,
-										  ${image_url}/++thumb++${md_thumb}:w512?_=${timestamp} 512w,
-										  ${image_url}/++thumb++${md_thumb}:w992?_=${timestamp} 992w" />
-	<source media="(min-width: 992px)"
-			srcset="/--static--/pyams_skin/img/dot.png" sizes="100vw"
-			tal:condition="not:md_width" />
-	<!-- sm source -->
-	<source media="(min-width: 768px)"
-			tal:condition="sm_width"
-			tal:attributes="srcset string:${image_url}/++thumb++${sm_thumb}:w128?_=${timestamp} 128w,
-										  ${image_url}/++thumb++${sm_thumb}:w256?_=${timestamp} 256w,
-										  ${image_url}/++thumb++${sm_thumb}:w512?_=${timestamp} 512w,
-										  ${image_url}/++thumb++${sm_thumb}:w768?_=${timestamp} 768w,
-										  " />
-	<source media="(min-width: 768px)"
-			srcset="/--static--/pyams_skin/img/dot.png" sizes="100vw"
-			tal:condition="not:sm_width" />
-	<!-- xs source -->
-	<source media="(max-width: 767px)"
-			tal:condition="xs_width"
-			tal:attributes="srcset string:${image_url}/++thumb++${xs_thumb}:w128?_=${timestamp} 128w,
-										  ${image_url}/++thumb++${xs_thumb}:w256?_=${timestamp} 256w,
-										  ${image_url}/++thumb++${xs_thumb}:w512?_=${timestamp} 512w,
-										  ${image_url}/++thumb++${xs_thumb}:w768?_=${timestamp} 768w" />
-	<source media="(max-width: 767px)"
-			srcset="/--static--/pyams_skin/img/dot.png" sizes="100vw"
-			tal:condition="not:xs_width" />
+	<tal:if condition="md_width">
+		<source media="(max-width: 1199px)"
+				tal:define="width round(1200 / 12 * md_width)"
+				srcset="${image_url}/++thumb++${md_thumb}:w${width}?_=${timestamp}" />
+	</tal:if>
+	<source media="(max-width: 1199px)"
+			tal:condition="not:md_width"
+			srcset="/--static--/pyams_skin/img/dot.png" />
+	<!-- lg source -->
+	<tal:if condition="lg_width">
+		<source media="(min-width: 1200px)"
+				tal:define="width round(1600 / 12 * lg_width)"
+				srcset="${image_url}/++thumb++${lg_thumb}:w${width}?_=${timestamp}" />
+	</tal:if>
+	<source media="(min-width: 1200px)"
+			tal:condition="not:lg_width"
+			srcset="/--static--/pyams_skin/img/dot.png" />
 	<!-- fallback image -->
 	<img style="width: 100%;"
 		 tal:attributes="alt alt; src image_url" />