DEMO Custom Blog

Sample Post One

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

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

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