1 <div class="text-center margin-y-5"> |
1 <div class="text-center margin-y-5"> |
2 <img tal:define="data i18n:context.data; |
2 <picture tal:define="image_data i18n:context.data; |
3 thumbnails extension:thumbnails(data); |
3 image_url extension:absolute_url(image_data); |
4 target thumbnails.get_thumbnail('800x600', 'jpeg');" |
4 base_width 100 / 12; |
5 tal:attributes="src extension:absolute_url(target)" /><br /> |
5 width 12;"> |
|
6 <source media="(min-width: 1200px)" |
|
7 tal:attributes="srcset string:${image_url}/++thumb++lg:w1200 1200w, ${image_url}/++thumb++lg:w512 512w, ${image_url}/++thumb++lg:w256 256w, ${image_url}/++thumb++lg:w128 128w; |
|
8 sizes string:${round(base_width * width)}vw" /> |
|
9 <source media="(min-width: 992px)" |
|
10 tal:attributes="srcset string:${image_url}/++thumb++md:w992 992w, ${image_url}/++thumb++md:w512 512w, ${image_url}/++thumb++md:w256 256w, ${image_url}/++thumb++md:w128 128w; |
|
11 sizes string:${round(base_width * width)}vw" /> |
|
12 <source media="(min-width: 768px)" |
|
13 tal:condition="width" |
|
14 tal:attributes="srcset string:${image_url}/++thumb++sm:w768 768w, ${image_url}/++thumb++sm:w512 512w, ${image_url}/++thumb++sm:w256 256w, ${image_url}/++thumb++sm:w128 128w; |
|
15 sizes string:${round(base_width * width)}vw" /> |
|
16 <source media="(max-width: 767px)" |
|
17 tal:condition="width" |
|
18 tal:attributes="srcset string:${image_url}/++thumb++xs:w768 768w, ${image_url}/++thumb++xs:w512 512w, ${image_url}/++thumb++xs:w256 256w, ${image_url}/++thumb++xs:w128 128w; |
|
19 sizes string:${round(base_width * width)}vw" /> |
|
20 <img style="width: 100%;" tal:attributes="src image_url" /> |
|
21 </picture> |
6 <span tal:content="view.legend">legend</span> |
22 <span tal:content="view.legend">legend</span> |
7 </div> |
23 </div> |