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

diff -r a6e1d18bde08 -r 4e558fd70749 src/pyams_portal/portlets/image/skin/image.pt
--- a/src/pyams_portal/portlets/image/skin/image.pt	Tue Oct 09 16:22:16 2018 +0200
+++ b/src/pyams_portal/portlets/image/skin/image.pt	Mon Oct 15 12:14:33 2018 +0200
@@ -6,49 +6,45 @@
 					slot_width slot_config.get_width();
 					base_width 100 / 12;
 					timestamp tales:timestamp(image);">
-		<tal:var define="width slot_width['lg']">
-			<source media="(min-width: 1200px)" sizes="12vw, 25vw, 50vw, 100vw"
-					tal:condition="width"
-					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" />
-			<source media="(min-width: 1200px)" sizes="100vw"
-					srcset="/--static--/pyams_default_theme/img/dot.png"
-					tal:condition="not:width" />
+		<tal:var define="xs_width slot_width['xs']">
+			<tal:if condition="xs_width">
+				<source media="(max-width: 767px)"
+						tal:define="width round(768 / 12 * xs_width)"
+						srcset="${image_url}/++thumb++xs:w${width}?_=${timestamp}" />
+			</tal:if>
+			<source media="(max-width: 767px)"
+					tal:condition="not:xs_width"
+					srcset="/--static--/pyams_default_theme/img/dot.png" />
 		</tal:var>
-		<tal:var define="width slot_width['md']">
-			<source media="(min-width: 992px)" sizes="12vw, 25vw, 50vw, 100vw"
-					tal:condition="width"
-					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" />
-			<source media="(min-width: 992px)" sizes="100vw"
-					srcset="/--static--/pyams_default_theme/img/dot.png"
-					tal:condition="not:width" />
+		<tal:var define="sm_width slot_width['sm']">
+			<tal:if condition="sm_width">
+				<source media="(max-width: 991px)"
+						tal:define="width round(992 / 12 * sm_width)"
+						srcset="${image_url}/++thumb++sm:w${width}?_=${timestamp}" />
+			</tal:if>
+			<source media="(max-width: 991px)"
+					tal:condition="not:sm_width"
+					srcset="/--static--/pyams_default_theme/img/dot.png" />
 		</tal:var>
-		<tal:var define="width slot_width['sm']">
-			<source media="(min-width: 768px)" sizes="12vw, 25vw, 50vw, 100vw"
-					tal:condition="width"
-					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" />
-			<source media="(min-width: 768px)" sizes="100vw"
-					srcset="/--static--/pyams_default_theme/img/dot.png"
-					tal:condition="not:width" />
+		<tal:var define="md_width slot_width['md']">
+			<tal:if condition="md_width">
+				<source media="(max-width: 1199px)"
+						tal:define="width round(1200 / 12 * md_width)"
+						srcset="${image_url}/++thumb++md:w${width}?_=${timestamp}" />
+			</tal:if>
+			<source media="(max-width: 1199px)"
+					tal:condition="not:md_width"
+					srcset="/--static--/pyams_default_theme/img/dot.png" />
 		</tal:var>
-		<tal:var define="width slot_width['xs']">
-			<source media="(max-width: 767px)" sizes="12vw, 25vw, 50vw, 100vw"
-					tal:condition="width"
-					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: 767px)" sizes="100vw"
-					srcset="/--static--/pyams_default_theme/img/dot.png"
-					tal:condition="not:width" />
+		<tal:var define="lg_width slot_width['lg']">
+			<tal:if condition="lg_width">
+				<source media="(min-width: 1200px)"
+						tal:define="width round(1600 / 12 * lg_width)"
+						srcset="${image_url}/++thumb++lg:w${width}?_=${timestamp}" />
+			</tal:if>
+			<source media="(min-width: 1200px)"
+					tal:condition="not:lg_width"
+					srcset="/--static--/pyams_default_theme/img/dot.png" />
 		</tal:var>
 		<img style="width: 100%;"
 			 tal:attributes="src image_url" />
