Mercurial Mercurial > pyams > pyams_file / 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 11:05:02 +0200
changeset 127 57ef05b46604
parent 126 96984cb08552
child 128 2965f72df55b
Updated picture template
src/pyams_file/templates/picture.pt file | annotate | diff | comparison | revisions 
--- a/src/pyams_file/templates/picture.pt	Mon Aug 27 11:04:44 2018 +0200
+++ b/src/pyams_file/templates/picture.pt	Mon Aug 27 11:05:02 2018 +0200
@@ -4,46 +4,43 @@
 				base_width 100 / 12;"
 	tal:attributes="class css_class">
 	<!-- lg source -->
-	<source media="(min-width: 1200px)"
+	<source media="(min-width: 1200px)" sizes="12vw, 25vw, 50vw, 100vw"
 			tal:condition="lg_width"
-			tal:attributes="srcset string:${image_url}/++thumb++${lg_thumb}:w1200?_=${timestamp} 1200w,
+			tal:attributes="srcset string:${image_url}/++thumb++${lg_thumb}:w128?_=${timestamp} 128w,
+										  ${image_url}/++thumb++${lg_thumb}:w256?_=${timestamp} 256w,
 										  ${image_url}/++thumb++${lg_thumb}:w512?_=${timestamp} 512w,
-										  ${image_url}/++thumb++${lg_thumb}:w256?_=${timestamp} 256w,
-										  ${image_url}/++thumb++${lg_thumb}:w128?_=${timestamp} 128w;
-							sizes string:${round(base_width * lg_width)}vw" />
+										  ${image_url}/++thumb++${lg_thumb}:w1200?_=${timestamp} 1200w" />
 	<source media="(min-width: 1200px)"
 			srcset="/--static--/pyams_skin/img/dot.png" sizes="100vw"
 			tal:condition="not:lg_width" />
 	<!-- md source -->
-	<source media="(min-width: 992px)"
+	<source media="(min-width: 992px)" sizes="12vw, 25vw, 50vw, 100vw"
 			tal:condition="md_width"
-			tal:attributes="srcset string:${image_url}/++thumb++${md_thumb}:w992?_=${timestamp} 992w,
+			tal:attributes="srcset string:${image_url}/++thumb++${md_thumb}:w128?_=${timestamp} 128w,
+										  ${image_url}/++thumb++${md_thumb}:w256?_=${timestamp} 256w,
 										  ${image_url}/++thumb++${md_thumb}:w512?_=${timestamp} 512w,
-										  ${image_url}/++thumb++${md_thumb}:w256?_=${timestamp} 256w,
-										  ${image_url}/++thumb++${md_thumb}:w128?_=${timestamp} 128w;
-							sizes string:${round(base_width * md_width)}vw" />
+										  ${image_url}/++thumb++${md_thumb}:w992?_=${timestamp} 992w" />
 	<source media="(min-width: 992px)"
 			srcset="/--static--/pyams_skin/img/dot.png" sizes="100vw"
 			tal:condition="not:md_width" />
 	<!-- sm source -->
-	<source media="(min-width: 768px)"
+	<source media="(min-width: 768px)" sizes="12vw, 25vw, 50vw, 100vw"
 			tal:condition="sm_width"
-			tal:attributes="srcset string:${image_url}/++thumb++${sm_thumb}:w768?_=${timestamp} 768w,
+			tal:attributes="srcset string:${image_url}/++thumb++${sm_thumb}:w128?_=${timestamp} 128w,
+										  ${image_url}/++thumb++${sm_thumb}:w256?_=${timestamp} 256w,
 										  ${image_url}/++thumb++${sm_thumb}:w512?_=${timestamp} 512w,
-										  ${image_url}/++thumb++${sm_thumb}:w256?_=${timestamp} 256w,
-										  ${image_url}/++thumb++${sm_thumb}:w128?_=${timestamp} 128w;
-							sizes string:${round(base_width * sm_width)}vw" />
+										  ${image_url}/++thumb++${sm_thumb}:w768?_=${timestamp} 768w,
+										  " />
 	<source media="(min-width: 768px)"
 			srcset="/--static--/pyams_skin/img/dot.png" sizes="100vw"
 			tal:condition="not:sm_width" />
 	<!-- xs source -->
-	<source media="(max-width: 767px)"
+	<source media="(max-width: 767px)" sizes="12vw, 25vw, 50vw, 100vw"
 			tal:condition="xs_width"
-			tal:attributes="srcset string:${image_url}/++thumb++${xs_thumb}:w768?_=${timestamp} 768w,
+			tal:attributes="srcset string:${image_url}/++thumb++${xs_thumb}:w128?_=${timestamp} 128w,
+										  ${image_url}/++thumb++${xs_thumb}:w256?_=${timestamp} 256w,
 										  ${image_url}/++thumb++${xs_thumb}:w512?_=${timestamp} 512w,
-										  ${image_url}/++thumb++${xs_thumb}:w256?_=${timestamp} 256w,
-										  ${image_url}/++thumb++${xs_thumb}:w128?_=${timestamp} 128w;
-							sizes string:${round(base_width * xs_width)}vw" />
+										  ${image_url}/++thumb++${xs_thumb}:w768?_=${timestamp} 768w" />
 	<source media="(max-width: 767px)"
 			srcset="/--static--/pyams_skin/img/dot.png" sizes="100vw"
 			tal:condition="not:xs_width" />
pyams/pyams_file