Updated "picture" TALES extension to add default selection and width for old browsers
authorThierry Florac <tflorac@ulthar.net>
Wed, 16 Jan 2019 13:50:29 +0100
changeset 167 4760ae4610ac
parent 166 1201c71533c5
child 168 34c8dd07fa88
Updated "picture" TALES extension to add default selection and width for old browsers
src/pyams_file/skin/__init__.py
src/pyams_file/skin/templates/picture.pt
--- a/src/pyams_file/skin/__init__.py	Fri Dec 28 10:56:13 2018 +0100
+++ b/src/pyams_file/skin/__init__.py	Wed Jan 16 13:50:29 2019 +0100
@@ -34,7 +34,8 @@
     """
 
     def render(self, context=None, lg_thumb='lg', lg_width=12, md_thumb='md', md_width=12,
-               sm_thumb='sm', sm_width=12, xs_thumb='xs', xs_width=12, alt='', css_class=''):
+               sm_thumb='sm', sm_width=12, xs_thumb='xs', xs_width=12,
+               def_thumb=None, def_width=None, alt='', css_class=''):
         if context is None:
             context = self.context
         if context.content_type.startswith('image/svg'):
@@ -48,6 +49,10 @@
                            'css_class': css_class},
                           request=self.request)
         else:
+            if def_thumb is None:
+                def_thumb = md_thumb or lg_thumb or sm_thumb or xs_thumb
+            if def_width is None:
+                def_width = md_width or lg_width or sm_width or xs_width
             return render('templates/picture.pt',
                           {'image': context,
                            'lg_thumb': lg_thumb,
@@ -58,6 +63,8 @@
                            'sm_width': sm_width,
                            'xs_thumb': xs_thumb,
                            'xs_width': xs_width,
+                           'def_thumb': def_thumb,
+                           'def_width': def_width,
                            'alt': alt,
                            'css_class': css_class},
                           request=self.request)
\ No newline at end of file
--- a/src/pyams_file/skin/templates/picture.pt	Fri Dec 28 10:56:13 2018 +0100
+++ b/src/pyams_file/skin/templates/picture.pt	Wed Jan 16 13:50:29 2019 +0100
@@ -44,8 +44,12 @@
 	<source tal:condition="not:lg_width"
 			media="(min-width: 1200px)"
 			srcset="/--static--/pyams_skin/img/dot.png" />
-	<!-- fallback image -->
-	<img style="width: 100%;" class="${css_class}"
-		 tal:define="timestamp tales:timestamp(image)"
-		 alt="${alt}" src="${image_url}?_=${timestamp}" />
+	<tal:if condition="def_width">
+		<!-- fallback image -->
+		<img style="width: 100%;" class="${css_class}"
+			 tal:define="width str(round(1200 / 12 * def_width));
+						 thumb thumbnails.get_thumbnail(def_thumb + ':w' + width);
+						 timestamp tales:timestamp(thumb);"
+			 alt="${alt}" src="${image_url}/++thumb++${def_thumb}:w${width}?_=${timestamp}" />
+	</tal:if>
 </picture>