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>

    <div class="blog-rd-mr">
        <a href="[[~[[+id]]]]" class="btn btn-primary">Read More</a>


/*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>

4) Optional - create a separate blog post template

<!DOCTYPE html>
<html lang="en">
  <body class="blog-template">

    <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">
	    <small>[[*createdon:strtotime:date=`%A, %B %e, %Y`]]</small>
        <aside id="sidebar" class="col-md-4">


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!