DEV Community

Elise Gaetz Ferguson for Epicosity

Posted on • Originally published at Medium on

2 3

Displaying an RSS Feed in CraftCMS

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 %}
Enter fullscreen mode Exit fullscreen mode

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 %}
Enter fullscreen mode Exit fullscreen mode

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.


SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay