1 <div class="text-center margin-y-5">

     2 	<picture tal:define="image_data i18n:context.data;

     3 						 image_url extension:absolute_url(image_data);

     4 						 base_width 100 / 12;

     5 						 width 12;">

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

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

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

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

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

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

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

    13 				tal:condition="width"

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

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

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

    17 				tal:condition="width"

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

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

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

    21 	</picture>

    22 	<span tal:content="view.legend">legend</span>

    23 </div>