--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/pyams_portal/portlets/image/skin/image.pt	Wed May 23 15:07:59 2018 +0200
@@ -0,0 +1,50 @@
+<tal:if condition="view.settings.image">
+	<picture
+		tal:define="image view.settings.image;
+					image_url extension:absolute_url(image);
+					slot_config view.slot_configuration;
+					slot_width slot_config.get_width();
+					base_width 100 / 12;">
+		<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>
+</tal:if>