--- 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)
--- 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">