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