Adding custom post types into latest post grid plugin

I have a masonary styled grid on my blog and I am wanting to create a custom post type for my instagram posts, and shop feed items.

For example:

<script type="text/html" id="post-item-template"><div class="item post" data-type="post">
	<div class="post-item {text_color}">
	<a class="btn overlay-btn" href="{url}">
		<figure class="image post-image">
			<img src="{image_url}">
		</figure>
		<header class="header">
			<span class="label">{category}</span>
			<h3 class="title post-title">{title}</h3>
			<span class="read-more-btn tertiary-btn">read more</span>
		</header>
	</a>
</div></div></script>

<script type="text/html" id="instagram-item-template"><div class="item instagram {size}" data-type="instagram">
	<div class="instagram-item ">
	<a class="btn" href="{url}" target="_blank">
		<figure class="image instagram-image">
			<img src="{image_url}">
		</figure>
		<div class="instagram-meta meta">
			<div class="instagram-logo">
				<i class="icon-instagram icon"></i>
				<span class="name">@thehautepursuit</span>
			</div>
			<div class="instagram-stats stats">
				<span class="likes">{likes}</span>
				<span class="comments">{comments}</span>
			</div>
		</div>
	</a>
</div></div></script>

<script type="text/html" id="product-item-template"><div class="item product {size}" data-type="product">
	<div class="product-item {size}">
	<a class="btn overlay-btn" href="{url}">
		<figure class="image product-image">
			<img src="{image_url}">
		</figure>
		<header class="header">
			<span class="label">THPSHOP</span>
			<h4 class="title product-title">{title}</h4>
			<span class="price">{price}</span>
			<span class="buy-btn tertiary-btn">buy now</span>
		</header>
	</a>
</div></div></script>

<script type="text/html" id="custom-item-template"><div class="item custom {size}" data-type="custom">
	<div class="custom-item {text_color}">
	<a class="btn overlay-btn" href="{url}">
		<figure class="image custom-image">
			<img src="{image_url}">
		</figure>
		<header class="header">
			<span class="label"></span>
			<h3 class="title custom-title">{title}</h3>
			<span class="read-more-btn tertiary-btn">read more</span>
		</header>
	</a>
</div></div></script>

This is an exmaple from a live site that I am wanting to emulate…

How is this done? Any reference material or advice would be great…