DEMO Custom Blog
Posts filtered by: blog post
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 %}