source: extensions/Wood/template/thumbnails.tpl @ 21060

Last change on this file since 21060 was 21060, checked in by Miklfe, 11 years ago
File size: 2.9 KB
Line 
1{if !empty($thumbnails)}{strip}
2
3{combine_script id='jquery.ajaxmanager' path='themes/default/js/plugins/jquery.ajaxmanager.js' load='footer'}
4{combine_script id='thumbnails.loader' path='themes/default/js/thumbnails.loader.js' require='jquery.ajaxmanager' load='footer'}
5{*define_derivative name='derivative_params' width=160 height=90 crop=true*}
6{html_style}
7{*Set some sizes according to maximum thumbnail width and height*}
8
9{if $derivative_params->max_width() >= 1008}
10.col{ldelim}width:95%}
11{elseif $derivative_params->max_width() >= 792}
12.col{ldelim}width:49%}
13{elseif $derivative_params->max_width() >= 576}
14.col{ldelim}width:40%}
15{elseif $derivative_params->max_width() >= 500}
16.col{ldelim}width:32%}
17{elseif $derivative_params->max_width() >= 480}
18.col{ldelim}width:24%}
19{elseif $derivative_params->max_width() >= 380}
20.col{ldelim}width:19%}
21{else}
22.col{ldelim}width:15%}
23{/if}
24
25
26
27
28.thumbnails .wrap2{ldelim}
29        height: {$derivative_params->max_height()+3}px;
30}
31{if $derivative_params->max_width() > 600}
32.thumbLegend {ldelim}font-size: 130%}
33{else}
34{if $derivative_params->max_width() > 400}
35.thumbLegend {ldelim}font-size: 110%}
36{else}
37.thumbLegend {ldelim}font-size: 90%}
38{/if}
39{/if}
40{/html_style}
41
42<div class="thumbContent">
43<div id="containerThumb" class="clearfix">
44
45{foreach from=$thumbnails item=thumbnail}
46        <div class="box photo col">
47
48{assign var=derivative value=$pwg->derivative($derivative_params, $thumbnail.src_image)}
49
50        <li class="thumbs">
51                <div class="thumbnail">         
52                        <div class="illustration">
53                                <img class="thumbnail" src="{$derivative->get_url()}" alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}">
54                        {if $SHOW_THUMBNAIL_CAPTION }
55                        <a href="{$thumbnail.URL}">
56                                <div class="description">
57                                <div class="text">
58                                        <span class="thumbLegend">
59                                                        <span class="thumbName">{$thumbnail.NAME}</span>
60                                                        {if !empty($thumbnail.icon_ts)}
61                                                                <img title="{$thumbnail.icon_ts.TITLE}" src="{$ROOT_URL}{$themeconf.icon_dir}/recent.png" alt="(!)">
62                                                        {/if}
63                                                {if isset($thumbnail.NB_COMMENTS)}
64                                                        <span class="{if 0==$thumbnail.NB_COMMENTS}zero {/if}nb-comments">
65                                                                <br>
66                                                                {$pwg->l10n_dec('%d comment', '%d comments',$thumbnail.NB_COMMENTS)}
67                                                        </span>
68                                                {/if}
69                                                {if isset($thumbnail.NB_HITS)}
70                                                        <span class="{if 0==$thumbnail.NB_HITS}zero {/if}nb-hits">
71                                                                <br>
72                                                                {$pwg->l10n_dec('%d hit', '%d hits',$thumbnail.NB_HITS)}
73                                                        </span>
74                                                {/if}
75                                        </span>
76                                </div>
77                                </div>
78                        </a>
79                        </div>
80                </div>
81
82
83                {/if}
84        </li>
85        </div>
86{/foreach}
87
88{/strip}
89{/if}
90</div>         
91{footer_script require='jquery'}{literal}
92                        window.onload = function() {
93                          var wall1 = new Masonry( document.getElementById('container'), {
94                                gutterWidth: 10,
95                                isFitWidth: true
96                          });
97                                var wall2 = new Masonry( document.getElementById('containerThumb'), {
98                                gutterWidth: 10,
99                                isFitWidth: true
100                          });
101
102                        };
103{/literal}{/footer_script}
104</div>
105
Note: See TracBrowser for help on using the repository browser.