When you create blog posts in Magento you add the post content, tags, categories and fill out the display setting, etc. However, how blog posts look on the frontend is defined by the post view settings. Since Magento 2 Blog extension comes with quite a few, today we'll cover each in detail.
To configure the blog post page elements, navigate to Stores > Configuration > Magefan Extensions > Blog > Post Page (Post View).
Posts From The Same Category
Choose whether to Display Posts From the Same Category on the blog post page, select the Template and set the Number of Posts to display.
And this is how the posts from the same category are displayed on the storefront:
Related Posts
- Enable the Display Related Posts option.
- Select the related posts Template. You can Use System Setting, Grid or Carousel Slider template.
- Set the Number of Posts you want to be displayed.
- Enable Auto Related Posts if you want related posts to be generated automatically.
Note: auto-related blog posts' grid and slider templates are available in Blog Plus or Extra only.
If you've enabled the automatic generation of related posts there is one more option you need to fill out.
This is how Related Posts look on the storefront:
Latest Posts by Author
In this section, you choose whether to Display Latest Posts By Author and set the Number of Posts if you enable this option. You can also choose the Template for this section: System Settings, Grid, or Carousel Slider.
The Latest Posts by Author are displayed just below the author's block, which you need to configure separately.
Related Products
- Choose whether to Display Related Products or not.
Note: once you add related products to the blog post, the blog post will appear in the Related Posts section on the product page.
- Select the Template for the related products' block.
- Set the Number of Products you want to be displayed.
- Enable Auto Related Products.
Same as with related posts, if you choose to enable auto-related blog products there will appear a new option.
This is the Related Products section on the storefront:
Note: in the blog sidebar settings you can also choose to display related products in the sidebar.
Comments
In Magento 2 Blog extension there are 3 kinds of comments available: Magefan, Facebook and Disqus Blog Comments.
Each type of comment has different options and is displayed differently on the storefront.
Previous and Next Post Links
Here you choose whether to Display Previous&Next Post Links on your blog post page. You can disable this option, but it is a great way to increase user engagement with internal links.
This is how the Previous and Next post links are displayed on the storefront:
Views Count
Choose to Calculate&Display Views Count to see which blog posts are the most popular. It is used for generating blog popular posts.
This is the View Count on the storefront:
Reading Time
Enable the average Reading Time option to show your customers how long it takes to reach a blog post.
And that's how it is displayed on the frontend:
It's important to note that Views Count and Reading Time are calculated by the extension automatically. However, if you want to set your own values for these two options, you can do so in the blog post Display Settings.
Reading Progress Bar
Finally, enable the Reading Progress Bar. Then you can also tweak the following settings for it.
- Position — Top(Horizontal), Bottom(Horizontal), Left(Vertical), Right(Vertical)
- Width/Height
- Color
- Opacity
That's how a Left(Vertical) reading progress bar will be displayed on the frontend:
Once you finish, don't forget to Save the settings go to the storefront and check your blog post page view. But, that's not it.
