spee.ch/views/partials/trendingAssets.handlebars

<script src="/vendors/masonry/masonry.pkgd.min.js"></script>

<div class="full"> 
	<h2>Trending</h2>
	<p><i>The 25 most popular assets on spee.ch</i></p>
	<div class="grid" data-masonry='{ "itemSelector": ".grid-item" }'>
		{{#each trendingAssets}}
			<div class="all-claims-item">
				<a href="/{{this.claimId}}/{{this.name}}">
					{{#ifConditional this.fileType '===' 'video/mp4'}}
						<img class="all-claims-asset" src="/assets/img/content-freedom-large.png"/>
					{{else}}
						<img  class="all-claims-asset" src="/{{this.claimId}}/{{this.name}}.ext" />
					{{/ifConditional}}
				</a>
				<div class="all-claims-details">
					<ul style="list-style-type:none">
						<li><bold>{{this.name}}</bold></li>
						<li><i>Claim Id: {{this.claimId}}</i></li>
						<li><strong>{{this.title}}</strong></li>
					</ul>
				</div>
			</div>
		{{/each}}
	</div>
</div>


<script>
	var elem = document.querySelector('.grid');
	var msnry = new Masonry( elem, {
		itemSelector: '.grid-item'
	});
	
	function resetTrendingLayout() {
		msnry.layout();
	}
</script>