4 image_url tales:absolute_url(image); |
4 image_url tales:absolute_url(image); |
5 slot_config view.slot_configuration; |
5 slot_config view.slot_configuration; |
6 slot_width slot_config.get_width(); |
6 slot_width slot_config.get_width(); |
7 base_width 100 / 12; |
7 base_width 100 / 12; |
8 timestamp tales:timestamp(image);"> |
8 timestamp tales:timestamp(image);"> |
9 <tal:var define="width slot_width['lg']"> |
9 <tal:var define="xs_width slot_width['xs']"> |
10 <source media="(min-width: 1200px)" sizes="12vw, 25vw, 50vw, 100vw" |
10 <tal:if condition="xs_width"> |
11 tal:condition="width" |
11 <source media="(max-width: 767px)" |
12 tal:attributes="srcset string:${image_url}/++thumb++lg:w128?_=${timestamp} 128w, |
12 tal:define="width round(768 / 12 * xs_width)" |
13 ${image_url}/++thumb++lg:w256?_=${timestamp} 256w, |
13 srcset="${image_url}/++thumb++xs:w${width}?_=${timestamp}" /> |
14 ${image_url}/++thumb++lg:w512?_=${timestamp} 512w, |
14 </tal:if> |
15 ${image_url}/++thumb++lg:w1200?_=${timestamp} 1200w" /> |
15 <source media="(max-width: 767px)" |
16 <source media="(min-width: 1200px)" sizes="100vw" |
16 tal:condition="not:xs_width" |
17 srcset="/--static--/pyams_default_theme/img/dot.png" |
17 srcset="/--static--/pyams_default_theme/img/dot.png" /> |
18 tal:condition="not:width" /> |
|
19 </tal:var> |
18 </tal:var> |
20 <tal:var define="width slot_width['md']"> |
19 <tal:var define="sm_width slot_width['sm']"> |
21 <source media="(min-width: 992px)" sizes="12vw, 25vw, 50vw, 100vw" |
20 <tal:if condition="sm_width"> |
22 tal:condition="width" |
21 <source media="(max-width: 991px)" |
23 tal:attributes="srcset string:${image_url}/++thumb++md:w128?_=${timestamp} 128w, |
22 tal:define="width round(992 / 12 * sm_width)" |
24 ${image_url}/++thumb++md:w256?_=${timestamp} 256w, |
23 srcset="${image_url}/++thumb++sm:w${width}?_=${timestamp}" /> |
25 ${image_url}/++thumb++md:w512?_=${timestamp} 512w, |
24 </tal:if> |
26 ${image_url}/++thumb++md:w992?_=${timestamp} 992w" /> |
25 <source media="(max-width: 991px)" |
27 <source media="(min-width: 992px)" sizes="100vw" |
26 tal:condition="not:sm_width" |
28 srcset="/--static--/pyams_default_theme/img/dot.png" |
27 srcset="/--static--/pyams_default_theme/img/dot.png" /> |
29 tal:condition="not:width" /> |
|
30 </tal:var> |
28 </tal:var> |
31 <tal:var define="width slot_width['sm']"> |
29 <tal:var define="md_width slot_width['md']"> |
32 <source media="(min-width: 768px)" sizes="12vw, 25vw, 50vw, 100vw" |
30 <tal:if condition="md_width"> |
33 tal:condition="width" |
31 <source media="(max-width: 1199px)" |
34 tal:attributes="srcset string:${image_url}/++thumb++sm:w128?_=${timestamp} 128w, |
32 tal:define="width round(1200 / 12 * md_width)" |
35 ${image_url}/++thumb++sm:w256?_=${timestamp} 256w, |
33 srcset="${image_url}/++thumb++md:w${width}?_=${timestamp}" /> |
36 ${image_url}/++thumb++sm:w512?_=${timestamp} 512w, |
34 </tal:if> |
37 ${image_url}/++thumb++sm:w768?_=${timestamp} 768w" /> |
35 <source media="(max-width: 1199px)" |
38 <source media="(min-width: 768px)" sizes="100vw" |
36 tal:condition="not:md_width" |
39 srcset="/--static--/pyams_default_theme/img/dot.png" |
37 srcset="/--static--/pyams_default_theme/img/dot.png" /> |
40 tal:condition="not:width" /> |
|
41 </tal:var> |
38 </tal:var> |
42 <tal:var define="width slot_width['xs']"> |
39 <tal:var define="lg_width slot_width['lg']"> |
43 <source media="(max-width: 767px)" sizes="12vw, 25vw, 50vw, 100vw" |
40 <tal:if condition="lg_width"> |
44 tal:condition="width" |
41 <source media="(min-width: 1200px)" |
45 tal:attributes="srcset string:${image_url}/++thumb++xs:w128?_=${timestamp} 128w, |
42 tal:define="width round(1600 / 12 * lg_width)" |
46 ${image_url}/++thumb++xs:w256?_=${timestamp} 256w, |
43 srcset="${image_url}/++thumb++lg:w${width}?_=${timestamp}" /> |
47 ${image_url}/++thumb++xs:w512?_=${timestamp} 512w, |
44 </tal:if> |
48 ${image_url}/++thumb++xs:w768?_=${timestamp} 768w" /> |
45 <source media="(min-width: 1200px)" |
49 <source media="(max-width: 767px)" sizes="100vw" |
46 tal:condition="not:lg_width" |
50 srcset="/--static--/pyams_default_theme/img/dot.png" |
47 srcset="/--static--/pyams_default_theme/img/dot.png" /> |
51 tal:condition="not:width" /> |
|
52 </tal:var> |
48 </tal:var> |
53 <img style="width: 100%;" |
49 <img style="width: 100%;" |
54 tal:attributes="src image_url" /> |
50 tal:attributes="src image_url" /> |
55 </picture> |
51 </picture> |
56 </tal:if> |
52 </tal:if> |