Small template updates
authorThierry Florac <thierry.florac@onf.fr>
Fri, 12 Oct 2018 08:16:50 +0200
changeset 140 03ed2cdc774b
parent 139 4bfd57a83213
child 141 c678b88b390b
Small template updates
src/pyams_file/templates/picture.pt
--- a/src/pyams_file/templates/picture.pt	Thu Oct 11 14:53:14 2018 +0200
+++ b/src/pyams_file/templates/picture.pt	Fri Oct 12 08:16:50 2018 +0200
@@ -1,9 +1,9 @@
 <picture
+	class="${css_class}"
 	tal:define="image_url tales:absolute_url(image);
-				timestamp tales:timestamp(image);"
-	tal:attributes="class css_class">
-	<!-- xs source -->
+				timestamp tales:timestamp(image);">
 	<tal:if condition="xs_width">
+		<!-- xs source -->
 		<source media="(max-width: 767px)"
 				tal:define="width round(768 / 12 * xs_width)"
 				srcset="${image_url}/++thumb++${xs_thumb}:w${width}?_=${timestamp}" />
@@ -11,8 +11,8 @@
 	<source media="(max-width: 767px)"
 			tal:condition="not:xs_width"
 			srcset="/--static--/pyams_skin/img/dot.png" />
-	<!-- sm source -->
 	<tal:if condition="sm_width">
+		<!-- sm source -->
 		<source media="(max-width: 991px)"
 				tal:define="width round(992 / 12 * sm_width)"
 				srcset="${image_url}/++thumb++${sm_thumb}:w${width}?_=${timestamp}" />
@@ -20,8 +20,8 @@
 	<source media="(max-width: 991px)"
 			tal:condition="not:sm_width"
 			srcset="/--static--/pyams_skin/img/dot.png" />
-	<!-- md source -->
 	<tal:if condition="md_width">
+		<!-- md source -->
 		<source media="(max-width: 1199px)"
 				tal:define="width round(1200 / 12 * md_width)"
 				srcset="${image_url}/++thumb++${md_thumb}:w${width}?_=${timestamp}" />
@@ -29,8 +29,8 @@
 	<source media="(max-width: 1199px)"
 			tal:condition="not:md_width"
 			srcset="/--static--/pyams_skin/img/dot.png" />
-	<!-- lg source -->
 	<tal:if condition="lg_width">
+		<!-- lg source -->
 		<source media="(min-width: 1200px)"
 				tal:define="width round(1600 / 12 * lg_width)"
 				srcset="${image_url}/++thumb++${lg_thumb}:w${width}?_=${timestamp}" />
@@ -40,5 +40,5 @@
 			srcset="/--static--/pyams_skin/img/dot.png" />
 	<!-- fallback image -->
 	<img style="width: 100%;"
-		 tal:attributes="alt alt; src image_url" />
+		 alt="${alt}" src="${image_url}?_=${timestamp}" />
 </picture>