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

{define_derivative name='derivative_params' type='xsmall'}
{if !empty($thumbnails)}{strip}

{combine_script id='jquery.ajaxmanager' path='themes/default/js/plugins/jquery.ajaxmanager.js' load='footer'}
{combine_script id='thumbnails.loader' path='themes/default/js/thumbnails.loader.js' require='jquery.ajaxmanager' load='footer'}
{*define_derivative name='derivative_params' width=160 height=90 crop=true*}
{html_style}
{*Set some sizes according to maximum thumbnail width and height*}

{if $derivative_params->max_width() >= 1008}
.col{ldelim}width:95%}
{elseif $derivative_params->max_width() >= 792}
.col{ldelim}width:49%}
{elseif $derivative_params->max_width() >= 576}
.col{ldelim}width:40%}
{elseif $derivative_params->max_width() >= 500}
.col{ldelim}width:32%}
{elseif $derivative_params->max_width() >= 480}
.col{ldelim}width:24%}
{elseif $derivative_params->max_width() >= 380}
.col{ldelim}width:19%}
{else}
.col{ldelim}width:15%}
{/if}




.thumbnails .wrap2{ldelim}
        height: {$derivative_params->max_height()+3}px;
}
{if $derivative_params->max_width() > 600}
.thumbLegend {ldelim}font-size: 130%}
{else}
{if $derivative_params->max_width() > 400}
.thumbLegend {ldelim}font-size: 110%}
{else}
.thumbLegend {ldelim}font-size: 90%}
{/if}
{/if}
{/html_style}

<div class="thumbContent">
<div id="containerThumb">

{foreach from=$thumbnails item=thumbnail}
        <div class="box photo col">

{assign var=derivative value=$pwg->derivative($derivative_params, $thumbnail.src_image)}

        <li class="thumbs">
                <div class="thumbnail">         
                        <div class="illustration">
                                <img class="thumbnail" src="{$derivative->get_url()}" alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}">
                        {if $SHOW_THUMBNAIL_CAPTION }
                        <a href="{$thumbnail.URL}">
                                <div class="description">
                                <div class="text">
                                        <span class="thumbLegend">
                                                        <span class="thumbName">{$thumbnail.NAME}</span>
                                                        {if !empty($thumbnail.icon_ts)}
                                                                <img title="{$thumbnail.icon_ts.TITLE}" src="{$ROOT_URL}{$themeconf.icon_dir}/recent.png" alt="(!)">
                                                        {/if}
                                                {if isset($thumbnail.NB_COMMENTS)}
                                                        <span class="{if 0==$thumbnail.NB_COMMENTS}zero {/if}nb-comments">
                                                                <br>
                                                                {$pwg->l10n_dec('%d comment', '%d comments',$thumbnail.NB_COMMENTS)}
                                                        </span>
                                                {/if}
                                                {if isset($thumbnail.NB_HITS)}
                                                        <span class="{if 0==$thumbnail.NB_HITS}zero {/if}nb-hits">
                                                                <br>
                                                                {$pwg->l10n_dec('%d hit', '%d hits',$thumbnail.NB_HITS)}
                                                        </span>
                                                {/if}
                                        </span>
                                </div>
                                </div>
                        </a>
                        </div>
                </div>


                {/if}
        </li>
        </div>
{/foreach}

{/strip}
{/if}
</div>          
{footer_script require='jquery'}{literal}
  $(function(){

    var $container = $('#containerThumb');
  
    $container.imagesLoaded( function(){
      $container.masonry({
        itemSelector : '.box',
                isFitWidth: true
      });
    });
  
  });
{/literal}{/footer_script}
</div>