--- a/src/pyams_file/image.py Fri Nov 30 14:40:23 2018 +0100
+++ b/src/pyams_file/image.py Thu Dec 20 09:59:19 2018 +0100
@@ -16,13 +16,11 @@
from io import BytesIO
from PIL import Image, ImageFilter
-from pyramid.renderers import render
-from zope.interface import Interface, implementer
+from zope.interface import implementer
from zope.schema.fieldproperty import FieldProperty
from pyams_file.interfaces import IImage, IResponsiveImage, IThumbnailGeometry, IThumbnailer, IThumbnails
-from pyams_utils.adapter import ContextAdapter, ContextRequestViewAdapter, adapter_config
-from pyams_utils.interfaces.tales import ITALESExtension
+from pyams_utils.adapter import ContextAdapter, adapter_config
from pyams_file import _
@@ -252,47 +250,3 @@
label = _("Large screen thumbnail")
weight = 13
-
-
-#
-# Responsive 'picture' TALES extension
-#
-
-@adapter_config(name='picture',
- context=(Interface, Interface, Interface),
- provides=ITALESExtension)
-class PictureTALESExtension(ContextRequestViewAdapter):
- """Picture TALES adapter
-
- This TALES adapter can be used to automatically create a 'picture' HTML tag
- embedding all image attributes.
- """
-
- 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=''):
- if context is None:
- context = self.context
- 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)
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/pyams_file/skin/__init__.py Thu Dec 20 09:59:19 2018 +0100
@@ -0,0 +1,63 @@
+#
+# Copyright (c) 2008-2018 Thierry Florac <tflorac AT ulthar.net>
+# All Rights Reserved.
+#
+# This software is subject to the provisions of the Zope Public License,
+# Version 2.1 (ZPL). A copy of the ZPL should accompany this distribution.
+# THIS SOFTWARE IS PROVIDED "AS IS" AND ANY AND ALL EXPRESS OR IMPLIED
+# WARRANTIES ARE DISCLAIMED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+# WARRANTIES OF TITLE, MERCHANTABILITY, AGAINST INFRINGEMENT, AND FITNESS
+# FOR A PARTICULAR PURPOSE.
+#
+
+__docformat__ = 'restructuredtext'
+
+from pyramid.renderers import render
+from zope.interface import Interface
+
+from pyams_utils.adapter import ContextRequestViewAdapter, adapter_config
+from pyams_utils.interfaces.tales import ITALESExtension
+
+
+#
+# Responsive 'picture' TALES extension
+#
+
+@adapter_config(name='picture',
+ context=(Interface, Interface, Interface),
+ provides=ITALESExtension)
+class PictureTALESExtension(ContextRequestViewAdapter):
+ """Picture TALES adapter
+
+ This TALES adapter can be used to automatically create a 'picture' HTML tag
+ embedding all image attributes.
+ """
+
+ 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=''):
+ if context is None:
+ context = self.context
+ 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)
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/pyams_file/skin/templates/picture.pt Thu Dec 20 09:59:19 2018 +0100
@@ -0,0 +1,51 @@
+<picture tal:define="image_url tales:absolute_url(image);
+ thumbnails tales:thumbnails(image);">
+ <tal:if condition="xs_width">
+ <!-- xs source -->
+ <source media="(max-width: 767px)"
+ tal:define="width str(round(768 / 12 * xs_width));
+ thumb thumbnails.get_thumbnail(xs_thumb + ':w' + width);
+ timestamp tales:timestamp(thumb);"
+ srcset="${image_url}/++thumb++${xs_thumb}:w${width}?_=${timestamp}" />
+ </tal:if>
+ <source tal:condition="not:xs_width"
+ media="(max-width: 767px)"
+ srcset="/--static--/pyams_skin/img/dot.png" />
+ <tal:if condition="sm_width">
+ <!-- sm source -->
+ <source media="(max-width: 991px)"
+ tal:define="width str(round(992 / 12 * sm_width));
+ thumb thumbnails.get_thumbnail(sm_thumb + ':w' + width);
+ timestamp tales:timestamp(thumb);"
+ srcset="${image_url}/++thumb++${sm_thumb}:w${width}?_=${timestamp}" />
+ </tal:if>
+ <source tal:condition="not:sm_width"
+ media="(max-width: 991px)"
+ srcset="/--static--/pyams_skin/img/dot.png" />
+ <tal:if condition="md_width">
+ <!-- md source -->
+ <source media="(max-width: 1199px)"
+ tal:define="width str(round(1200 / 12 * md_width));
+ thumb thumbnails.get_thumbnail(md_thumb + ':w' + width);
+ timestamp tales:timestamp(thumb);"
+ srcset="${image_url}/++thumb++${md_thumb}:w${width}?_=${timestamp}" />
+ </tal:if>
+ <source tal:condition="not:md_width"
+ media="(max-width: 1199px)"
+ srcset="/--static--/pyams_skin/img/dot.png" />
+ <tal:if condition="lg_width">
+ <!-- lg source -->
+ <source media="(min-width: 1200px)"
+ tal:define="width str(round(1600 / 12 * lg_width));
+ thumb thumbnails.get_thumbnail(lg_thumb + ':w' + width);
+ timestamp tales:timestamp(thumb);"
+ srcset="${image_url}/++thumb++${lg_thumb}:w${width}?_=${timestamp}" />
+ </tal:if>
+ <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}" />
+</picture>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/pyams_file/skin/templates/svg-picture.pt Thu Dec 20 09:59:19 2018 +0100
@@ -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>
--- a/src/pyams_file/templates/picture.pt Fri Nov 30 14:40:23 2018 +0100
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,51 +0,0 @@
-<picture tal:define="image_url tales:absolute_url(image);
- thumbnails tales:thumbnails(image);">
- <tal:if condition="xs_width">
- <!-- xs source -->
- <source media="(max-width: 767px)"
- tal:define="width str(round(768 / 12 * xs_width));
- thumb thumbnails.get_thumbnail(xs_thumb + ':w' + width);
- timestamp tales:timestamp(thumb);"
- srcset="${image_url}/++thumb++${xs_thumb}:w${width}?_=${timestamp}" />
- </tal:if>
- <source tal:condition="not:xs_width"
- media="(max-width: 767px)"
- srcset="/--static--/pyams_skin/img/dot.png" />
- <tal:if condition="sm_width">
- <!-- sm source -->
- <source media="(max-width: 991px)"
- tal:define="width str(round(992 / 12 * sm_width));
- thumb thumbnails.get_thumbnail(sm_thumb + ':w' + width);
- timestamp tales:timestamp(thumb);"
- srcset="${image_url}/++thumb++${sm_thumb}:w${width}?_=${timestamp}" />
- </tal:if>
- <source tal:condition="not:sm_width"
- media="(max-width: 991px)"
- srcset="/--static--/pyams_skin/img/dot.png" />
- <tal:if condition="md_width">
- <!-- md source -->
- <source media="(max-width: 1199px)"
- tal:define="width str(round(1200 / 12 * md_width));
- thumb thumbnails.get_thumbnail(md_thumb + ':w' + width);
- timestamp tales:timestamp(thumb);"
- srcset="${image_url}/++thumb++${md_thumb}:w${width}?_=${timestamp}" />
- </tal:if>
- <source tal:condition="not:md_width"
- media="(max-width: 1199px)"
- srcset="/--static--/pyams_skin/img/dot.png" />
- <tal:if condition="lg_width">
- <!-- lg source -->
- <source media="(min-width: 1200px)"
- tal:define="width str(round(1600 / 12 * lg_width));
- thumb thumbnails.get_thumbnail(lg_thumb + ':w' + width);
- timestamp tales:timestamp(thumb);"
- srcset="${image_url}/++thumb++${lg_thumb}:w${width}?_=${timestamp}" />
- </tal:if>
- <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}" />
-</picture>
--- a/src/pyams_file/templates/svg-picture.pt Fri Nov 30 14:40:23 2018 +0100
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,20 +0,0 @@
-<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>