1 <picture

     2 	tal:define="image_url tales:absolute_url(image);

     3 				timestamp tales:timestamp(image);

     4 				base_width 100 / 12;"

     5 	tal:attributes="class css_class">

     6 	<!-- lg source -->

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

     8 			tal:condition="lg_width"

     9 			tal:attributes="srcset string:${image_url}/++thumb++${lg_thumb}:w1200?_=${timestamp} 1200w,

    10 										  ${image_url}/++thumb++${lg_thumb}:w512?_=${timestamp} 512w,

    11 										  ${image_url}/++thumb++${lg_thumb}:w256?_=${timestamp} 256w,

    12 										  ${image_url}/++thumb++${lg_thumb}:w128?_=${timestamp} 128w;

    13 							sizes string:${round(base_width * lg_width)}vw" />

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

    15 			srcset="/--static--/pyams_skin/img/dot.png" sizes="100vw"

    16 			tal:condition="not:lg_width" />

    17 	<!-- md source -->

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

    19 			tal:condition="md_width"

    20 			tal:attributes="srcset string:${image_url}/++thumb++${md_thumb}:w992?_=${timestamp} 992w,

    21 										  ${image_url}/++thumb++${md_thumb}:w512?_=${timestamp} 512w,

    22 										  ${image_url}/++thumb++${md_thumb}:w256?_=${timestamp} 256w,

    23 										  ${image_url}/++thumb++${md_thumb}:w128?_=${timestamp} 128w;

    24 							sizes string:${round(base_width * md_width)}vw" />

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

    26 			srcset="/--static--/pyams_skin/img/dot.png" sizes="100vw"

    27 			tal:condition="not:md_width" />

    28 	<!-- sm source -->

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

    30 			tal:condition="sm_width"

    31 			tal:attributes="srcset string:${image_url}/++thumb++${sm_thumb}:w768?_=${timestamp} 768w,

    32 										  ${image_url}/++thumb++${sm_thumb}:w512?_=${timestamp} 512w,

    33 										  ${image_url}/++thumb++${sm_thumb}:w256?_=${timestamp} 256w,

    34 										  ${image_url}/++thumb++${sm_thumb}:w128?_=${timestamp} 128w;

    35 							sizes string:${round(base_width * sm_width)}vw" />

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

    37 			srcset="/--static--/pyams_skin/img/dot.png" sizes="100vw"

    38 			tal:condition="not:sm_width" />

    39 	<!-- xs source -->

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

    41 			tal:condition="xs_width"

    42 			tal:attributes="srcset string:${image_url}/++thumb++${xs_thumb}:w768?_=${timestamp} 768w,

    43 										  ${image_url}/++thumb++${xs_thumb}:w512?_=${timestamp} 512w,

    44 										  ${image_url}/++thumb++${xs_thumb}:w256?_=${timestamp} 256w,

    45 										  ${image_url}/++thumb++${xs_thumb}:w128?_=${timestamp} 128w;

    46 							sizes string:${round(base_width * xs_width)}vw" />

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

    48 			srcset="/--static--/pyams_skin/img/dot.png" sizes="100vw"

    49 			tal:condition="not:xs_width" />

    50 	<!-- fallback image -->

    51 	<img style="width: 100%;"

    52 		 tal:attributes="src image_url" />

    53 </picture>