topic Re: RSS feed custom html in CMS Development

RSS feed custom html

Skott — Fri, 21 Aug 2020 09:17:48 GMT

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

Re: RSS feed custom html

Anton — Sat, 22 Aug 2020 12:15:05 GMT

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

Re: RSS feed custom html

Skott — Mon, 24 Aug 2020 10:35:44 GMT

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.

Re: RSS feed custom html

fawadsabri — Mon, 01 Feb 2021 10:02:10 GMT

@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.

Re: RSS feed custom html

Skott — Mon, 01 Feb 2021 10:44:53 GMT

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>

Re: RSS feed custom html

fawadsabri — Mon, 01 Feb 2021 12:26:23 GMT

Hi Skott,

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

Re: RSS feed custom html

caitlink — Tue, 23 Feb 2021 20:20:43 GMT

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

Re: RSS feed custom html

fawadsabri — Wed, 24 Feb 2021 07:32:33 GMT

@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.

Re: RSS feed custom html

caitlink — Wed, 24 Feb 2021 16:16:08 GMT

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

Re: RSS feed custom html

fawadsabri — Thu, 25 Feb 2021 11:39:52 GMT

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.

Re: RSS feed custom html

caitlink — Fri, 26 Feb 2021 16:30:23 GMT

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