diff -r a6e1d18bde08 -r 4e558fd70749 src/pyams_portal/portlets/image/zmi/preview.pt
--- a/src/pyams_portal/portlets/image/zmi/preview.pt	Tue Oct 09 16:22:16 2018 +0200
+++ b/src/pyams_portal/portlets/image/zmi/preview.pt	Mon Oct 15 12:14:33 2018 +0200
@@ -6,55 +6,50 @@
 					   image_url tales:absolute_url(image);
 					   slot_config view.slot_configuration;
 					   slot_width slot_config.get_width();
-					   base_width 100 / 12;
 					   thumbnails tales:thumbnails(image);
 					   target python:thumbnails.get_thumbnail('800x600');
 					   timestamp tales:timestamp(image);"
 		   tal:attributes="href tales:absolute_url(target)">
 			<picture>
-				<tal:var define="width slot_width['lg']">
-					<source media="(min-width: 1200px)" sizes="12vw, 25vw, 50vw, 100vw"
-							tal:condition="width"
-							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" />
-					<source media="(min-width: 1200px)" sizes="100vw"
-							srcset="/--static--/pyams_default_theme/img/dot.png"
-							tal:condition="not:width" />
+				<tal:var define="xs_width slot_width['xs']">
+					<tal:if condition="xs_width">
+						<source media="(max-width: 767px)"
+								tal:define="width round(768 / 12 * xs_width)"
+								srcset="${image_url}/++thumb++xs:w${width}?_=${timestamp}" />
+					</tal:if>
+					<source media="(max-width: 767px)"
+							tal:condition="not:xs_width"
+							srcset="/--static--/pyams_default_theme/img/dot.png" />
 				</tal:var>
-				<tal:var define="width slot_width['md']">
-					<source media="(min-width: 992px)" sizes="12vw, 25vw, 50vw, 100vw"
-							tal:condition="width"
-							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" />
-					<source media="(min-width: 992px)" sizes="100vw"
-							srcset="/--static--/pyams_default_theme/img/dot.png"
-							tal:condition="not:width" />
+				<tal:var define="sm_width slot_width['sm']">
+					<tal:if condition="sm_width">
+						<source media="(max-width: 991px)"
+								tal:define="width round(992 / 12 * sm_width)"
+								srcset="${image_url}/++thumb++sm:w${width}?_=${timestamp}" />
+					</tal:if>
+					<source media="(max-width: 991px)"
+							tal:condition="not:sm_width"
+							srcset="/--static--/pyams_default_theme/img/dot.png" />
 				</tal:var>
-				<tal:var define="width slot_width['sm']">
-					<source media="(min-width: 768px)" sizes="12vw, 25vw, 50vw, 100vw"
-							tal:condition="width"
-							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" />
-					<source media="(min-width: 768px)" sizes="100vw"
-							srcset="/--static--/pyams_default_theme/img/dot.png"
-							tal:condition="not:width" />
+				<tal:var define="md_width slot_width['md']">
+					<tal:if condition="md_width">
+						<source media="(max-width: 1199px)"
+								tal:define="width round(1200 / 12 * md_width)"
+								srcset="${image_url}/++thumb++md:w${width}?_=${timestamp}" />
+					</tal:if>
+					<source media="(max-width: 1199px)"
+							tal:condition="not:md_width"
+							srcset="/--static--/pyams_default_theme/img/dot.png" />
 				</tal:var>
-				<tal:var define="width slot_width['xs']">
-					<source media="(max-width: 767px)" sizes="12vw, 25vw, 50vw, 100vw"
-							tal:condition="width"
-							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: 767px)" sizes="100vw"
-							srcset="/--static--/pyams_default_theme/img/dot.png"
-							tal:condition="not:width" />
+				<tal:var define="lg_width slot_width['lg']">
+					<tal:if condition="lg_width">
+						<source media="(min-width: 1200px)"
+								tal:define="width round(1600 / 12 * lg_width)"
+								srcset="${image_url}/++thumb++lg:w${width}?_=${timestamp}" />
+					</tal:if>
+					<source media="(min-width: 1200px)"
+							tal:condition="not:lg_width"
+							srcset="/--static--/pyams_default_theme/img/dot.png" />
 				</tal:var>
 				<img style="width: 100%;"
 					 tal:attributes="src image_url" />