clipbucket/upload/styles/cbv3/layout/view_collection.html

<div class="controller scrolltoFixed white-grad collection-header">
    <a href="{collection_links($c,'vc')}" class="collection-owner" style="background: white url('{$cbcollection->get_thumb($c)}') center no-repeat;  background-size: 125%;">{$c.collection_name}</a>
    <div class="collection-header-details">
        <h4>{$c.collection_name}</h4>
        {if $c.collection_description}
        <p class="margin0">{$c.collection_description|description}</p>
        {/if}
        <p class="margin0">{lang code='Categories'}: {$c.category|categories:collections} &ndash; {if $c.collection_tags}<i class="icon-tags" style="opacity: 0.5"></i> {$c.collection_tags|tags:collections}{/if}</p>
    </div>
    <div class="absolute top right">
        <div class="btn-group marginR10 marginB10 text-right">
            <button class="btn btn-small disabled">{lang code='Actions'}</button>
            <button class="btn btn-small cb-tooltip" title="{lang code='Add to favorites'}" data-placement="bottom"><i class="icon-heart"></i> {lang code='Favorite'}</button>
            <button class="btn btn-small cb-tooltip" title="{lang code='Share collection'}" data-placement="bottom"><i class="icon-bullhorn"></i> {lang code='Share'}</button>
            <button class="btn btn-small cb-tooltip" title="{lang code='Report collection'}" data-placement="bottom"><i class="icon-flag"></i> {lang code='Report'}</button>
        </div>
        <ul class="collection-details">
            <li>{$c.date_added|niceTime} <i>{lang code='Created'}</i></li>
            <li>{$c.last_updated|niceTime} <i>{lang code='Updated'}</i></li>
            <li>{$c.views|number_format} <i>{lang code='Views'}</i></li>
            <li>{$c.total_objects|number_format} <i>{lang code='Photos'}</i></li>
        </ul>
    </div>
</div>
{if $objects}
<div class="inlineblock-fix" id="collection-photos-container">
    <div class="collection-rating">
        Rating will be displayed here
    </div>
    {foreach $objects as $object}
		{include_template_file file="blocks/photo.html" photo=$object display_method='view_collection' collection=$c}
    {/foreach}
    <div class="height100"></div>
    {include_template_file file='/blocks/pagination.html'}
</div>

<script type="text/javascript">
    $( document ).ready(function(){
          $.Mason.prototype.resize = function() {
            this._getColumns();
            this._reLayout();
          };
  
        $.Mason.prototype._reLayout = function( callback ) {
          var freeCols = this.cols;
          if ( this.options.cornerStampSelector ) {
            var $cornerStamp = this.element.find( this.options.cornerStampSelector ),
                cornerStampX = $cornerStamp.offset().left - 
                  ( this.element.offset().left + this.offset.x + parseInt($cornerStamp.css('marginLeft')) );
            freeCols = Math.floor( cornerStampX / this.columnWidth );
          }
          // reset columns
          var i = this.cols;
          this.colYs = [];
          while (i--) {
            this.colYs.push( this.offset.y );
          }

          for ( i = freeCols; i < this.cols; i++ ) {
            this.colYs[i] = this.offset.y + $cornerStamp.outerHeight(true);
          }

          // apply layout logic to all bricks
          this.layout( this.$bricks, callback );
        };
        
        $('#collection-photos-container').imagesLoaded( function(){
            $('#collection-photos-container').masonry({
                // options
                itemSelector : '.view-collection-photos',
                cornerStampSelector: '.collection-rating'
            });
        })
    })
</script>
{/if}