Make A blog style layout using resources
1) Create Main blog page resource and a child blog post inside it.
2) Create template variable for featured image
3) Create chunks for the getresource calls, and the templates for them.
/*main blog page call*/
/*replace parent id with your main blog page id */
[[!getResources? &parents=`111` &tpl=`blogPageTpl` &limit=`99` &showHidden=`1` &includeTVs=`1` &processTVs=`1` &includeContent=`1` &sortby=`menuindex` &sortdir=`ASC`]]
/* blog page tpl */
<div class="blog-wrap">
[[+tv.img:notempty=`<div class="blog-ftr-image" style="background-image:url([[+tv.img]]);"></div>`]]
<div class="blog-excerpt">
<a href="[[~[[+id]]]]"><h2>[[+pagetitle]]</h2> </a>
<small>[[+createdon:strtotime:date=`%A, %B %e, %Y`]]</small>
[[+content:ellipsis=`300`]]
</div>
<div class="blog-rd-mr">
<a href="[[~[[+id]]]]" class="btn btn-primary">Read More</a>
</div>
</div>
/*Side bar with archive list - call*/
/*replace parent id with your main blog page id */
[[getResources? &parents=`111` &tpl=`blogListTpl` &includeContent=`1` &includeTVs=`1` &sortby=`menuindex` &sortdir=`ASC` &limit=`0` &showHidden=`1`]]
/* side blogListTpl */
<div class="blog-excerpt">
<a href="[[~[[+id]]]]"> > [[+pagetitle]] <br><small>[[+createdon:strtotime:date=`%A, %B %e, %Y`]]</small></a>
</div>
4) Optional - create a separate blog post template
<!DOCTYPE html>
<html lang="en">
<head>
[[$htmlhead]]
</head>
<body class="blog-template">
[[$header]]
<main id="content" class="container">
<div class="row main-content-row">
<div class="col-md-8 main">
[[*img:notempty=`<div class="blog-ftr-image" style="background-image:url([[*img]]);"></div>`]]
<div class="blog-header">
[[*longtitle:notempty=`<h1>[[*longtitle]]</h1>`]]
<small>[[*createdon:strtotime:date=`%A, %B %e, %Y`]]</small>
</div>
[[*content]]
</div>
<aside id="sidebar" class="col-md-4">
<h2>Archive</h2>
[[$blogList]]
</aside>
</div>
</main>
[[$footer]]
</body>
</html>
5) CSS styles to suit
#sidebar a {text-decoration: none;font-size: 18px;}
#sidebar a:hover,#sidebar a:active {color:#ec268f;}
#sidebar a small {padding-left: 16px;}
#sidebar {background: rgb(66, 73, 82);padding: 22px;max-height: -webkit-fit-content;max-height: -moz-fit-content;max-height: fit-content;color: #fff;}
#sidebar h2 {border-bottom: 2px solid #a8cf45;}
.blog-wrap {border-bottom:2px solid #a8cf45;padding-bottom: 20px;margin-bottom: 20px;}
.blog-ftr-image {padding: 8em;background-size: cover;background-repeat: no-repeat;margin-bottom: 1em;}
.blog-excerpt h2, .blog-excerpt small {margin-bottom: 0.4em;}
.blog-excerpt small{color: #a9a9a9;display: block;}
.blog-excerpt a{text-decoration:none;}
.blog-template .blog-ftr-image{padding:12em;}
.blog-header {border-bottom: solid 2px #a8cf45;margin-bottom:1.5em;}
.blog-header h1 {font-size:2.5rem;margin-bottom:0.2em;font-weight:500;}
Get In Touch
Have a question? or perhaps spotted a problem?
Maybe you have something you would like to add. Drop us a line anytime!