Mercurial Mercurial > pyams > pyams_portal / 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 picture template
authorThierry Florac <thierry.florac@onf.fr>
Mon, 27 Aug 2018 18:00:14 +0200
changeset 162 90f3c2bc80a7
parent 161 62497110caec
child 163 9e12eb044abf
Updated picture template
src/pyams_portal/portlets/image/skin/image.pt file | annotate | diff | comparison | revisions
src/pyams_portal/portlets/image/zmi/preview.pt file | annotate | diff | comparison | revisions 
--- a/src/pyams_portal/portlets/image/skin/image.pt	Mon Aug 27 17:59:49 2018 +0200
+++ b/src/pyams_portal/portlets/image/skin/image.pt	Mon Aug 27 18:00:14 2018 +0200
@@ -7,45 +7,50 @@
 					base_width 100 / 12;
 					timestamp tales:timestamp(image);">
 		<tal:var define="width slot_width['lg']">
-			<source media="(min-width: 1200px)"
+			<source media="(min-width: 1200px)" sizes="12vw, 25vw, 50vw, 100vw"
 					tal:condition="width"
-					tal:attributes="srcset string:${image_url}/++thumb++lg:w1200?_=${timestamp} 1200w, ${image_url}/++thumb++lg:w512?_=${timestamp} 512w, ${image_url}/++thumb++lg:w256?_=${timestamp} 256w, ${image_url}/++thumb++lg:w128?_=${timestamp} 128w;
-									sizes string:${round(base_width * width)}vw" />
-			<source media="(min-width: 1200px)"
+					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:attributes="sizes string:${round(base_width * width)}vw" />
+					tal:condition="not:width" />
 		</tal:var>
 		<tal:var define="width slot_width['md']">
-			<source media="(min-width: 992px)"
+			<source media="(min-width: 992px)" sizes="12vw, 25vw, 50vw, 100vw"
 					tal:condition="width"
-					tal:attributes="srcset string:${image_url}/++thumb++md:w992?_=${timestamp} 992w, ${image_url}/++thumb++md:w512?_=${timestamp} 512w, ${image_url}/++thumb++md:w256?_=${timestamp} 256w, ${image_url}/++thumb++md:w128?_=${timestamp} 128w;
-									sizes string:${round(base_width * width)}vw" />
-			<source media="(min-width: 992px)"
+					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:attributes="sizes string:${round(base_width * width)}vw" />
+					tal:condition="not:width" />
 		</tal:var>
 		<tal:var define="width slot_width['sm']">
-			<source media="(min-width: 768px)"
+			<source media="(min-width: 768px)" sizes="12vw, 25vw, 50vw, 100vw"
 					tal:condition="width"
-					tal:attributes="srcset string:${image_url}/++thumb++sm:w768?_=${timestamp} 768w, ${image_url}/++thumb++sm:w512?_=${timestamp} 512w, ${image_url}/++thumb++sm:w256?_=${timestamp} 256w, ${image_url}/++thumb++sm:w128?_=${timestamp} 128w;
-									sizes string:${round(base_width * width)}vw" />
-			<source media="(min-width: 768px)"
+					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:attributes="sizes string:${round(base_width * width)}vw" />
+					tal:condition="not:width" />
 		</tal:var>
 		<tal:var define="width slot_width['xs']">
-			<source media="(max-width: 767px)"
+			<source media="(max-width: 767px)" sizes="12vw, 25vw, 50vw, 100vw"
 					tal:condition="width"
-					tal:attributes="srcset string:${image_url}/++thumb++xs:w768?_=${timestamp} 768w, ${image_url}/++thumb++xs:w512?_=${timestamp} 512w, ${image_url}/++thumb++xs:w256?_=${timestamp} 256w, ${image_url}/++thumb++xs:w128?_=${timestamp} 128w;
-									sizes string:${round(base_width * width)}vw" />
-			<source media="(max-width: 767px)"
+					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:attributes="sizes string:${round(base_width * width)}vw" />
+					tal:condition="not:width" />
 		</tal:var>
