|
1 <picture tal:define="image_url tales:absolute_url(image); |
|
2 thumbnails tales:thumbnails(image);"> |
|
3 <tal:if condition="xs_width"> |
|
4 <!-- xs source --> |
|
5 <source media="(max-width: 767px)" |
|
6 tal:define="width str(round(768 / 12 * xs_width)); |
|
7 thumb thumbnails.get_thumbnail(xs_thumb + ':w' + width); |
|
8 timestamp tales:timestamp(thumb);" |
|
9 srcset="${image_url}/++thumb++${xs_thumb}:w${width}?_=${timestamp}" /> |
|
10 </tal:if> |
|
11 <source tal:condition="not:xs_width" |
|
12 media="(max-width: 767px)" |
|
13 srcset="/--static--/pyams_skin/img/dot.png" /> |
|
14 <tal:if condition="sm_width"> |
|
15 <!-- sm source --> |
|
16 <source media="(max-width: 991px)" |
|
17 tal:define="width str(round(992 / 12 * sm_width)); |
|
18 thumb thumbnails.get_thumbnail(sm_thumb + ':w' + width); |
|
19 timestamp tales:timestamp(thumb);" |
|
20 srcset="${image_url}/++thumb++${sm_thumb}:w${width}?_=${timestamp}" /> |
|
21 </tal:if> |
|
22 <source tal:condition="not:sm_width" |
|
23 media="(max-width: 991px)" |
|
24 srcset="/--static--/pyams_skin/img/dot.png" /> |
|
25 <tal:if condition="md_width"> |
|
26 <!-- md source --> |
|
27 <source media="(max-width: 1199px)" |
|
28 tal:define="width str(round(1200 / 12 * md_width)); |
|
29 thumb thumbnails.get_thumbnail(md_thumb + ':w' + width); |
|
30 timestamp tales:timestamp(thumb);" |
|
31 srcset="${image_url}/++thumb++${md_thumb}:w${width}?_=${timestamp}" /> |
|
32 </tal:if> |
|
33 <source tal:condition="not:md_width" |
|
34 media="(max-width: 1199px)" |
|
35 srcset="/--static--/pyams_skin/img/dot.png" /> |
|
36 <tal:if condition="lg_width"> |
|
37 <!-- lg source --> |
|
38 <source media="(min-width: 1200px)" |
|
39 tal:define="width str(round(1600 / 12 * lg_width)); |
|
40 thumb thumbnails.get_thumbnail(lg_thumb + ':w' + width); |
|
41 timestamp tales:timestamp(thumb);" |
|
42 srcset="${image_url}/++thumb++${lg_thumb}:w${width}?_=${timestamp}" /> |
|
43 </tal:if> |
|
44 <source tal:condition="not:lg_width" |
|
45 media="(min-width: 1200px)" |
|
46 srcset="/--static--/pyams_skin/img/dot.png" /> |
|
47 <!-- fallback image --> |
|
48 <img style="width: 100%;" class="${css_class}" |
|
49 tal:define="timestamp tales:timestamp(image)" |
|
50 alt="${alt}" src="${image_url}?_=${timestamp}" /> |
|
51 </picture> |