DEMO Custom Blog
Sample Post One
14 April 2019
Orci phasellus egestas tellus rutrum tellus pellentesque. Sed enim ut sem viverra aliquet. Sed euismod nisi porta lorem mollis aliquam ut porttitor. Eget duis at tellus at urna condimentum mattis pellentesque. A condimentum vitae sapien pellentesque habitant morbi tristique senectus et. Viverra aliquet eget sit amet tellus cras adipiscing enim....
Sample Post Three
18 January 2019
Orci phasellus egestas tellus rutrum tellus pellentesque. Sed enim ut sem viverra aliquet. Sed euismod nisi porta lorem mollis aliquam ut porttitor. Eget duis at tellus at urna condimentum mattis pellentesque. A condimentum vitae sapien pellentesque habitant morbi tristique senectus et. Viverra aliquet eget sit amet tellus cras adipiscing enim.Non...
Sample Post Two
12 December 2018
Orci phasellus egestas tellus rutrum tellus pellentesque. Sed enim ut sem viverra aliquet. Sed euismod nisi porta lorem mollis aliquam ut porttitor. Eget duis at tellus at urna condimentum mattis pellentesque. A condimentum vitae sapien pellentesque habitant morbi tristique senectus et. Viverra aliquet eget sit amet tellus cras adipiscing enim....
This is a description for my blog.
It has Categories and Tags applied and can be filtered by Category, Tag and Month.
Pagination is also enabled.
All Categories
All Tags
By Month
Code: (General Blog Layout)
{% component source: "Blog Post", layout: "", sortBy: "releaseDate", sortOrder: "DESC", limit: "1000", collectionVariable: "allPosts", type: "module" %}
{% if request.request_url.params.cat %}
{% assign filterValue = request.request_url.params.cat %}
{% assign filterBy = 'ItemCategories' %}
{% elsif request.request_url.params.tag %}
{% assign filterValue = request.request_url.params.tag %}
{% assign filterBy = 'ItemTags' %}
{% elsif request.request_url.params.date %}
{% assign filterValue = this.id %}
{% assign filterBy = 'parentid' %}
{% assign filterSearch = request.request_url.params.date %}
{% else %}
{% assign filterValue = this.id %}
{% assign filterBy = 'parentid' %}
{% endif %}
<div>
<hr>
<div class="grid-x grid-padding-x">
<div class="cell medium-8">
<h2>{{this['Name']}}</h2>
{% if filterBy != 'parentid' %}
<h6><i>Posts filtered by: <b>{{filterValue}}</b></i></h6>
{% elsif filterSearch %}
<h6><i>Posts filtered by: <b>{{filterSearch | date: '%B %Y'}}</b></i></h6>
{% endif %}
{% component type:"module", source: "Blog Post", layout:"Custom List", filterBy: "{{filterBy}}", filterValue: "{{filterValue}}", filterSearch: "{{filterSearch}}", sortBy: "releaseDate", sortOrder: "DESC", limit: "10", displayPagination: "true" %}
</div>
<div class="cell medium-4">
<p class="lead">{{this['Description']}}</p>
<hr>
<h5>All Categories</h5>
{% for i in allPosts.items %}
{% if i.parentid == this.id %}
{% for ii in i.itemcategories %}
{% assign catArray = catArray | append: ii | append: ',' %}
{% endfor %}
{% endif %}
{% endfor %}
{% assign cats = catArray | split: ',' | uniq | sort %}
<ul class="menu vertical">
{% for c in cats %}
{% assign catNum = 0 -%}
{% assign catLink = c | url_encode | prepend: '?cat=' | prepend: this.url %}
{% for n in allPosts.items %}
{% if n.itemcategories contains c %}
{% assign catNum = catNum | plus: 1 -%}
{% endif %}
{% endfor %}
<li {% if filterValue == c %}class="is-active"{% endif %}>
<a href="{{catLink}}">
{{c}} ({{catNum}})
</a>
</li>
{% endfor %}
</ul>
<hr>
<h5>All Tags</h5>
{% for i in allPosts.items %}
{% if i.parentid == this.id %}
{% for ii in i.itemtags %}
{% assign tagArray = tagArray | append: ii | append: ',' %}
{% endfor %}
{% endif %}
{% endfor %}
{% assign tags = tagArray | split: ',' | uniq | sort %}
<ul class="menu vertical">
{% for t in tags %}
{% assign tagNum = 0 -%}
{% assign tagLink = t | url_encode | prepend: '?tag=' | prepend: this.url %}
{% for n in allPosts.items %}
{% if n.itemtags contains t %}
{% assign tagNum = tagNum | plus: 1 -%}
{% endif %}
{% endfor %}
<li {% if filterValue == t %}class="is-active"{% endif %}>
<a href="{{tagLink}}">
{{t}} ({{tagNum}})
</a>
</li>
{% endfor %}
</ul>
<hr>
<h5>By Month</h5>
{% for i in allPosts.items %}
{% if i.parentid == this.id %}
{% assign dateFilterFormat = i.releasedate | date: '%Y-%m' %}
{% assign dateArray = dateArray | append: dateFilterFormat | append: ',' %}
{% endif %}
{% endfor %}
{% assign dates = dateArray | split: ',' | uniq | sort | reverse %}
<ul class="menu vertical">
{% for d in dates %}
{% assign dateNum = 0 -%}
{% assign dateLink = d | url_encode | prepend: '?date=' | prepend: this.url %}
{% assign dateDisplayFormat = d | date: '%B %Y' %}
{% for n in allPosts.items %}
{% if n.releasedate | date: "%Y-%m" contains d %}
{% assign dateNum = dateNum | plus: 1 -%}
{% endif %}
{% endfor %}
<li {% if filterValue == d %}class="is-active"{% endif %}>
<a href="{{dateLink}}">
{{dateDisplayFormat}} ({{dateNum}})
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
<hr>
</div>
Code: (Post List Layout)
{% capture layout %}
<div class="media-object">
<div class="media-object-section">
<div class="thumbnail">
<a href="{{this['Url']}}"><img src="{{this['Image']}}?height=200&width=200&mode=crop" alt="{{this['Name']}}"></a>
</div>
</div>
<div class="media-object-section main-section">
<h2><a href="{{this['Url']}}">{{this['Name']}}</a></h2>
<p><small>{{this.releasedate | date: "%e %B %Y"}}</small></p>
<p>{{this['Description'] | strip_html | truncatewords: 50}}</p>
</div>
</div>
{% endcapture %}
{% if params.filterSearch != null %}
{% if this.releasedate | date: "%Y-%m" == params.filterSearch %}
{{layout}}
{% endif %}
{% else %}
{{layout}}
{% endif %}