Mercurial Mercurial > pyams > pyams_content / 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.
Update default renderer to use HTML5 "picture" tag
authorThierry Florac <thierry.florac@onf.fr>
Wed, 13 Sep 2017 15:58:14 +0200
changeset 164 826753ab9e52
parent 163 bd68fac5a89a
child 165 2912fbd45f62
Update default renderer to use HTML5 "picture" tag
src/pyams_content/component/gallery/zmi/templates/renderer-default.pt file | annotate | diff | comparison | revisions
src/pyams_content/component/illustration/zmi/templates/renderer-default.pt file | annotate | diff | comparison | revisions 
--- a/src/pyams_content/component/gallery/zmi/templates/renderer-default.pt	Wed Sep 13 15:57:49 2017 +0200
+++ b/src/pyams_content/component/gallery/zmi/templates/renderer-default.pt	Wed Sep 13 15:58:14 2017 +0200
@@ -0,0 +1,24 @@
+<div i18n:domain="pyams_content">
+	<tal:loop repeat="image context.values()">
+		<picture tal:define="image_data i18n:image.data;
+							 image_url extension: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" />
+		</picture>
+	</tal:loop>
+</div>
--- a/src/pyams_content/component/illustration/zmi/templates/renderer-default.pt	Wed Sep 13 15:57:49 2017 +0200
+++ b/src/pyams_content/component/illustration/zmi/templates/renderer-default.pt	Wed Sep 13 15:58:14 2017 +0200
@@ -1,7 +1,23 @@
 <div class="text-center margin-y-5">
-	<img tal:define="data i18n:context.data;
-					 thumbnails extension:thumbnails(data);
-					 target thumbnails.get_thumbnail('800x600', 'jpeg');"
-		 tal:attributes="src extension:absolute_url(target)" /><br />
+	<picture tal:define="image_data i18n:context.data;
+						 image_url extension: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" />
+	</picture>
 	<span tal:content="view.legend">legend</span>
 </div>
pyams/pyams_content