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