Custom blog page template in Neto Maropost

In this example we will create a custom template for blog page in the Neto/Maropost website. This custom template is created for the 3 level blog structure i.e. Main Blog Page > Category Pages > Actual Blog Posts. It can be used as the body template for both main blog page and category pages.

Tip – This tutorial is only for those users who have basic understanding of the Neto’s template structure otherwise you will not be able to make it work on your Neto website.

Note – I am assuming that you have the basic understanding of the CSS classes and design part, so I am including only the backend code for this template.

Create a file named as blog_page.template.html inside the /templates/cms folder in your Neto Maropost theme and place the following code inside it.

	[%breadcrumb%]
		[%param *header%]
			<nav aria-label="breadcrumb">
				<ol class="breadcrumb nbreadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList">
					<li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
						<a href="[@config:home_url@]" itemprop="item"><span itemprop="name">Home</span></a>
						<meta itemprop="position" content="0" />
					</li>
		[%/param%]
		[%param *body%]
					<li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
						<a href="[@url@]" itemprop="item"><span itemprop="name">[@name@]</span></a>
						<meta itemprop="position" content="[%calc [@count@] + 1 /%]" />
					</li>
		[%/param%]
		[%param *footer%]
				</ol>
			</nav>
		[%/param%]
	[%/breadcrumb%]
		<div class="blog-page-header" style="background-image:url([%asset_url type:'content' id:'[@content_id@]'%][%param default%][%cdn_asset html:'0' library:'images'%]default_product.gif[%/cdn_asset%][%/ param%][%/ asset_url%])">
			<h1> [@content_name@] </h1>
			[%if [@content_short_description1@] %]
			<h2>[@content_short_description1@]</h2>
			[%/if%]
		</div>
	[%thumb_list type:'content' content_type:'' template:'blog_card' show_level: '3' show_next_level:'[@content_level@]' limit:'20'%]
		[%param *header%]
			<div class="blog-grid">
		[%/param%]
		[%param *body%]
		[%/param%]
		[%param *footer%]
			</div>
			<nav aria-label="Page navigation">
				<div class="row mt-4">
					<div class="col-12">
						<nav aria-label="Page navigation">
							<ul class="pagination justify-content-center">
								[%paging limit:'3'%]
									[%param *previous_page%]<li class="page-item"><a class="page-link npage-link" href="[@url@]" aria-label="Go back one page"><i class="fa fa-chevron-left" aria-hidden="true"></i></a></li>[%/param%]
									[%param *goback_pages%]<li class="page-item"><a class="page-link npage-link" href="[@url@]" aria-label="Go to page [@page@]">[@page@]</a></li>[%/param%]
									[%param *current_page%]<li class="page-item active"><a class="page-link npage-link" href="[@url@]" aria-label="Current page">[@page@]</a></li>[%/param%]
									[%param *gonext_pages%]<li class="page-item"><a href="[@url@]" class="page-link npage-link" aria-label="Go to page [@page@]">[@page@]</a></li>[%/param%]
									[%param *next_page%]<li class="page-item"><a class="page-link npage-link" href="[@url@]" aria-label="Go forward one page"><i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>[%/param%]
								[%/paging%]
							</ul>
						</nav>
					</div>
				</div>
			</nav>
		[%/param%]
	[%/thumb_list%]
</div>

Go to templates/thumbs/content folder and create blog_card.template.html file. Place following code inside it, save and upload both files.

<article class="blog-card">
	<a class="blog-card-header" href="[@url@]">
		<img src="[%asset_url type:'content' id:'[@content_id@]'%][%param default%][%cdn_asset html:'0' library:'images'%]default_product.gif[%/cdn_asset%][%/ param%][%/ asset_url%]" alt="[@content_name@]" loading="lazy">
	</a>
	<div class="blog-card-body">
		<div class="blog-meta">
			<div class="blog-categories"> 
				[%show_content id:'[@parent_id@]' limit:'1' %]
					[%param *body%]
					<a href="[%url type:'cms'%][%param id%][@content_id@][%/param%][%/url%]">[@content_name@]</a>
					[%/param%]
				[%/show_content%]	
			</div>
			[%IF [@date_posted@] != 0000-00-00 00:00:00%]
			<div class="date-posted">[%FORMAT type:'date'%][@date_posted@][%/ FORMAT%]</div>
			[%/ IF%]
		</div>
		<h3 class="blog-title">
			<a href="[@url@]">[@content_name@]</a>
		</h3>
		[%IF [@content_short_description2@]%]
		<div class="blog-excerpt">[@content_short_description2@]</div>
		[%/ IF%]
	</div>
</article>

After placing both files in the given places this new template will start appearing in the template list in the edit page screen. Select this template as the body template for your blog page and customize it’s look and feel according to your choice.