1 <div class="text-center margin-y-5"> |
1 <div class="text-center margin-y-5"> |
2 <picture tal:define="image view.data; |
2 <tal:var define="image view.data" |
3 image_url tales:absolute_url(image); |
3 condition="image"> |
4 timestamp tales:timestamp(image); |
4 ${structure:tales:picture(image, alt=view.alt_title)} |
5 base_width 100 / 12;"> |
5 </tal:var> |
6 <!-- lg source --> |
|
7 <source media="(min-width: 1200px)" sizes="12vw, 25vw, 50vw, 100vw" |
|
8 tal:attributes="srcset string:${image_url}/++thumb++lg:w128?_=${timestamp} 128w, |
|
9 ${image_url}/++thumb++lg:w256?_=${timestamp} 256w, |
|
10 ${image_url}/++thumb++lg:w512?_=${timestamp} 512w, |
|
11 ${image_url}/++thumb++lg:w1200?_=${timestamp} 1200w" /> |
|
12 <!-- md source --> |
|
13 <source media="(min-width: 992px)" sizes="12vw, 25vw, 50vw, 100vw" |
|
14 tal:attributes="srcset string:${image_url}/++thumb++md:w128?_=${timestamp} 128w, |
|
15 ${image_url}/++thumb++md:w256?_=${timestamp} 256w, |
|
16 ${image_url}/++thumb++md:w512?_=${timestamp} 512w, |
|
17 ${image_url}/++thumb++md:w992?_=${timestamp} 992w" /> |
|
18 <!-- sm source --> |
|
19 <source media="(min-width: 768px)" sizes="12vw, 25vw, 50vw, 100vw" |
|
20 tal:attributes="srcset string:${image_url}/++thumb++sm:w128?_=${timestamp} 128w, |
|
21 ${image_url}/++thumb++sm:w256?_=${timestamp} 256w, |
|
22 ${image_url}/++thumb++sm:w512?_=${timestamp} 512w, |
|
23 ${image_url}/++thumb++sm:w768?_=${timestamp} 768w, |
|
24 " /> |
|
25 <!-- xs source --> |
|
26 <source media="(max-width: 767px)" sizes="12vw, 25vw, 50vw, 100vw" |
|
27 tal:attributes="srcset string:${image_url}/++thumb++xs:w128?_=${timestamp} 128w, |
|
28 ${image_url}/++thumb++xs:w256?_=${timestamp} 256w, |
|
29 ${image_url}/++thumb++xs:w512?_=${timestamp} 512w, |
|
30 ${image_url}/++thumb++xs:w768?_=${timestamp} 768w" /> |
|
31 <!-- fallback image --> |
|
32 <img style="width: 100%;" |
|
33 tal:attributes="alt alt; src image_url" /> |
|
34 </picture> |
|
35 <span tal:content="view.title">legend</span> |
6 <span tal:content="view.title">legend</span> |
36 </div> |
7 </div> |