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 %}