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