-		<img style="width: 100%;" tal:attributes="src image_url" />
+		<img style="width: 100%;"
+			 tal:attributes="src image_url" />
 	</picture>
 </tal:if>
--- a/src/pyams_portal/portlets/image/zmi/preview.pt	Mon Aug 27 17:59:49 2018 +0200
+++ b/src/pyams_portal/portlets/image/zmi/preview.pt	Mon Aug 27 18:00:14 2018 +0200
@@ -13,46 +13,51 @@
 		   tal:attributes="href tales:absolute_url(target)">
 			<picture>
 				<tal:var define="width slot_width['lg']">
-					<source media="(min-width: 1200px)"
+					<source media="(min-width: 1200px)" sizes="12vw, 25vw, 50vw, 100vw"
 							tal:condition="width"
-							tal:attributes="srcset string:${image_url}/++thumb++lg:w1200?_=${timestamp} 1200w, ${image_url}/++thumb++lg:w512?_=${timestamp} 512w, ${image_url}/++thumb++lg:w256?_=${timestamp} 256w, ${image_url}/++thumb++lg:w128?_=${timestamp} 128w;
-											sizes string:${round(base_width * width)}vw" />
-					<source media="(min-width: 1200px)"
+							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:attributes="sizes string:${round(base_width * width)}vw" />
+							tal:condition="not:width" />
 				</tal:var>
 				<tal:var define="width slot_width['md']">
-					<source media="(min-width: 992px)"
+					<source media="(min-width: 992px)" sizes="12vw, 25vw, 50vw, 100vw"
 							tal:condition="width"
-							tal:attributes="srcset string:${image_url}/++thumb++md:w992?_=${timestamp} 992w, ${image_url}/++thumb++md:w512?_=${timestamp} 512w, ${image_url}/++thumb++md:w256?_=${timestamp} 256w, ${image_url}/++thumb++md:w128?_=${timestamp} 128w;
-											sizes string:${round(base_width * width)}vw" />
-					<source media="(min-width: 992px)"
+							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:attributes="sizes string:${round(base_width * width)}vw" />
+							tal:condition="not:width" />
 				</tal:var>
 				<tal:var define="width slot_width['sm']">
-					<source media="(min-width: 768px)"
+					<source media="(min-width: 768px)" sizes="12vw, 25vw, 50vw, 100vw"
 							tal:condition="width"
-							tal:attributes="srcset string:${image_url}/++thumb++sm:w768?_=${timestamp} 768w, ${image_url}/++thumb++sm:w512?_=${timestamp} 512w, ${image_url}/++thumb++sm:w256?_=${timestamp} 256w, ${image_url}/++thumb++sm:w128?_=${timestamp} 128w;
-											sizes string:${round(base_width * width)}vw" />
-					<source media="(min-width: 768px)"
+							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:attributes="sizes string:${round(base_width * width)}vw" />
+							tal:condition="not:width" />
 				</tal:var>
 				<tal:var define="width slot_width['xs']">
-					<source media="(max-width: 767px)"
+					<source media="(max-width: 767px)" sizes="12vw, 25vw, 50vw, 100vw"
 							tal:condition="width"
-							tal:attributes="srcset string:${image_url}/++thumb++xs:w768?_=${timestamp} 768w, ${image_url}/++thumb++xs:w512?_=${timestamp} 512w, ${image_url}/++thumb++xs:w256?_=${timestamp} 256w, ${image_url}/++thumb++xs:w128?_=${timestamp} 128w;
-											sizes string:${round(base_width * width)}vw" />
-					<source media="(max-width: 767px)"
+							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:attributes="sizes string:${round(base_width * width)}vw" />
+							tal:condition="not:width" />
 				</tal:var>
-				<img style="width: 100%;" tal:attributes="src image_url" />
+				<img style="width: 100%;"
+					 tal:attributes="src image_url" />
 			</picture>
 		</a>
 	</tal:if>
pyams/pyams_portal