article¶

The blog_article_tile macro is used to render a single blog article tile.

Definition¶

{% blog_article_tile(blogArticle, options) %}

Input parameters¶

blogArticle¶

BlogArticle BlogArticle object represents a single blog article in the storefront.

options¶

object represents an object of configuration options for the article macro which consists of the following fields

Option key	Type	Default	Required	Description
options.className	`string`	""	no	additional classes that will be added to the article element
options.shouldShowImage	`boolean`	false	no	if `true` blog article image is displayed
options.shouldShowDate	`boolean`	false	no	if `true` blog article created date is displayed
options.shouldShowCategory	`boolean`	false	no	if `true` blog article category is displayed
options.shouldShowShortContent	`boolean`	false	no	if `true` blog article short content is displayed
options.shouldShowTags	`boolean`	false	no	if `true` blog article tags are displayed
options.shouldShowAuthor	`boolean`	false	no	if `true` blog article short author is displayed
options.shouldShowCommentsQuantity	`boolean`	false	no	if `true` blog article number of comments are displayed

Example¶

Renders single blog article tile.

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

{% set blogArticle = ObjectApi.getBlogArticle(1) %}

{{
    blog_article_tile(blogArticle, {
        className: 'article__special'
        shouldShowImage: true
        shouldShowDate: true
        shouldShowCategory: false
        shouldShowShortContent: true
        shouldShowTags: true
        shouldShowAuthor: false
        shouldShowCommentsQuantity: true
    })
}}

Example¶

Renders list of blog article tiles

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

{% set blogArticles = ObjectApi.getBlogArticles() %}

<div class="tile-grid tile-grid_xs-1 tile-grid_sm-1 tile-grid_md-2 tile-grid_lg-3 tile-grid_xxl-3">
    {% for blogArticle in blogArticles %}
        {{
            blog_article_tile(blogArticle, {
                className: 'article__special'
                shouldShowImage: true
                shouldShowDate: true
                shouldShowCategory: false
                shouldShowShortContent: true
                shouldShowTags: true
                shouldShowAuthor: false
                shouldShowCommentsQuantity: true
            })
        }}
    {% endfor %}
</div>

Macro source code¶

{% macro blog_article_tile(blogArticle, options) %}
    {% from "@macros/image.twig" import image %}
    {% from "@macros/icon.twig" import icon %}

    {% set shouldShowImage = options.shouldShowImage and blogArticle.image %}

    <article
        class="
            article
            masonry-grid__item
            {{ options.className }}
            {% if not blogArticle.tags|length > 0 %} article_no-tags {% endif %}
        "
    >
        {% if shouldShowImage %}
            <a href="{{ blogArticle.url }}" aria-label="{{ translate('Go to entry') }}">
                {{
                    image({
                        img: {
                            src: blogArticle.image,
                            class: "article__image",
                            loading: 'lazy',
                            alt: translate('Go to entry')
                        }
                    })
                }}
            </a>
        {% endif %}

        <section
            class="
                article__main-section
                {% if not options.shouldShowTags %} article__main-section_full-padding {% endif %}
                {% if not shouldShowImage %} article__main-section_no-image {% endif %}
            "
        >
            <header class="article__header">
                {% if options.shouldShowCategory and blogArticle.categories|length > 0 %}
                    <a
                        href="{{ blogArticle.categories[0].url }}"
                        class="article__category overline mb-xs-0"
                    >
                        {{ blogArticle.categories[0].name|slice(0, 30) }}
                    </a>
                {% endif %}

                {% if options.shouldShowDate %}
                    <span class="article__date">{{ blogArticle.createdAt }}</span>
                {% endif %}
            </header>

            <a href="{{ blogArticle.url }}" class="article__title h6">{{ blogArticle.name }}</a>

            {% if options.shouldShowShortContent %}
                <div class="article__content">{{ blogArticle.shortContent|raw }}</div>
            {% endif %}

            <a href="{{ blogArticle.url }}" class="article__link link">{{ translate('Read more') }}</a>

            <div class="article__info">
                {% if options.shouldShowAuthor %}
                    <span class="article__author">{{ blogArticle.author|slice(0, 30) }}</span>
                {% endif %}

                {% if options.shouldShowCommentsQuantity %}
                    <a href="{{ blogArticle.url }}#comments-section" class="article-comments">
                        <span class="article-comments__quantity">{{ blogArticle.comments|length }}</span>
                        {{
                            icon('icon-message-square', {
                                classNames: ['article-comments__icon']
                            })
                        }}
                    </a>
                {% endif %}
            </div>
        </section>

        {% if options.shouldShowTags and blogArticle.tags|length > 0 %}
            <div class="article-tags">
                <div class="article-tags__content">
                    {% for tag in blogArticle.tags|slice(0, 10) %}
                        <a href="{{ tag.url }}" class="article-tags__tag tag tag_interactive">{{ tag.name }}</a>
                    {% endfor %}
                <div>
            </div>
        {% endif %}
    </article>
{% endmacro %}