Mercurial Mercurial > pyams > pyams_default_theme / changeset
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | raw | help
Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Updated pictures templates
authorThierry Florac <thierry.florac@onf.fr>
Mon, 27 Aug 2018 11:08:38 +0200
changeset 118 718e48376709
parent 117 d45a531a723d
child 119 d87742a2d404
Updated pictures templates
src/pyams_default_theme/component/gallery/templates/renderer-default.pt file | annotate | diff | comparison | revisions
src/pyams_default_theme/component/illustration/templates/illustration-default.pt file | annotate | diff | comparison | revisions 
--- a/src/pyams_default_theme/component/gallery/templates/renderer-default.pt	Mon Aug 27 11:07:58 2018 +0200
+++ b/src/pyams_default_theme/component/gallery/templates/renderer-default.pt	Mon Aug 27 11:08:38 2018 +0200
@@ -2,23 +2,36 @@
 	<tal:loop repeat="image context.get_visible_medias()">
 		<picture tal:define="image_data i18n:image.data;
 							 image_url tales:absolute_url(image_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:condition="width"
-					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:condition="width"
-					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" />
+							 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:loop>
 </div>
--- 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>
pyams/pyams_default_theme