# HG changeset patch
# User Thierry Florac <thierry.florac@onf.fr>
# Date 1479201902 -3600
# Node ID 064bf303cc3309e436a96f2129123687fa9d9003
# Parent  c3f7c8290792e7ee6ca32a66a3d80fc36202ea44
Handle responsive images

diff -r c3f7c8290792 -r 064bf303cc33 src/pyams_portal/zmi/portlets/image.py
--- a/src/pyams_portal/zmi/portlets/image.py	Tue Nov 15 10:24:40 2016 +0100
+++ b/src/pyams_portal/zmi/portlets/image.py	Tue Nov 15 10:25:02 2016 +0100
@@ -17,7 +17,7 @@
 
 # import interfaces
 from pyams_pagelet.interfaces import IPagelet
-from pyams_portal.interfaces import IPortletPreviewer
+from pyams_portal.interfaces import IPortletPreviewer, IPortalPage, IPortalTemplate, IPortalTemplateConfiguration
 from pyams_portal.portlets.image.interfaces import IImagePortletSettings
 from pyams_skin.layer import IPyAMSLayer
 from pyams_utils.interfaces import VIEW_SYSTEM_PERMISSION
@@ -45,8 +45,17 @@
     """Image portlet settings editor, AJAX renderer"""
 
 
-@adapter_config(context=(Interface, IPyAMSLayer, Interface, IImagePortletSettings),
-                provides=IPortletPreviewer)
+@adapter_config(context=(Interface, IPyAMSLayer, Interface, IImagePortletSettings), provides=IPortletPreviewer)
 @template_config(template='templates/image-preview.pt', layer=IPyAMSLayer)
 class ImagePortletPreviewer(PortletPreviewer):
     """Image portlet previewer"""
+
+    @property
+    def slot_configuration(self):
+        if IPortalTemplate.providedBy(self.context):
+            template = self.context
+        else:
+            template = IPortalPage(self.context).template
+        config = IPortalTemplateConfiguration(template)
+        slot_id, slot_name = config.get_portlet_slot(self.settings.configuration.portlet_id)
+        return config.get_slot_configuration(slot_name)
diff -r c3f7c8290792 -r 064bf303cc33 src/pyams_portal/zmi/portlets/templates/image-preview.pt
--- a/src/pyams_portal/zmi/portlets/templates/image-preview.pt	Tue Nov 15 10:24:40 2016 +0100
+++ b/src/pyams_portal/zmi/portlets/templates/image-preview.pt	Tue Nov 15 10:25:02 2016 +0100
@@ -1,15 +1,59 @@
 <tal:var define="settings view.settings">
 	<tal:if condition="settings.visible">
 		<tal:if condition="settings.image">
-			<a class="fancybox margin-left-5" data-toggle
+			<a class="fancybox" data-toggle
 			   data-ams-fancybox-type="image"
 			   tal:define="image settings.image;
+						   image_url extension:absolute_url(image);
+						   slot_config view.slot_configuration;
+						   slot_width slot_config.get_width();
+						   base_width 100 / 12;
 						   thumbnails extension:thumbnails(image);
 						   target python:thumbnails.get_thumbnail('800x600', 'jpeg');"
 			   tal:attributes="href extension:absolute_url(target)">
-				<img class="thumbnail padding-5 margin-5"
-					 tal:define="thumbnail python:thumbnails.get_thumbnail('128x128', 'jpeg')"
-					 tal:attributes="src extension:absolute_url(thumbnail)" src="" alt="" />
+				<picture>
+					<tal:var define="width slot_width['lg']">
+						<source media="(min-width: 1200px)"
+								tal:condition="width"
+								tal:attributes="srcset string:${image_url}/++thumb++lg:w1200 1200w, ${image_url}/++thumb++lg:w512 512w, ${image_url}/++thumb++lg:w256 256w, ${image_url}/++thumb++lg:w128 128w;
+												sizes string:${round(base_width * width)}vw" />
+						<source media="(min-width: 1200px)"
+								srcset="/--static--/pyams_default_theme/img/dot.png"
+								tal:condition="not:width"
+								tal:attributes="sizes string:${round(base_width * width)}vw" />
+					</tal:var>
+					<tal:var define="width slot_width['md']">
+						<source media="(min-width: 992px)"
+								tal:condition="width"
+								tal:attributes="srcset string:${image_url}/++thumb++md:w992 992w, ${image_url}/++thumb++md:w512 512w, ${image_url}/++thumb++md:w256 256w, ${image_url}/++thumb++md:w128 128w;
+												sizes string:${round(base_width * width)}vw" />
+						<source media="(min-width: 992px)"
+								srcset="/--static--/pyams_default_theme/img/dot.png"
+								tal:condition="not:width"
+								tal:attributes="sizes string:${round(base_width * width)}vw" />
+					</tal:var>
+					<tal:var define="width slot_width['sm']">
+						<source media="(min-width: 768px)"
+								tal:condition="width"
+								tal:attributes="srcset string:${image_url}/++thumb++sm:w768 768w, ${image_url}/++thumb++sm:w512 512w, ${image_url}/++thumb++sm:w256 256w, ${image_url}/++thumb++sm:w128 128w;
+												sizes string:${round(base_width * width)}vw" />
+						<source media="(min-width: 768px)"
+								srcset="/--static--/pyams_default_theme/img/dot.png"
+								tal:condition="not:width"
+								tal:attributes="sizes string:${round(base_width * width)}vw" />
+					</tal:var>
+					<tal:var define="width slot_width['xs']">
+						<source media="(max-width: 767px)"
+								tal:condition="width"
+								tal:attributes="srcset string:${image_url}/++thumb++xs:w768 768w, ${image_url}/++thumb++xs:w512 512w, ${image_url}/++thumb++xs:w256 256w, ${image_url}/++thumb++xs:w128 128w;
+												sizes string:${round(base_width * width)}vw" />
+						<source media="(max-width: 767px)"
+								srcset="/--static--/pyams_default_theme/img/dot.png"
+								tal:condition="not:width"
+								tal:attributes="sizes string:${round(base_width * width)}vw" />
+					</tal:var>
+					<img style="width: 100%;" tal:attributes="src image_url" />
+				</picture>
 			</a>
 		</tal:if>
 		<tal:if condition="not settings.image">