Blog Articles List¶

Availability:

Blog list page

Blog categories list page

Blog tags list page

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,
        pagePathSegment: '/page'
    }
%}

{%
    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 fr-view'
            })
        }}

        <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¶

 [
     {
         "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](%s)",
                     "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
                     }
                 ]
             }
         ]
     }
 ]