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" TALES extension to also handle SVG images
authorThierry Florac <tflorac@ulthar.net>
Wed, 24 Oct 2018 16:29:46 +0200
changeset 148 50da03e1114f
parent 147 015342e304c8
child 149 659c6a416426
Updated "picture" TALES extension to also handle SVG images
src/pyams_file/image.py file | annotate | diff | comparison | revisions
src/pyams_file/templates/picture.pt file | annotate | diff | comparison | revisions
src/pyams_file/templates/svg-picture.pt file | annotate | diff | comparison | revisions 
--- a/src/pyams_file/image.py	Wed Oct 24 09:26:47 2018 +0200
+++ b/src/pyams_file/image.py	Wed Oct 24 16:29:46 2018 +0200
@@ -262,16 +262,27 @@
                sm_thumb='sm', sm_width=12, xs_thumb='xs', xs_width=12, alt='', css_class=''):
         if context is None:
             context = self.context
-        return render('templates/picture.pt',
-                      {'image': context,
-                       'lg_thumb': lg_thumb,
-                       'lg_width': lg_width,
-                       'md_thumb': md_thumb,
-                       'md_width': md_width,
-                       'sm_thumb': sm_thumb,
-                       'sm_width': sm_width,
-                       'xs_thumb': xs_thumb,
-                       'xs_width': xs_width,
-                       'alt': alt,
-                       'css_class': css_class},
-                      request=self.request)
+        if context.content_type.startswith('image/svg'):
+            return render('templates/svg-picture.pt',
+                          {'image': context,
+                           'lg_width': lg_width,
+                           'md_width': md_width,
+                           'sm_width': sm_width,
+                           'xs_width': xs_width,
+                           'alt': alt,
+                           'css_class': css_class},
+                          request=self.request)
+        else:
+            return render('templates/picture.pt',
+                          {'image': context,
+                           'lg_thumb': lg_thumb,
+                           'lg_width': lg_width,
+                           'md_thumb': md_thumb,
+                           'md_width': md_width,
+                           'sm_thumb': sm_thumb,
+                           'sm_width': sm_width,
+                           'xs_thumb': xs_thumb,
+                           'xs_width': xs_width,
+                           'alt': alt,
+                           'css_class': css_class},
+                          request=self.request)
--- a/src/pyams_file/templates/picture.pt	Wed Oct 24 09:26:47 2018 +0200
+++ b/src/pyams_file/templates/picture.pt	Wed Oct 24 16:29:46 2018 +0200
@@ -10,8 +10,8 @@
 							timestamp tales:timestamp(thumb);"
 				srcset="${image_url}/++thumb++${xs_thumb}:w${width}?_=${timestamp}" />
 	</tal:if>
-	<source media="(max-width: 767px)"
-			tal:condition="not:xs_width"
+	<source tal:condition="not:xs_width"
+			media="(max-width: 767px)"
 			srcset="/--static--/pyams_skin/img/dot.png" />
 	<tal:if condition="sm_width">
 		<!-- sm source -->
@@ -21,8 +21,8 @@
 							timestamp tales:timestamp(thumb);"
 				srcset="${image_url}/++thumb++${sm_thumb}:w${width}?_=${timestamp}" />
 	</tal:if>
-	<source media="(max-width: 991px)"
-			tal:condition="not:sm_width"
+	<source tal:condition="not:sm_width"
+			media="(max-width: 991px)"
 			srcset="/--static--/pyams_skin/img/dot.png" />
 	<tal:if condition="md_width">
 		<!-- md source -->
@@ -32,8 +32,8 @@
 							timestamp tales:timestamp(thumb);"
 				srcset="${image_url}/++thumb++${md_thumb}:w${width}?_=${timestamp}" />
 	</tal:if>
-	<source media="(max-width: 1199px)"
-			tal:condition="not:md_width"
+	<source tal:condition="not:md_width"
+			media="(max-width: 1199px)"
 			srcset="/--static--/pyams_skin/img/dot.png" />
 	<tal:if condition="lg_width">
 		<!-- lg source -->
@@ -43,8 +43,8 @@
 							timestamp tales:timestamp(thumb);"
 				srcset="${image_url}/++thumb++${lg_thumb}:w${width}?_=${timestamp}" />
 	</tal:if>
-	<source media="(min-width: 1200px)"
-			tal:condition="not:lg_width"
+	<source tal:condition="not:lg_width"
+			media="(min-width: 1200px)"
 			srcset="/--static--/pyams_skin/img/dot.png" />
 	<!-- fallback image -->
 	<img style="width: 100%;"
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/pyams_file/templates/svg-picture.pt	Wed Oct 24 16:29:46 2018 +0200
@@ -0,0 +1,20 @@
+<picture
+	class="${css_class}"
+	tal:define="image_url tales:absolute_url(image);">
+	<source tal:condition="not:xs_width"
+			media="(max-width: 767px)"
+			srcset="/--static--/pyams_skin/img/dot.png" />
+	<source tal:condition="not:sm_width"
+			media="(max-width: 991px)"
+			srcset="/--static--/pyams_skin/img/dot.png" />
+	<source tal:condition="not:md_width"
+			media="(max-width: 1199px)"
+			srcset="/--static--/pyams_skin/img/dot.png" />
+	<source tal:condition="not:lg_width"
+			media="(min-width: 1200px)"
+			srcset="/--static--/pyams_skin/img/dot.png" />
+	<!-- fallback image -->
+	<img style="width: 100%;"
+		 tal:define="timestamp tales:timestamp(image)"
+		 alt="${alt}" src="${image_url}?_=${timestamp}" />
+</picture>
pyams/pyams_file