--- a/src/pyams_portal/portlets/image/skin/image.pt Tue Oct 09 16:22:16 2018 +0200
+++ b/src/pyams_portal/portlets/image/skin/image.pt Mon Oct 15 12:14:33 2018 +0200
@@ -6,49 +6,45 @@
slot_width slot_config.get_width();
base_width 100 / 12;
timestamp tales:timestamp(image);">
- <tal:var define="width slot_width['lg']">
- <source media="(min-width: 1200px)" sizes="12vw, 25vw, 50vw, 100vw"
- tal:condition="width"
- tal:attributes="srcset string:${image_url}/++thumb++lg:w128?_=${timestamp} 128w,
- ${image_url}/++thumb++lg:w256?_=${timestamp} 256w,
- ${image_url}/++thumb++lg:w512?_=${timestamp} 512w,
- ${image_url}/++thumb++lg:w1200?_=${timestamp} 1200w" />
- <source media="(min-width: 1200px)" sizes="100vw"
- srcset="/--static--/pyams_default_theme/img/dot.png"
- tal:condition="not:width" />
+ <tal:var define="xs_width slot_width['xs']">
+ <tal:if condition="xs_width">
+ <source media="(max-width: 767px)"
+ tal:define="width round(768 / 12 * xs_width)"
+ srcset="${image_url}/++thumb++xs:w${width}?_=${timestamp}" />
+ </tal:if>
+ <source media="(max-width: 767px)"
+ tal:condition="not:xs_width"
+ srcset="/--static--/pyams_default_theme/img/dot.png" />
</tal:var>
- <tal:var define="width slot_width['md']">
- <source media="(min-width: 992px)" sizes="12vw, 25vw, 50vw, 100vw"
- tal:condition="width"
- tal:attributes="srcset string:${image_url}/++thumb++md:w128?_=${timestamp} 128w,
- ${image_url}/++thumb++md:w256?_=${timestamp} 256w,
- ${image_url}/++thumb++md:w512?_=${timestamp} 512w,
- ${image_url}/++thumb++md:w992?_=${timestamp} 992w" />
- <source media="(min-width: 992px)" sizes="100vw"
- srcset="/--static--/pyams_default_theme/img/dot.png"
- tal:condition="not:width" />
+ <tal:var define="sm_width slot_width['sm']">
+ <tal:if condition="sm_width">
+ <source media="(max-width: 991px)"
+ tal:define="width round(992 / 12 * sm_width)"
+ srcset="${image_url}/++thumb++sm:w${width}?_=${timestamp}" />
+ </tal:if>
+ <source media="(max-width: 991px)"
+ tal:condition="not:sm_width"
+ srcset="/--static--/pyams_default_theme/img/dot.png" />
</tal:var>
- <tal:var define="width slot_width['sm']">
- <source media="(min-width: 768px)" sizes="12vw, 25vw, 50vw, 100vw"
- tal:condition="width"
- tal:attributes="srcset string:${image_url}/++thumb++sm:w128?_=${timestamp} 128w,
- ${image_url}/++thumb++sm:w256?_=${timestamp} 256w,
- ${image_url}/++thumb++sm:w512?_=${timestamp} 512w,
- ${image_url}/++thumb++sm:w768?_=${timestamp} 768w" />
- <source media="(min-width: 768px)" sizes="100vw"
- srcset="/--static--/pyams_default_theme/img/dot.png"
- tal:condition="not:width" />
+ <tal:var define="md_width slot_width['md']">
+ <tal:if condition="md_width">
+ <source media="(max-width: 1199px)"
+ tal:define="width round(1200 / 12 * md_width)"
+ srcset="${image_url}/++thumb++md:w${width}?_=${timestamp}" />
+ </tal:if>
+ <source media="(max-width: 1199px)"
+ tal:condition="not:md_width"
+ srcset="/--static--/pyams_default_theme/img/dot.png" />
</tal:var>
- <tal:var define="width slot_width['xs']">
- <source media="(max-width: 767px)" sizes="12vw, 25vw, 50vw, 100vw"
- tal:condition="width"
- tal:attributes="srcset string:${image_url}/++thumb++xs:w128?_=${timestamp} 128w,
- ${image_url}/++thumb++xs:w256?_=${timestamp} 256w,
- ${image_url}/++thumb++xs:w512?_=${timestamp} 512w,
- ${image_url}/++thumb++xs:w768?_=${timestamp} 768w" />
- <source media="(max-width: 767px)" sizes="100vw"
- srcset="/--static--/pyams_default_theme/img/dot.png"
- tal:condition="not:width" />
+ <tal:var define="lg_width slot_width['lg']">
+ <tal:if condition="lg_width">
+ <source media="(min-width: 1200px)"
+ tal:define="width round(1600 / 12 * lg_width)"
+ srcset="${image_url}/++thumb++lg:w${width}?_=${timestamp}" />
+ </tal:if>
+ <source media="(min-width: 1200px)"
+ tal:condition="not:lg_width"
+ srcset="/--static--/pyams_default_theme/img/dot.png" />
</tal:var>
<img style="width: 100%;"
tal:attributes="src image_url" />
--- a/src/pyams_portal/portlets/image/zmi/preview.pt Tue Oct 09 16:22:16 2018 +0200
+++ b/src/pyams_portal/portlets/image/zmi/preview.pt Mon Oct 15 12:14:33 2018 +0200
@@ -6,55 +6,50 @@
image_url tales:absolute_url(image);
slot_config view.slot_configuration;
slot_width slot_config.get_width();
- base_width 100 / 12;
thumbnails tales:thumbnails(image);
target python:thumbnails.get_thumbnail('800x600');
timestamp tales:timestamp(image);"
tal:attributes="href tales:absolute_url(target)">
<picture>
- <tal:var define="width slot_width['lg']">
- <source media="(min-width: 1200px)" sizes="12vw, 25vw, 50vw, 100vw"
- tal:condition="width"
- tal:attributes="srcset string:${image_url}/++thumb++lg:w128?_=${timestamp} 128w,
- ${image_url}/++thumb++lg:w256?_=${timestamp} 256w,
- ${image_url}/++thumb++lg:w512?_=${timestamp} 512w,
- ${image_url}/++thumb++lg:w1200?_=${timestamp} 1200w" />
- <source media="(min-width: 1200px)" sizes="100vw"
- srcset="/--static--/pyams_default_theme/img/dot.png"
- tal:condition="not:width" />
+ <tal:var define="xs_width slot_width['xs']">
+ <tal:if condition="xs_width">
+ <source media="(max-width: 767px)"
+ tal:define="width round(768 / 12 * xs_width)"
+ srcset="${image_url}/++thumb++xs:w${width}?_=${timestamp}" />
+ </tal:if>
+ <source media="(max-width: 767px)"
+ tal:condition="not:xs_width"
+ srcset="/--static--/pyams_default_theme/img/dot.png" />
</tal:var>
- <tal:var define="width slot_width['md']">
- <source media="(min-width: 992px)" sizes="12vw, 25vw, 50vw, 100vw"
- tal:condition="width"
- tal:attributes="srcset string:${image_url}/++thumb++md:w128?_=${timestamp} 128w,
- ${image_url}/++thumb++md:w256?_=${timestamp} 256w,
- ${image_url}/++thumb++md:w512?_=${timestamp} 512w,
- ${image_url}/++thumb++md:w992?_=${timestamp} 992w" />
- <source media="(min-width: 992px)" sizes="100vw"
- srcset="/--static--/pyams_default_theme/img/dot.png"
- tal:condition="not:width" />
+ <tal:var define="sm_width slot_width['sm']">
+ <tal:if condition="sm_width">
+ <source media="(max-width: 991px)"
+ tal:define="width round(992 / 12 * sm_width)"
+ srcset="${image_url}/++thumb++sm:w${width}?_=${timestamp}" />
+ </tal:if>
+ <source media="(max-width: 991px)"
+ tal:condition="not:sm_width"
+ srcset="/--static--/pyams_default_theme/img/dot.png" />
</tal:var>
- <tal:var define="width slot_width['sm']">
- <source media="(min-width: 768px)" sizes="12vw, 25vw, 50vw, 100vw"
- tal:condition="width"
- tal:attributes="srcset string:${image_url}/++thumb++sm:w128?_=${timestamp} 128w,
- ${image_url}/++thumb++sm:w256?_=${timestamp} 256w,
- ${image_url}/++thumb++sm:w512?_=${timestamp} 512w,
- ${image_url}/++thumb++sm:w768?_=${timestamp} 768w" />
- <source media="(min-width: 768px)" sizes="100vw"
- srcset="/--static--/pyams_default_theme/img/dot.png"
- tal:condition="not:width" />
+ <tal:var define="md_width slot_width['md']">
+ <tal:if condition="md_width">
+ <source media="(max-width: 1199px)"
+ tal:define="width round(1200 / 12 * md_width)"
+ srcset="${image_url}/++thumb++md:w${width}?_=${timestamp}" />
+ </tal:if>
+ <source media="(max-width: 1199px)"
+ tal:condition="not:md_width"
+ srcset="/--static--/pyams_default_theme/img/dot.png" />
</tal:var>
- <tal:var define="width slot_width['xs']">
- <source media="(max-width: 767px)" sizes="12vw, 25vw, 50vw, 100vw"
- tal:condition="width"
- tal:attributes="srcset string:${image_url}/++thumb++xs:w128?_=${timestamp} 128w,
- ${image_url}/++thumb++xs:w256?_=${timestamp} 256w,
- ${image_url}/++thumb++xs:w512?_=${timestamp} 512w,
- ${image_url}/++thumb++xs:w768?_=${timestamp} 768w" />
- <source media="(max-width: 767px)" sizes="100vw"
- srcset="/--static--/pyams_default_theme/img/dot.png"
- tal:condition="not:width" />
+ <tal:var define="lg_width slot_width['lg']">
+ <tal:if condition="lg_width">
+ <source media="(min-width: 1200px)"
+ tal:define="width round(1600 / 12 * lg_width)"
+ srcset="${image_url}/++thumb++lg:w${width}?_=${timestamp}" />
+ </tal:if>
+ <source media="(min-width: 1200px)"
+ tal:condition="not:lg_width"
+ srcset="/--static--/pyams_default_theme/img/dot.png" />
</tal:var>
<img style="width: 100%;"
tal:attributes="src image_url" />