# HG changeset patch
# User Thierry Florac <thierry.florac@onf.fr>
# Date 1539262305 -7200
# Node ID 610811d72a1006b50684edd47cd9bd7300b223ee
# Parent  77801855486aa4c8d61f982236189b2cc5483ff2
Updated pictures renderers

diff -r 77801855486a -r 610811d72a10 src/pyams_default_theme/component/gallery/templates/renderer-default.pt
--- 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" />
diff -r 77801855486a -r 610811d72a10 src/pyams_default_theme/component/illustration/templates/illustration-default.pt
--- a/src/pyams_default_theme/component/illustration/templates/illustration-default.pt	Wed Oct 10 17:43:32 2018 +0200
+++ b/src/pyams_default_theme/component/illustration/templates/illustration-default.pt	Thu Oct 11 14:51:45 2018 +0200
@@ -1,36 +1,7 @@
 <div class="text-center margin-y-5">
-	<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>
+	<tal:var define="image view.data"
+			 condition="image">
+		${structure:tales:picture(image, alt=view.alt_title)}
+	</tal:var>
 	<span tal:content="view.title">legend</span>
 </div>
diff -r 77801855486a -r 610811d72a10 src/pyams_default_theme/component/illustration/templates/illustration-left.pt
--- a/src/pyams_default_theme/component/illustration/templates/illustration-left.pt	Wed Oct 10 17:43:32 2018 +0200
+++ b/src/pyams_default_theme/component/illustration/templates/illustration-left.pt	Thu Oct 11 14:51:45 2018 +0200
@@ -1,13 +1,15 @@
-<div class="pull-left margin-10" tal:condition="view.data">
+<div class="pull-left col-sm-12 col-md-6 col-lg-5 margin-10"
+	 tal:condition="view.data">
 	<a class="fancybox" data-toggle
 	   data-ams-fancybox-type="image"
 	   tal:omit-tag="not:view.settings.zoom_on_click"
-	   tal:define="thumbnails tales:thumbnails(view.data);
-				   target thumbnails.get_thumbnail('800x600');
-				   thumb thumbnails.get_thumbnail('300x200');"
+	   tal:define="image view.data;
+				   thumbnails tales:thumbnails(image);
+				   target thumbnails.get_thumbnail('800x600');"
 	   tal:attributes="href tales:absolute_url(target)">
-		<img tal:attributes="src tales:absolute_url(thumb);
-							 alt view.alt_title;" /><br />
+		<tal:if condition="image">
+			${structure:tales:picture(image, md_width=6, lg_width=5, alt=view.alt_title)}
+		</tal:if>
 		<span tal:content="view.title">legend</span>
 	</a><br />
 </div>
diff -r 77801855486a -r 610811d72a10 src/pyams_default_theme/component/illustration/templates/illustration-right.pt
--- a/src/pyams_default_theme/component/illustration/templates/illustration-right.pt	Wed Oct 10 17:43:32 2018 +0200
+++ b/src/pyams_default_theme/component/illustration/templates/illustration-right.pt	Thu Oct 11 14:51:45 2018 +0200
@@ -1,13 +1,14 @@
-<div class="pull-right margin-10" tal:condition="view.data">
+<div class="pull-right col-sm-12 col-md-6 col-lg-5 margin-10" tal:condition="view.data">
 	<a class="fancybox" data-toggle
 	   data-ams-fancybox-type="image"
 	   tal:omit-tag="not:view.settings.zoom_on_click"
-	   tal:define="thumbnails tales:thumbnails(view.data);
-				   target thumbnails.get_thumbnail('800x600');
-				   thumb thumbnails.get_thumbnail('300x200');"
+	   tal:define="image view.data;
+				   thumbnails tales:thumbnails(view.data);
+				   target thumbnails.get_thumbnail('800x600');"
 	   tal:attributes="href tales:absolute_url(target)">
-		<img tal:attributes="src tales:absolute_url(thumb);
-							 alt view.alt_title" /><br />
+		<tal:if condition="image">
+			${structure:tales:picture(image, md_width=6, lg_width=5, alt=view.alt_title)}
+		</tal:if>
 		<span tal:content="view.title">legend</span>
 	</a><br />
 </div>