CraftCMS doesnβt appear to have a built-in way to display RSS feeds and more often than not, clients want to display their recent or related blog posts on their main website.
The first thing we did to tackle this challenge was install the Craft RSS plugin by Guilty AS.
The GitHub page for the plugin has an example of how to display the RSS feed in your templates and itβs pretty straight forward.
{% set blogFeed = craft.rss.loadRss(βhttps://helgesverre.com/blog/feed") %}
{% if blogFeed %}
<h1>{{ blogFeed.title }}</h1>
<a href=β{{ blogFeed.link }}β>{{ blogFeed.link }}</a>
<ul>
{% for post in blogFeed.item %}
<li><a href=β{{ post.link }}β>{{ post.title }} β {{ post.pubDate }}</a></li>
{% endfor %}
</ul>
{% endif %}
Just plug in your RSS Feed URL and off you go.
Naturally youβll want to arrange the results of the feed in a way that best matches your siteβs design.
You are might want to limit the number of posts you are showing. To do that we set a counter = 0 at the beginning of the block (line 2 below). Then before each βfor post in blogFeed.itemβ loop we check if the counter is less than the number of posts we want to show (line 9). Right before the end of the loop then increment the counter with a +1 (line 17).
{% set blogFeed = craft.rss.loadRss(block.linkUrl) %}
{% set counter = 0 %}
{% if blogFeed %}
<h1>{{ blogFeed.title }}</h1>
<a href=β{{ blogFeed.link }}β>{{ blogFeed.link }}</a>
<ul>
{% if counter < 3 %}
{% for post in blogFeed.item %}
<li>
<a href=β{{ post.link }}β>{{ post.title }} β {{ post.pubDate }}</a><br/>
<span>{{ post.description | raw }}</span>
</li>
{% set counter = counter + 1 %}
{% endfor %}
{% endif %}
</ul>
{% endif %}
If you want to make this a little more flexible you could create a field in Craft to take in the URL of the blog feed, either per entry or as a global.
If you really want to get fancy you could create several different type of display options (card, list, etc) and let the user choose how they want to display the information.
ETA: I recently came back across this article while adding a feed to a clientβs site. Turns out the code was a little incorrect and very annoying to not be able to copy and paste so Iβm fixing those issues. You may also have to look at your feed directly to figure out what things you can pull in, in this example we had to pull in the full description as raw text rather than html in order to get the image and excerpt.
Top comments (0)