1 <div i18n:domain="pyams_content">

     2 	<tal:loop repeat="image context.get_visible_medias()">

     3 		<picture tal:define="image_data i18n:image.data;

     4 							 image_url extension:absolute_url(image_data);

     5 							 base_width 100 / 12;

     6 							 width 12;">

     7 			<source media="(min-width: 1200px)"

     8 					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;

     9 									sizes string:${round(base_width * width)}vw" />

    10 			<source media="(min-width: 992px)"

    11 					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;

    12 									sizes string:${round(base_width * width)}vw" />

    13 			<source media="(min-width: 768px)"

    14 					tal:condition="width"

    15 					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;

    16 									sizes string:${round(base_width * width)}vw" />

    17 			<source media="(max-width: 767px)"

    18 					tal:condition="width"

    19 					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;

    20 									sizes string:${round(base_width * width)}vw" />

    21 			<img style="width: 100%;" tal:attributes="src image_url" />

    22 		</picture>

    23 	</tal:loop>

    24 </div>