Blog Articles List¶

blog_articles_list module is used to display a tile grid containing blog articles.

Configuration parameters¶

shouldShowPaginationAboveBlogArticleList¶

int if set to 1 an additional small pagination will be rendered above the list.

shouldShowImage¶

int if set to 1 the image linking to the article will be displayed. By default it is set to 1

shouldShowCategory¶

int if set to 1 the category that the article belongs to will be displayed. By default it is set to 1

shouldShowDate¶

int if set to 1 the date of the article creation will be displayed. By default it is set to 1

shouldShowShortContent¶

int if set to 1 the short content of the article will be displayed. By default it is set to 1

shouldShowAuthor¶

int if set to 1 the author of the article will be displayed. By default it is set to 0

shouldShowCommentsQuantity¶

int if set to 1 the quantity of comments under the article will be displayed. By default it is set to 0

shouldShowTags¶

int if set to 1 the tags that the article is associated to will be displayed. By default it is set to 1

Module source code¶

{% from "@macros/masonry_grid.twig" import masonry_grid %}
{% from "@macros/pagination.twig" import pagination %}
{% from "@macros/blog_article_tile.twig" import blog_article_tile %}

{% set blogArticlesList = ObjectApi.getBlogArticles() %}
{% set blogArticlesListSettings = ObjectApi.getBlogSettings() %}

{{ blogArticlesList.setItemCountPerPage(blogArticlesListSettings.articlesPerPage) }}

{%
    set gridSettings = {
        itemsCount: 3,
        phoneItemsCountPerRow: 1,
        smallTabletItemsCountPerRow: 1,
        tabletItemsCountPerRow: 2,
        laptopItemsCountPerRow: 2,
        desktopItemsCountPerRow: 3,
    }
%}

{% set hasMultiplePages = blogArticlesList.pages > 1 %}

{% set hasFirstPageButton = hasMultiplePages and blogArticlesList.page != 1 %}
{% set hasPrevPageButton = hasMultiplePages and blogArticlesList.page != 1 %}
{% set hasNextPageButton = hasMultiplePages and blogArticlesList.page != blogArticlesList.pages %}
{% set hasLastPageButton = hasMultiplePages and blogArticlesList.page != blogArticlesList.pages %}

{%
    set basePaginationOptions = {
        hasFirstPageButton: hasFirstPageButton,
        prevPageButtonOptions: {
            hasPrevPageButton: hasPrevPageButton
        },
        nextPageButtonOptions: {
            hasNextPageButton: hasNextPageButton
        },
        hasLastPageButton: hasLastPageButton
    }
%}

{%
    set topPaginationOptions = basePaginationOptions|merge({
        hasFirstPageButton: false,
        hasLastPageButton: false,
        classNames: ['pagination_top'],
        id: "blog-articles-list-pagination-top-#{moduleInstance}",
        name: "blog-articles-list-pagination-top-#{moduleInstance}"
    })
%}

{%
    set bottomPaginationOptions = basePaginationOptions|merge({
        prevPageButtonOptions: basePaginationOptions.prevPageButtonOptions|merge({
            prevButtonText: translate('Previous')
        }),
        nextPageButtonOptions: basePaginationOptions.nextPageButtonOptions|merge({
            nextButtonText: translate('Next')
        }),
        classNames: ['pagination_bottom'],
        id: "blog-articles-list-pagination-bottom-#{moduleInstance}",
        name: "blog-articles-list-pagination-bottom-#{moduleInstance}"
    })
%}

{%
    set articleSettings  = {
        "shouldShowImage": moduleConfig.shouldShowImage,
        "shouldShowCategory": moduleConfig.shouldShowCategory,
        "shouldShowDate": moduleConfig.shouldShowDate,
        "shouldShowShortContent": moduleConfig.shouldShowShortContent,
        "shouldShowAuthor": moduleConfig.shouldShowAuthor,
        "shouldShowCommentsQuantity": blogArticlesListSettings.isCommentsEnabled and moduleConfig.shouldShowCommentsQuantity,
        "shouldShowTags": moduleConfig.shouldShowTags,
    }
%}

{% set listItemsTemplate %}
    {% for article in blogArticlesList %}
        {{ blog_article_tile(article,articleSettings) }}
    {% endfor %}
{% endset %}

{% if blogArticlesList|length %}
    <article class="blog-articles-list">
        <header class="blog-articles-list__header">
            {% if moduleConfig.shouldShowPaginationAboveBlogArticleList %}
                {{ pagination(blogArticlesList, topPaginationOptions) }}
            {% endif %}
        </header>

        {{
            masonry_grid(listItemsTemplate, {
                grid: gridSettings,
                classNames: 'articles-list-grid'
            })
        }}

        <footer class="blog-articles-list__footer">
            {{ pagination(blogArticlesList, bottomPaginationOptions) }}
        </footer>
    </article>
{% else %}
    <span class="flash-message flash-message__notice">{{ translate("There are currently no blog entries in this category") }}</span>
{% endif %}

Macros reference¶

Used Object Api methods¶

Used styles¶

Module configuration schema¶

```json [ { "state": "unfolded", "label": "General settings", "elements": [ { "type": "infobox", "name": "infobox", "options": { "type": "blank", "message": "#### Related settings in the admin panel%s- changing the number of entries per page in the blog settings", "placeholderValues": [ "\n", "\/admin\/configBlog" ] } }, { "type": "checkbox", "name": "shouldShowPaginationAboveBlogArticleList", "label": "Display additional pagination above the entries list", "defaultValue": 1 } ] }, { "state": "unfolded", "label": "Blog entry tile", "elements": [ { "type": "header", "name": "blogArticleOptions", "label": "For each blog entry, show:", "children": [ { "type": "checkbox", "name": "shouldShowImage", "label": "Main image", "defaultValue": 1 }, { "type": "checkbox", "name": "shouldShowCategory", "label": "Entry category", "defaultValue": 1, "hint": "If more than one category is assigned to the blog entry, only one of them will be displayed." }, { "type": "checkbox", "name": "shouldShowDate", "label": "Entry date", "defaultValue": 1 }, { "type": "checkbox", "name": "shouldShowShortContent", "label": "Abbreviated blog entry content", "defaultValue": 1 }, { "type": "checkbox", "name": "shouldShowAuthor", "label": "Author of the entry", "defaultValue": 0 }, { "type": "checkbox", "name": "shouldShowCommentsQuantity", "label": "Number of comments", "defaultValue": 0 }, { "type": "checkbox", "name": "shouldShowTags", "label": "Tags", "defaultValue": 1 } ] } ] } ]

```