CMS Development

Skott
Member

RSS feed custom html

SOLVE

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

test1.png

 

And this is kind of what I want

test2.png

 

0 Upvotes
1 Accepted solution
Anton
Solution
Recognized Expert

RSS feed custom html

SOLVE

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

Anton Bujanowski Signature

View solution in original post

10 Replies 10
fawadsabri
Contributor

RSS feed custom html

SOLVE

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: 

 

Screenshot 2021-02-25 at 12.39.11.png

 

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

0 Upvotes
caitlink
Participant | Platinum Partner
Participant | Platinum Partner

RSS feed custom html

SOLVE

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

0 Upvotes
Anton
Solution
Recognized Expert

RSS feed custom html

SOLVE

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

Anton Bujanowski Signature
Skott
Member

RSS feed custom html

SOLVE

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.

 

 

0 Upvotes
fawadsabri
Contributor

RSS feed custom html

SOLVE

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

0 Upvotes
Skott
Member

RSS feed custom html

SOLVE

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:

columns.jpg


{% 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>

caitlink
Participant | Platinum Partner
Participant | Platinum Partner

RSS feed custom html

SOLVE

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

0 Upvotes
fawadsabri
Contributor

RSS feed custom html

SOLVE

@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
Participant | Platinum Partner
Participant | Platinum Partner

RSS feed custom html

SOLVE

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

fawadsabri
Contributor

RSS feed custom html

SOLVE

Hi Skott, 

 

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