HA – Fix for images-issue with FeedParser / custom:list-card

I see lots of people struggling with showing images in RSS feeds.
Some posts on different HA forums, suggest changes in sensor.py in /custom_components/feedparser/
but this seems no longer to work.

The issue is the way those images are placed inside the RSS feed:

<enclosure url="https://static.gva.be/Assets/Images_Upload/2023/01/07/0fa6c59b-5dca-45ce-a8ed-a5291fc15506.png" type="image/jpeg" />

Because of the type=”image/jpeg”, feedparser puts this in a sub-key links / href.
The trick is to make this data available inside a “regular” item key, like this:

<picture_a>https://static.gva.be/Assets/Images_Upload/2023/01/07/0fa6c59b-5dca-45ce-a8ed-a5291fc15506.png</picture_a>

Luckely, this can be done very easy 🙂
What we need to do:
1. Download the RSS feed + Replace the json keys (within a script that will be available in HA)
2. Use this downloaded/modified RSS feed as a source for the feedparser
3. Make the image show up in custom:list-card
4. Create an automation that updates RSS feed on a regular interval.

If you follow this step-by-step tutorial, your images will appear in your HA dashboard.

1. Download the RSS feed + Replace the json keys (within a script that will be available in HA)
I assume you all use HA in linux. (on a RPI or Odroid N2+, it is Linux for sure !)
When you run HA on a windows machine, you need to download and install curl and sed first !
Check these links for more info / downloads:
https://curl.se/windows/
https://stedolan.github.io/jq/download/
We are going to create a shell script (or a batch-file in windows), after this,
we are going to call this script from within a shell command in HA.
(check out https://www.home-assistant.io/integrations/shell_command/ )
So, in linux, create a file called rssfeed.sh in your /config/www folder on you HA machine.
It consists of 3 lines/commands. You can add multiple of these lines into one script.

curl RSSFEED_URL -o /config/www/feed.rss

sed -i 's!<enclosure url="!<picture_a>!g' /config/www/feed.rss

sed -i 's!" type="image/jpeg" />!</picture_a>!g' /config/www/feed.rss

The first command, downloads the actual RSS feed. RSS_FEED is the URL of the RSS feed, including http:// or https:// /config/www/feed.rss is the location and filename, where the RSS feed needs to be downloaded.
This needs to be in your WWW-folder (or a subfolder), because this file needs to be accesible later via your HA webserver.

The second command, replace the <enclosure URL=” with <picture> in the feed.rss file.
If your tag that you need to replace is different, you can modify this. Its’ everything between
the first and second exlamation mark. The <picture_a> is the name that you will use, later on in custom:list-card,
to identify the image. You can name is as you like (between the second and third exclamation mark),
but don’t use picture / summary / pubdata / title / summary_detail (and so on) as a name. Those are reserved for feedparser !

The third command, replaces the type=”image/jpeg” /> with </picture_a>
the part with type in it, may be different for you. For changing this, the same rules apply as for the second command.
if you changed the <picture_a> in the second command, then you also need to replace the </picture_a>
with the same name. (don’t forget the / between the < and the name)

You need to make this script “executable”, do this by typing chmod +x rssfeed.sh (rssfeed.sh, need to match the location and name that you gave to the script)
Now, every time that you call this script, the RSS feed will be downloaded and converted to a file that HA will be able to interprete your images.

To have this script available in HA, you need to add a shell command in your configuration.yaml
You need to reboot HA, after adding this shell command to your configration.yaml, otherwise HA will not “see” this script.

shell_command:
  rss_update: '/config/www/rssfeed.sh'

• rss_update is the name on which you will find a service to call this script in HA.
• /config/www/rssfeed.sh is the location and name of the script that we created earlier.

2. Use this downloaded/modified RSS feed as a source for the feedparser
Again in configuration.yaml , you need to add a section to integrate the RSS feed into HA.
(Also check the information about the newer feedreader:
https://www.home-assistant.io/integrations/feedreader/

sensor:
  - platform: feedparser
    name: my_rss_feed
    feed_url: "http://home-assistant.local:8123/local/feed.rss"
    scan_interval:
      hours: 1

the feed_url needs to correspond with your HA-instance, and the location and name of the RSS feed (created in previous step).
/local/ corresponds with your /config/www/ folder, and feed.rss is the name you used in the script,
on the line with the curl command. home-assistant.local can be replaced by your IP address of you HA instance.
Make sure http or https matches your HA settings.
Reboot HA (again) after making these changes in configuration.yaml .
After this, you will see a sensor in entities, with the name that you gave this sensor. (my_rss_feed in the above example)
When you look at this sensor, it should have attributes that contain all RSS feed data. Per item, you should see an attribute with the same name that you gave, for the replacement of the image key.
( picture_a in the above example )

3. Make the image show up in custom:list-card

Next, you can use custom:list-card, to show the RSS feed within HA on a dashboard.
Check out https://github.com/iantrich/list-card
Once installed, you can use the following YAML as a card:

type: custom:list-card
title: ' '
entity: sensor.my_rss_feed
row_limit: 25
feed_attribute: entries
columns:
  - title: 'My Images'
    type: image
    field: picture_a
    width: 200px;
    height: 150px;
  - title: 'content'
    field: summary

You should now have the first 25 items listed, colum picture_a contains the image.
Use width & height to how big you would like your picture to show up.
You can use card_mod to give the RSS feed some styling.
Check it out at https://github.com/thomasloven/lovelace-card-mod
Here is an example of my card_mod for this custom:list_card

card_mod:
  style: |
    ha-card {
      color: #FFFFFF;
      line-height: 26px;
      background: url('/local/photos/foto_nieuws_buitenland.png');
      background-size: cover;
      #background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      font-size: 20px;
      overflow: auto;   
      height: 915px;
      width: 1895px;
      border: 0px solid rgb(255,255,255,0%);
      background-color: rgb(255,255,255,0%);

And here is a screenshot on how it looks (inside my HA, on top is my “general” interface, and on the bottom of the screenshot are 7 buttons to select what RSS feed is shown.

4. Create an automation that updates RSS feed on a regular interval.
Because we load the RSS feed (from the internet), and load the modified RSS feed from your HA server itself, the RSS feed would not refresh. To solve this, you need to create an automation that refreshes the RSS feed on a regular interval. (every half an hour or so, seems a good idea)
Add the following automation to your automations.yaml (or create an automation via the HA UI)

alias: "Automation - RSS update (every 30 minutes)"
description: ""
trigger:
  - platform: time_pattern
    minutes: /30
condition: []
action:
  - service: shell_command.rss_update
    data: {}
mode: single

• Change the alias to a name that you want to show up in the automations list.
• minutes: /30 means it needs to trigger every 30 minutes.
• rss_update is the name we gave the shell command.

Enjoy viewing images in RSS feeds 🙂