1 <div i18n:domain="pyams_content"> |
1 <div i18n:domain="pyams_content"> |
2 <tal:loop repeat="image context.get_visible_medias()"> |
2 <tal:loop repeat="image context.get_visible_medias()"> |
3 <picture tal:define="image_data i18n:image.data; |
3 <picture tal:define="image_data i18n:image.data; |
4 image_url tales:absolute_url(image_data); |
4 image_url tales:absolute_url(image_data); |
5 base_width 100 / 12; |
5 timestamp tales:timestamp(image); |
6 width 12;"> |
6 base_width 100 / 12;"> |
7 <source media="(min-width: 1200px)" |
7 <!-- lg source --> |
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; |
8 <source media="(min-width: 1200px)" sizes="12vw, 25vw, 50vw, 100vw" |
9 sizes string:${round(base_width * width)}vw" /> |
9 tal:attributes="srcset string:${image_url}/++thumb++lg:w128?_=${timestamp} 128w, |
10 <source media="(min-width: 992px)" |
10 ${image_url}/++thumb++lg:w256?_=${timestamp} 256w, |
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; |
11 ${image_url}/++thumb++lg:w512?_=${timestamp} 512w, |
12 sizes string:${round(base_width * width)}vw" /> |
12 ${image_url}/++thumb++lg:w1200?_=${timestamp} 1200w" /> |
13 <source media="(min-width: 768px)" |
13 <!-- md source --> |
14 tal:condition="width" |
14 <source media="(min-width: 992px)" sizes="12vw, 25vw, 50vw, 100vw" |
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; |
15 tal:attributes="srcset string:${image_url}/++thumb++md:w128?_=${timestamp} 128w, |
16 sizes string:${round(base_width * width)}vw" /> |
16 ${image_url}/++thumb++md:w256?_=${timestamp} 256w, |
17 <source media="(max-width: 767px)" |
17 ${image_url}/++thumb++md:w512?_=${timestamp} 512w, |
18 tal:condition="width" |
18 ${image_url}/++thumb++md:w992?_=${timestamp} 992w" /> |
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; |
19 <!-- sm source --> |
20 sizes string:${round(base_width * width)}vw" /> |
20 <source media="(min-width: 768px)" sizes="12vw, 25vw, 50vw, 100vw" |
21 <img style="width: 100%;" tal:attributes="src image_url" /> |
21 tal:attributes="srcset string:${image_url}/++thumb++sm:w128?_=${timestamp} 128w, |
|
22 ${image_url}/++thumb++sm:w256?_=${timestamp} 256w, |
|
23 ${image_url}/++thumb++sm:w512?_=${timestamp} 512w, |
|
24 ${image_url}/++thumb++sm:w768?_=${timestamp} 768w, |
|
25 " /> |
|
26 <!-- xs source --> |
|
27 <source media="(max-width: 767px)" sizes="12vw, 25vw, 50vw, 100vw" |
|
28 tal:attributes="srcset string:${image_url}/++thumb++xs:w128?_=${timestamp} 128w, |
|
29 ${image_url}/++thumb++xs:w256?_=${timestamp} 256w, |
|
30 ${image_url}/++thumb++xs:w512?_=${timestamp} 512w, |
|
31 ${image_url}/++thumb++xs:w768?_=${timestamp} 768w" /> |
|
32 <!-- fallback image --> |
|
33 <img style="width: 100%;" |
|
34 tal:attributes="alt alt; src image_url" /> |
22 </picture> |
35 </picture> |
23 </tal:loop> |
36 </tal:loop> |
24 </div> |
37 </div> |