Blog Article¶
blog_article module is used to display a currently viewed blog article and is only available within a blog article page.
Configuration parameters¶
shouldShowShortContent¶
int if set to 1 a short content of the blog article will be displayed on the top of the blog article.
shouldShowAuthor¶
int if set to 1 the author of the blog article will be displayed.
shouldShowArticleDate¶
int if set to 1 the date of publishing a blog article will be displayed.
shouldShowCommentsQuantity¶
int if set to 1 a comments quantity of the current blog article will be displayed. This is also a link that directs to the comments section of the blog article.
shouldShowCategories¶
int if set to 1 a list of categories that the blog article belongs to will be displayed. Each of them is a link directing to the list of blog articles with the selected category.
shouldShowMainImage¶
int if set to 1 the main image of the blog post will be displayed.
Module source code¶
{% from "@macros/icon.twig" import icon %}
{% from "@macros/image.twig" import image %}
{% from "@macros/separator.twig" import separator %}
{% set article = ObjectApi.getBlogArticle(news_id) %}
{% set shopUrls = ObjectApi.getShopUrls() %}
{%
set shouldShowArticleDetails =
moduleConfig.shouldShowAuthor or
moduleConfig.shouldShowArticleDate or
moduleConfig.shouldShowCommentsQuantity or
moduleConfig.shouldShowCategories
%}
{% set hasEditorSettingsAppearance = moduleConfig.moduleAppearance == 'editorSettings' %}
{% set resetCssClass = hasEditorSettingsAppearance ? 'resetcss' : '' %}
<article class="blog-article">
{% if moduleConfig.shouldShowShortContent and article.shortContent %}
<section class="blog-article__short-content {{ resetCssClass }}">{{ article.shortContent|raw }}</section>
{% endif %}
{% if shouldShowArticleDetails %}
<ul class="blog-article-details">
{% if moduleConfig.shouldShowAuthor and article.author %}
<li class="blog-article-details__item">
{{ translate('author') }}: <span class="blog-article-details__detail">{{ article.author }}</span>
</li>
<li class="blog-article-details__item">
{{
separator(
{
horizontal: true,
size: 'm',
classNames: 'hidden-xs-only'
}
)
}}
</li>
{% endif %}
{% if moduleConfig.shouldShowArticleDate and article.createdAt %}
<li class="blog-article-details__item">{{ translate('added') }}: {{ article.createdAt }}</li>
<li class="blog-article-details__item">
{{
separator(
{
horizontal: true,
size: 'm',
classNames: 'hidden-xs-only'
}
)
}}
</li>
{% endif %}
{% if moduleConfig.shouldShowCommentsQuantity %}
<li class="blog-article-details__item">
<h-scroll-to to="blog-article-comments" class="blog-article-details__link">
{{
icon('icon-message-square', {
classNames: ['blog-article-details__icon']
})
}}
<span class="blog-article-details__detail">{{ article.comments|length }}</span>
{{ translate('comments') }}
</h-scroll-to>
</li>
<li class="blog-article-details__item">
{{
separator(
{
horizontal: true,
size: 'm',
classNames: 'hidden-xs-only'
}
)
}}
</li>
{% endif %}
{% if moduleConfig.shouldShowCategories and article.categories|length > 0 %}
<li class="blog-article-details__item">
{{ translate('in category') }}
{% for category in article.categories %}
<a href="{{ category.url }}" class="blog-article-details__detail blog-article-details__link">
{{ category.name }}
</a>
{% if not loop.last %}, {% endif %}
{% endfor %}
</li>
{% endif %}
</ul>
{% endif %}
{% if moduleConfig.shouldShowMainImage and article.image %}
{{
image({
img: {
src: article.image,
class: "blog-article__image",
alt: translate('Go to entry'),
fetchpriority: 'high'
}
})
}}
{% endif %}
<section class="blog-article__content grid__row grid__row_xs-hcenter">
<div class="grid__col grid__col_lg-8">
<article class="{{ resetCssClass }}">
{{ article.content|raw }}
</article>
</div>
</section>
</article>
{% set articleCreationDate = article.createdAt|date('Y-m-d\\Tg:i:sP') %}
<script type="application/ld+json">
{
"@context": [
"http://schema.org/",
{ "@base": "{{ shopUrls.mainPageUrl.absolute }}" }
],
"@id": "{{ article.url.relative }}",
"@type": "Article",
"articleBody": "{{ article.content | striptags }}",
"author": [{
"@type": "Person",
"name": "{{ article.author }}"
}],
"datePublished": "{{ articleCreationDate }}",
"dateCreated": "{{ articleCreationDate }}",
"image": ["{{ article.image }}"],
"abstract": "{{ article.shortContent | striptags }}",
"description": "{{ article.content | striptags }}"
}
</script>
The module uses JSON-LD and Microdata from schema.org to optimize search results in browsers.
Macros reference¶
Used webcomponents¶
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 phrases in [translations](%s)%s- adding and editing blog entries in the [List of entries](%s)",
"placeholderValues": ["\n", "\/admin\/configLanguages\/list", "\n", "\/admin\/news\/list"]
}
},
{
"type": "header",
"name": "blog_options",
"label": "For each blog article, show:",
"children": [
{
"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": "shouldShowArticleDate",
"label": "Entry date",
"defaultValue": 1
},
{
"type": "checkbox",
"name": "shouldShowCommentsQuantity",
"label": "Number of comments",
"defaultValue": 0
},
{
"type": "checkbox",
"name": "shouldShowCategories",
"label": "Entry categories",
"defaultValue": 1
},
{
"type": "checkbox",
"name": "shouldShowMainImage",
"label": "Main image",
"defaultValue": 1
}
]
},
{
"type": "radio",
"name": "moduleAppearance",
"label": "The module content appearance is determined by:",
"defaultValue": "editorSettings",
"options": {
"radioOptions": [
{
"key": "editorSettings",
"label": "only by the settings from the text editor"
},
{
"key": "editorAndSkinSettings",
"label": "text editor and store theme style",
"hint": "If you do not change the appearance of the content (e.g. text size and color) in the text editor, the module will use the store theme styles."
}
]
}
}
]
}
]