title = "Blog Category"
url = "/blog/category/:slug/:page?"
layout = "blog"
is_hidden = 0

[viewBag]
localeUrl[gr] = "/blog-category"

[blogPosts]
pageNumber = "{{ :page }}"
categoryFilter = "{{ :slug }}"
postsPerPage = 6
noPostsMessage = "No posts found"
sortOrder = "published_at desc"
categoryPage = "blog/blog-category"
postPage = "blog/blog-post"

[blogCategories]
slug = "{{ :slug }}"
displayEmpty = 0
categoryPage = "blog/blog-category"

[searchInput blogSearchInput]
useAutoComplete = 1
autoCompleteResultCount = 5
showProviderBadge = 1
searchPage = "blog/search-posts.htm"
==
<?php
function onLoadMore() {
    // get the page number
    $pageNumber = Input::get('page') + 1;
    // access the Posts component with alias blogPosts:
    // set the page number and prepare the data
    $this->components['blogPosts']->setProperty('pageNumber', $pageNumber);
    $this->components['blogPosts']->onRun();
    if ($pageNumber < $this->components['blogPosts']->posts->lastPage()) {
        // for simplicity, we generate html, but in principle you can make a separate parcel for the button
        $more_link = '<a data-request="onLoadMore" data-request-data="page: ' . $pageNumber . '" href="#" class="btn btn-lg btn-outline-default btn-rounded m-auto">Load More</a>';
    } else {
        // if we reached the last page, the button is no longer needed
        $more_link = '';
    }
    return [
        // if the @ is in front of the selector, the new content will be added to the end, rather than replacing the old
        '@#all-posts' => $this->components['blogPosts']->renderPartial('blog/posts'),
        '#load-more' => $more_link,
    ];
}
?>
==
<!-- Page Header -->
{% if category.featured_images.count > 0 and this.theme.blog_posts_pageheader == 'category' %}
{% partial "blog/categoryheader" %}
{% else %}
{% partial "blog/pageheader" %}
{% endif %}
<!-- Page Header -->

{% set size_1 = this.theme.blog_posts_size %}
{% set size_2 = 12 - size_1 %}
<div class="posts py-24 {{ this.theme.blog_posts_bg }}">
    <div class="{{ this.theme.settings_layout_container }}">
        <!-- Row  -->
        <div class="row justify-content-center">
            <!-- Column  -->
            <div class="col-md-{{ size_1 }} {{ this.theme.blog_posts_sidebar == 'order-1' ? 'order-2' : 'order-1' }}">
                {% if this.theme.blog_posts_style == 'style1' or this.theme.blog_posts_style == 'style2' %}
                <div class="row" {% if this.theme.blog_posts_loadmore %}id="all-posts"{% endif %}>
                {% endif %}
                {% if this.theme.blog_posts_style == 'style3' %}
                <div class="col-md-12">
                <div class="card-columns {{ this.theme.blog_posts_card_column }}" {% if this.theme.blog_posts_loadmore %}id="all-posts"{% endif %} style="-webkit-column-gap:{{ this.theme.blog_posts_card_gap }}; -moz-column-gap:{{ this.theme.blog_posts_card_gap }}; column-gap:{{ this.theme.blog_posts_card_gap }};">
                {% endif %}

                {% partial "blog/posts" %}

                {% if this.theme.blog_posts_style == 'style1' or this.theme.blog_posts_style == 'style2' %}</div>{% endif %}
                {% if this.theme.blog_posts_style == 'style3' %}</div></div>{% endif %}
                {% if this.theme.blog_posts_loadmore %}
                <div class="d-flex my-10" id="load-more">
                    <a data-request="onLoadMore" data-request-data="page: 1" href="#" class="btn btn-lg btn-outline-default btn-rounded m-auto">Load More</a>
                </div>
                {% else %}
                {% partial "blog/pagination" posts = blogPosts.posts %}
                {% endif %}
                {% if this.theme.blog_post_disqus %}
                <script id="dsq-count-scr" src="//{{ this.theme.blog_post_disqus_url }}/count.js" async></script>
                {% endif %}
            </div>
            <!-- Column  -->
            {% if (size_1 != 12) and (this.theme.blog_posts_sidebar is not empty) %}
            <!-- Column  -->
            <div class="col-md-{{ size_2 }} {{ this.theme.blog_posts_sidebar }}">
                {% for fields in this.theme.blog_widgets %}
                {% if fields._group == 'blog_widgets_search' %}{% partial "blog/search" %}{% endif %}
                {% if fields._group == 'blog_widgets_categories' %}{% partial "blog/categories" %}{% endif %}
                {% if fields._group == 'blog_widgets_latest' %}{% partial "blog/latest" %}{% endif %}
                {% if fields._group == 'blog_widgets_subscribe' %}{% partial "blog/subscribe" %}{% endif %}
                {% if fields._group == 'blog_widgets_gallery' %}{% partial "blog/gallery" %}{% endif %}
                {% endfor %}
            </div>
            <!-- Column  -->
            {% endif %}
        </div>
        <!-- Row  -->
    </div>
</div>