--- a/src/pyams_portal/portlets/image/skin/image.pt Mon Aug 27 17:59:49 2018 +0200
+++ b/src/pyams_portal/portlets/image/skin/image.pt Mon Aug 27 18:00:14 2018 +0200
@@ -7,45 +7,50 @@
base_width 100 / 12;
timestamp tales:timestamp(image);">
<tal:var define="width slot_width['lg']">
- <source media="(min-width: 1200px)"
+ <source media="(min-width: 1200px)" sizes="12vw, 25vw, 50vw, 100vw"
tal:condition="width"
- tal:attributes="srcset string:${image_url}/++thumb++lg:w1200?_=${timestamp} 1200w, ${image_url}/++thumb++lg:w512?_=${timestamp} 512w, ${image_url}/++thumb++lg:w256?_=${timestamp} 256w, ${image_url}/++thumb++lg:w128?_=${timestamp} 128w;
- sizes string:${round(base_width * width)}vw" />
- <source media="(min-width: 1200px)"
+ 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:attributes="sizes string:${round(base_width * width)}vw" />
+ tal:condition="not:width" />
</tal:var>
<tal:var define="width slot_width['md']">
- <source media="(min-width: 992px)"
+ <source media="(min-width: 992px)" sizes="12vw, 25vw, 50vw, 100vw"
tal:condition="width"
- tal:attributes="srcset string:${image_url}/++thumb++md:w992?_=${timestamp} 992w, ${image_url}/++thumb++md:w512?_=${timestamp} 512w, ${image_url}/++thumb++md:w256?_=${timestamp} 256w, ${image_url}/++thumb++md:w128?_=${timestamp} 128w;
- sizes string:${round(base_width * width)}vw" />
- <source media="(min-width: 992px)"
+ 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:attributes="sizes string:${round(base_width * width)}vw" />
+ tal:condition="not:width" />
</tal:var>
<tal:var define="width slot_width['sm']">
- <source media="(min-width: 768px)"
+ <source media="(min-width: 768px)" sizes="12vw, 25vw, 50vw, 100vw"
tal:condition="width"
- tal:attributes="srcset string:${image_url}/++thumb++sm:w768?_=${timestamp} 768w, ${image_url}/++thumb++sm:w512?_=${timestamp} 512w, ${image_url}/++thumb++sm:w256?_=${timestamp} 256w, ${image_url}/++thumb++sm:w128?_=${timestamp} 128w;
- sizes string:${round(base_width * width)}vw" />
- <source media="(min-width: 768px)"
+ 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:attributes="sizes string:${round(base_width * width)}vw" />
+ tal:condition="not:width" />
</tal:var>
<tal:var define="width slot_width['xs']">
- <source media="(max-width: 767px)"
+ <source media="(max-width: 767px)" sizes="12vw, 25vw, 50vw, 100vw"
tal:condition="width"
- tal:attributes="srcset string:${image_url}/++thumb++xs:w768?_=${timestamp} 768w, ${image_url}/++thumb++xs:w512?_=${timestamp} 512w, ${image_url}/++thumb++xs:w256?_=${timestamp} 256w, ${image_url}/++thumb++xs:w128?_=${timestamp} 128w;
- sizes string:${round(base_width * width)}vw" />
- <source media="(max-width: 767px)"
+ 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:attributes="sizes string:${round(base_width * width)}vw" />
+ tal:condition="not:width" />
</tal:var>
- <img style="width: 100%;" tal:attributes="src image_url" />
+ <img style="width: 100%;"
+ tal:attributes="src image_url" />
</picture>
</tal:if>