RSS feed custom html

[Skott]

Hi,

I’m building a website in Hubspot and want to show the 4 latest blog enttries on the frontpage of the site. As I understand it’s only possible using the RSS feed to show them. Which is fine, but the html/markup is not exactly what I want. Is it possible to make your own html/template for it? Alternatively, I can put my own css on top of what I get from the default RSS markup, but really want to control and work with my own markup
This is the default rss feed i get

And this is kind of what I want

[Anton]

Hi @Skott,

is it a HubSpot or external blog?
Are you “staying” in the HubSpot ecosystem like HubSpot Blog on a HubSpot page?

If you’re completly in the HubSpot ecosystem you can create a so called custom module with the “blog_recent_posts” function which will be handling the layout and information of the latest blogs.

best,

Anton

[Skott]

Hi Anton, thanks. This is exactly what I need. I’m building everything inside HubSpot. I created a new custom module, and got a list of latest blog post titles

The next thing then, is an image url and link url to the post itselfe, aaand a small snippet of the text from the blog post. I can’t seem to find the right code for those.

[fawadsabri]

@Skott Where you able to figure this out? I have also created a custom module, but i am not able to show the posts in columns. They are still showing in rows.

[Skott]

Hi fawadsabri,

This is the code I used. To show it in columns, i use col-md-3 class on the div which have the information. resulting in this:

{% set rec_posts = blog_recent_posts(‘default’, 4) %}
<div class=“news-listing fade-up-single”>
{% for rec_post in rec_posts %}
<div class=“col-md-3”>
<a href=“{{ rec_post.absolute_url }}” class=“news-featured-image”>
{% if rec_post.featured_image %}<img alt=“{{ rec_post.featured_image_alt_text }}” src=“{{ rec_post.featured_image }}”>{% endif %}
</a>
<a href=“{{ rec_post.absolute_url }}” class=“news-title”><span>{{ rec_post.name }}</span></a>
<div class=“news-date”>
{{ rec_post.publish_date|datetimeformat(‘%B %d, %Y’) }}
</div>

<div class=“news-text”>
{{ rec_post.post_list_content|truncatehtml(200, ‘…’, false)}}
</div>
</div>
{% endfor %}
</div>

[fawadsabri]

Hi Skott,

Thank you so much for the quick reply. I really did help. Now it works perfectly. Thanks alot.

[caitlink]

Hi Skott, thanks for providing this solution. How would you allow the content editor to show only certain blog posts by tag?

[fawadsabri]

@caitlink i used this code to reference the two fields (modules) which will be shown in content editor. One is for selection of blog type (in my case English or German) and second one is the for specifying the tag.

{% set tag_posts = blog_recent_tag_posts (module.content_group_id, module.blog_post_tag, limit=4) %}

In the module.content_group_id you have to add a blog selector field.

[caitlink]

Do you mind sharing a screenshot of your code and fields for the whole module?

[fawadsabri]

Here is how the code is:

{% set tag_posts = blog_recent_tag_posts (module.content_group_id, module.blog_post_tag, limit=4) %}
<div class=“flex flex-wrap -mx-3 p-3”>
{% for tag_post in tag_posts %}
<div class=“w-full sm:w-1/2 md:w-1/3 lg:w-1/4 px-3 mb-6 md:mb-12 blog”>
<div class=“h-full flex flex-col”>
<div class=“w-full bg-blun”>
<a href=“{{tag_post.absolute_url}}”>
<img loading=“lazy” class=“resonsive-item object cover object-center” src=“{{tag_post.featured_image}}” alt=“{{ post.post_list_summary_featured_image }}”/></a>
</div>
<div class=“w-full my-5”>
<h4 class=“font-semibold mb-4”><a href=“{{tag_post.absolute_url}}”>{{tag_post.name}}</a></h4>
<p class=“richttext text-hyphenated”>{{tag_post.post_summary|truncatehtml(module.limit_to_chars)}}</p>
</div>
<div class=“w-full mt-auto mb-3”>
<a class=“font-semibold hover:underline” href=“{{tag_post.absolute_url}}”>{{ module.more_button_label }}</a>
</div>
<div class=“h-2 w-full bg-dark-blun-300”></div>
</div>
</div>
{% endfor %}
</div>

a screenshot from the Modules:

I have also added More Button Label - to change it for different languages. Hope this helps.

[caitlink]

Thanks! I was finally able to get this to work. Really appreciate your quick response.