How do I access blog-listings data from a Website Page?

Developer Support CMS Development
1

I’ve cloned the HubSpot’s boilerplate “blog-listings” module from this file on Github. Then I updated the template type so this module is accessible both in Blog Listings, and Pages:

template-type.jpg
template-type.jpg347×293 15.8 KB

This module uses a for-loop to iterate through the listings

{% for content in contents %}

So I’ve created a simple output of “contents” to see the data that’s available.

<section class="blog-index">
 <h3>Below is the blog content array:</h3>
 <p>{{ contents }}</p>
</section>

When I add this module to my “Blog Listings Page”, the contents are populated, and the loop does execute. However, when I add this module to any “Website Page”, for example my homepage, the contents are empty, and the loop does not execute.

<!-- Output on blog-index page -->
<section class="blog-index">
 <h3>Below is the blog content array:</h3>
 <p>[BlogPost XXXXXXXXXX Blog Title]</p>
</section>

<!-- Output on homepage -->
<section class="blog-index">
 <h3>Below is the blog content array:</h3>
 <p></p>
</section>

Is there a way to access the blog-listings data from any standard “Website Page”?

2

Hi @marquizzo,

this is because

{% for content in contents %}

works only in combination with

{% if is_listing_view %}

{% endif %}

so your blog listing will only work in this combination

{ if is_listing_view %}
...
{% for content in contents %}
...
{% endfor %}
...
{% endif %}

and therefore not working on website pages.

To get informations from a blog to a website you have to write it a bit different. I recommend to use the blog_recent_posts function and create a custom module for that so you can simply drag&drop it to a place where ever you want to.

Here’s a basic code for a module

{% set rec_posts = blog_recent_posts("default", 5) %} {# change the number to the amount of posts you like to show #}
{% for rec_post in rec_posts %}
 <img src="{{rec_post.featured_image" alt="{{ rec_post.featured_image_alt_text}}"> 
<h3 class="post-title">{{ rec_post.name }}</h3>
<p class="post-excrept">{{rec_post.post_body|striptags|truncate(200, "...", false)</p>
<a href="{{rec_post.absolute_url }}" class="btn primaryBtn">read more</a>
{% endfor %}

You can modify this to what ever you want.

You can add a blog selector option if you have multiple blogs, a number field to change the amount per module instance and change the code like to something like this

{% set rec_posts = blog_recent_posts("module.blog_selector", {{ module.amount }}) %}

If you want to have the option to change the more button per instance or add translations you could add a text-field(not rich-text) like this

{% set rec_posts = blog_recent_posts("default", 5) %} {# change the number to the amount of posts you like to show #}
{% for rec_post in rec_posts %}
 <img src="{{rec_post.featured_image" alt="{{ rec_post.featured_image_alt_text}}"> 
<h3 class="post-title">{{ rec_post.name }}</h3>
<p class="post-excrept">{{rec_post.post_body|striptags|truncate(200, "...", false)</p>
<a href="{{rec_post.absolute_url }}" class="btn primaryBtn">{{ module.read_more_text }}</a>
{% endfor %}

hope that helps

best,

Anton

3

Excellent! It looks like blog_recent_posts is the magic function I was looking for. Thank you!

4

this code need some changes, need to add closing braces }}, thanks for your help!