📰 Lovelace: RSS Feed Parser Plugin/List Card

Share your Projects! Dashboards & Frontend
329

For those who would like to see the tweaks I made:

Config File

sensor:
  - platform: feedparser
    name: CTV News
    date_format: "%a, %d %b %Y %H:%M:%S %Z"
    feed_url: "https://www.ctvnews.ca/rss/ctvnews-ca-top-stories-public-rss-1.822009"
    inclusions: title
    exclusions: []
    scan_interval:
      minutes: 15
    show_topn: 20
  - platform: feedparser
    name: Google News
    date_format: "%a, %d %b %Y %H:%M:%S %Z"
    feed_url: "https://www.google.ca/alerts/feeds/00028625660956993271/15040452229692133315"
    inclusions: title
    exclusions: []
    scan_interval:
      minutes: 15
    show_topn: 20

  ## CTV NEWS

  - platform: template
    sensors:
      ctv_news_attributes_0:
        friendly_name: "CTV News Content 0"
        value_template: >
          {{ states.sensor.ctv_news.attributes.entries[0].title }}

  - platform: template
    sensors:
      ctv_news_attributes_1:
        friendly_name: "CTV News Content 1"
        value_template: >
          {{ states.sensor.ctv_news.attributes.entries[1].title }}

  - platform: template
    sensors:
      ctv_news_attributes_2:
        friendly_name: "CTV News Content 2"
        value_template: >
          {{ states.sensor.ctv_news.attributes.entries[2].title }}

  - platform: template
    sensors:
      ctv_news_attributes_3:
        friendly_name: "CTV News Content 3"
        value_template: >
          {{ states.sensor.ctv_news.attributes.entries[3].title }}

  - platform: template
    sensors:
      ctv_news_attributes_4:
        friendly_name: "CTV News Content 4"
        value_template: >
          {{ states.sensor.ctv_news.attributes.entries[4].title }}

  - platform: template
    sensors:
      ctv_news_attributes_5:
        friendly_name: "CTV News Content 5"
        value_template: >
          {{ states.sensor.ctv_news.attributes.entries[5].title }}

  - platform: template
    sensors:
      ctv_news_attributes_6:
        friendly_name: "CTV News Content 6"
        value_template: >
          {{ states.sensor.ctv_news.attributes.entries[6].title }}

  - platform: template
    sensors:
      ctv_news_attributes_7:
        friendly_name: "CTV News Content 7"
        value_template: >
          {{ states.sensor.ctv_news.attributes.entries[7].title }}

  - platform: template
    sensors:
      ctv_news_attributes_8:
        friendly_name: "CTV News Content 8"
        value_template: >
          {{ states.sensor.ctv_news.attributes.entries[8].title }}

  - platform: template
    sensors:
      ctv_news_attributes_9:
        friendly_name: "CTV News Content 9"
        value_template: >
          {{ states.sensor.ctv_news.attributes.entries[9].title }}

  ## GOOGLE NEWS

  - platform: template
    sensors:
      google_news_attributes_0:
        friendly_name: "Google News Content 0"
        value_template: >
          {{ states.sensor.google_news.attributes.entries[0].title }}

  - platform: template
    sensors:
      google_news_attributes_1:
        friendly_name: "Google News Content 1"
        value_template: >
          {{ states.sensor.google_news.attributes.entries[1].title }}

  - platform: template
    sensors:
      google_news_attributes_2:
        friendly_name: "Google News Content 2"
        value_template: >
          {{ states.sensor.google_news.attributes.entries[2].title }}

  - platform: template
    sensors:
      google_news_attributes_3:
        friendly_name: "Google News Content 3"
        value_template: >
          {{ states.sensor.google_news.attributes.entries[3].title }}

  - platform: template
    sensors:
      google_news_attributes_4:
        friendly_name: "Google News Content 4"
        value_template: >
          {{ states.sensor.google_news.attributes.entries[4].title }}

  - platform: template
    sensors:
      google_news_attributes_5:
        friendly_name: "Google News Content 5"
        value_template: >
          {{ states.sensor.google_news.attributes.entries[5].title }}

  - platform: template
    sensors:
      google_news_attributes_6:
        friendly_name: "Google News Content 6"
        value_template: >
          {{ states.sensor.google_news.attributes.entries[6].title }}

  - platform: template
    sensors:
      google_news_attributes_7:
        friendly_name: "Google News Content 7"
        value_template: >
          {{ states.sensor.google_news.attributes.entries[7].title }}

  - platform: template
    sensors:
      google_news_attributes_8:
        friendly_name: "Google News Content 8"
        value_template: >
          {{ states.sensor.google_news.attributes.entries[8].title }}

  - platform: template
    sensors:
      google_news_attributes_9:
        friendly_name: "Google News Content 9"
        value_template: >
          {{ states.sensor.google_news.attributes.entries[9].title }}

  - platform: template
    sensors:
      google_news_attributes_10:
        friendly_name: "Google News Content 10"
        value_template: >
          {{ states.sensor.google_news.attributes.entries[10].title }}

  - platform: template
    sensors:
      google_news_attributes_11:
        friendly_name: "Google News Content 11"
        value_template: >
          {{ states.sensor.google_news.attributes.entries[11].title }}

  - platform: template
    sensors:
      google_news_attributes_12:
        friendly_name: "Google News Content 12"
        value_template: >
          {{ states.sensor.google_news.attributes.entries[12].title }}

  - platform: template
    sensors:
      google_news_attributes_13:
        friendly_name: "Google News Content 13"
        value_template: >
          {{ states.sensor.google_news.attributes.entries[13].title }}

  - platform: template
    sensors:
      google_news_attributes_14:
        friendly_name: "Google News Content 14"
        value_template: >
          {{ states.sensor.google_news.attributes.entries[14].title }}

  - platform: template
    sensors:
      google_news_attributes_15:
        friendly_name: "Google News Content 15"
        value_template: >
          {{ states.sensor.google_news.attributes.entries[15].title }}

  - platform: template
    sensors:
      google_news_attributes_16:
        friendly_name: "Google News Content 16"
        value_template: >
          {{ states.sensor.google_news.attributes.entries[16].title }}

  - platform: template
    sensors:
      google_news_attributes_17:
        friendly_name: "Google News Content 17"
        value_template: >
          {{ states.sensor.google_news.attributes.entries[17].title }}

  - platform: template
    sensors:
      google_news_attributes_18:
        friendly_name: "Google News Content 18"
        value_template: >
          {{ states.sensor.google_news.attributes.entries[18].title }}

  - platform: template
    sensors:
      google_news_attributes_19:
        friendly_name: "Google News Content 19"
        value_template: >
          {{ states.sensor.google_news.attributes.entries[19].title }}
2 Likes
330

And my HTML Card in the Dashboard:

type: custom:html-card
view_layout:
  position: main
content: |
  <div class="ticker-wrap">
    <div class="ticker">
      <img src="/local/images/the-weather-network-6.png" alt="logo" style="height: 30px; vertical-align: middle;"> </span>
      <span class="ticker__item" style="color: #FFFFFF; font-weight: bold; animation: flashBlue 1s infinite;">WEATHER OUTLOOK </span>
      <style>
      @keyframes flashBlue {
        0% { color: #0984ff; font-weight: bold; }
        50% { color: #000000; font-weight: bold; }
        100% { color: #0984ff; font-weight: bold; }
      }
      </style>
      <span class="ticker__item" style="color: #0984ff; font-weight: bold;">Current Temperature: </span><span style="color: #FFFFFF;">  [[ sensor.seaton_st_realfeel_temperature ]]°C </span>
      <span class="ticker__item" style="color: #0984ff; font-weight: bold;">Today's High: </span><span style="color: #FFFFFF;">  [[ sensor.seaton_st_realfeel_temperature_max_day_0 ]]°C </span>
      <span class="ticker__item" style="color: #0984ff; font-weight: bold;">Current Conditions: </span><span style="color: #FFFFFF;">  [[ sensor.toronto_summary ]] [[ sensor.seaton_st_condition_day_0 ]]. </span>
      <span class="ticker__item" style="color: #0984ff; font-weight: bold;">Tonight: </span><span style="color: #FFFFFF;>  [[ sensor.seaton_st_condition_night_0 ]]. </span>
      <span class="ticker__item" style="color: #0984ff; font-weight: bold;">Total Hours of Sun Today: </span><span style="color: #FFFFFF;">  [[ sensor.seaton_st_hours_of_sun_day_0 ]]. </span>
      <span class="ticker__item" style="color: #0984ff; font-weight: bold;">Air Quality Today: </span><span style="color: #FFFFFF;">  [[ sensor.seaton_st_air_quality_day_0 ]]. <img src="/local/images/the-weather-network-6.png" alt="logo" style="height: 30px; vertical-align: middle;"> </span></span>
      <span class="ticker__item" style="color: #39FF14;">Ragweed Pollen Index:</span><span style="color: white; font-weight: bold;"> [[ sensor.seaton_st_ragweed_pollen_day_0 ]]</span>
      <span class="ticker__item" style="color: #39FF14;">Grass Pollen Index:</span><span style="color: white; font-weight: bold;">  [[ sensor.seaton_st_grass_pollen_day_0 ]]</span>
      <span class="ticker__item" style="color: #39FF14;">Tree Pollen:</span><span style="color: white; font-weight: bold;">  [[ sensor.seaton_st_tree_pollen_day_0 ]]</span>
      <span class="ticker__item" style="color: #0984ff; animation: flashBlue 1s infinite;">IN THE NEWS TODAY <span style="color: green; font-weight: bold;"></span> </span>
      <style>
      @keyframes flashRed {
        0% { color: red; font-weight: bold; }
        50% { color: #000000; font-weight: bold; }
        100% { color: red; font-weight: bold; }
      }
      </style>
      <span class="ticker__item"  color: #FFFFFF;">[[ sensor.ctv_news_attributes_0 ]]  |  <img src="/local/images/ctv-news.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
      <span class="ticker__item"  color: #FFFFFF;">[[ sensor.ctv_news_attributes_1 ]]  |  <img src="/local/images/ctv-news.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
      <span class="ticker__item"  color: #FFFFFF;">[[ sensor.ctv_news_attributes_2 ]]  |  <img src="/local/images/ctv-news.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
      <span class="ticker__item"  color: #FFFFFF;">[[ sensor.ctv_news_attributes_3 ]]  |  <img src="/local/images/ctv-news.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
      <span class="ticker__item"  color: #FFFFFF;">[[ sensor.ctv_news_attributes_4 ]]  |  <img src="/local/images/ctv-news.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
      <span class="ticker__item"  color: #FFFFFF;">[[ sensor.ctv_news_attributes_5 ]]  |  <img src="/local/images/ctv-news.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
      <span class="ticker__item"  color: #FFFFFF;">[[ sensor.ctv_news_attributes_6 ]]  |  <img src="/local/images/ctv-news.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
      <span class="ticker__item"  color: #FFFFFF;">[[ sensor.ctv_news_attributes_7 ]]  |  <img src="/local/images/ctv-news.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
      <span class="ticker__item"  color: #FFFFFF;">[[ sensor.ctv_news_attributes_8 ]]  |  <img src="/local/images/ctv-news.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
      <span class="ticker__item"  color: #FFFFFF;">[[ sensor.ctv_news_attributes_9 ]]  |  <img src="/local/images/ctv-news.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
      <span class="ticker__item"  color: #FFFFFF;">[[ sensor.google_news_attributes_0 ]]  |  <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
      <span class="ticker__item"  color: #FFFFFF;">[[ sensor.google_news_attributes_1 ]]  |  <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
      <span class="ticker__item"  color: #FFFFFF;">[[ sensor.google_news_attributes_2 ]]  |  <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
      <span class="ticker__item"  color: #FFFFFF;">[[ sensor.google_news_attributes_3 ]]  |  <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
      <span class="ticker__item"  color: #FFFFFF;">[[ sensor.google_news_attributes_4 ]]  |  <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
      <span class="ticker__item"  color: #FFFFFF;">[[ sensor.google_news_attributes_5 ]]  |  <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
      <span class="ticker__item"  color: #FFFFFF;">[[ sensor.google_news_attributes_6 ]]  |  <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
      <span class="ticker__item"  color: #FFFFFF;">[[ sensor.google_news_attributes_7 ]]  |  <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
      <span class="ticker__item"  color: #FFFFFF;">[[ sensor.google_news_attributes_8 ]]  |  <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"></span> </span>
      <span class="ticker__item"  color: #FFFFFF;">[[ sensor.google_news_attributes_9 ]]  |  <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"></span> </span>
      <span class="ticker__item"  color: #FFFFFF;">[[ sensor.google_news_attributes_10 ]]  |  <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"></span> </span>
      <span class="ticker__item"  color: #FFFFFF;">[[ sensor.google_news_attributes_11 ]]  |  <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"></span> </span>
      <span class="ticker__item"  color: #FFFFFF;">[[ sensor.google_news_attributes_12 ]]  |  <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"></span> </span>
      <span class="ticker__item"  color: #FFFFFF;">[[ sensor.google_news_attributes_13 ]]  |  <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"></span> </span>
      <span class="ticker__item"  color: #FFFFFF;">[[ sensor.google_news_attributes_14 ]]  |  <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"></span> </span>
      <span class="ticker__item"  color: #FFFFFF;">[[ sensor.google_news_attributes_15 ]]  |  <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"></span> </span>
      <span class="ticker__item"  color: #FFFFFF;">[[ sensor.google_news_attributes_16 ]]  |  <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"></span> </span>
      <span class="ticker__item"  color: #FFFFFF;">[[ sensor.google_news_attributes_17 ]]  |  <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"></span> </span>
      <span class="ticker__item"  color: #FFFFFF;">[[ sensor.google_news_attributes_18 ]]  |  <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"></span> </span>
      <span class="ticker__item"  color: #FFFFFF;">[[ sensor.google_news_attributes_19 ]]  |  <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"></span> </span>
    </div>
  <style>
    ha-card {
      height: 0px;
      visibility: hidden;
      z-index: 99;
    }    
    
    @keyframes ticker {
      0% {
        transform: translate3d(0, 0, 0);
        visibility: visible;
      }
      100% {
        transform: translate3d(-100%, 0, 0);
        }
      }  
      .ticker-wrap {
        font-family: tahoma;
        font-size: 1.3rem;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        overflow: hidden;
        height: 2.5rem;
        background-color: black;
        visibility: visible;
        padding-left: 100%;
        box-sizing: content-box;
      }
      .ticker {
        display: inline-block;
        height: 2.5rem;
        font-size: 1.3rem;
        line-height: 2.5rem;  
        white-space: nowrap;
        padding-right: 100%;
        box-sizing: content-box;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-name: ticker;
        animation-duration: 240s;
        &__item {
          display: inline-block;
          color: white;
          font-weight: bold;
        }
      }
      .ticker__item:before {
        content: "  »»";
        color: #ffff00;
        font-size: 1.5rem;
        font-weight: bold;
        margin-right: 10px;
        }
      .ticker__item:after {
      }
  </style>

And this is what the tweaked version looks like:

Recording 2024-11-20 084948 2

2 Likes
331

@ColtonYYZ was super helpful and got this resolved for me.
Had to fix my Lovelace HTML card install and dashboard card yml.

1 Like
332

Were you able to create this ? I’m looking for something similar

333

@ColtonYYZ : great work, thanks. Greatings to canada (from germany).
for your information:
i’m a beginner and i read the complete thread.
i copied your posted code - the last ones - and did everything right. I got an error message, that - i don’t know excatly - but the solution was to delete the span-tags with the temperatur-stuff, because (i think) they were not listet in the config.yaml. Ok no problem, so far.
I’m a person who doesn’t like deleting code. That’s why I like to use comments.
DO NOT DO THIS in the manual configuration of the dashboard. I now have a black dashboard and when I want to edit it, it stays black and the editing mask does not appear.
WTH!
Since I no longer have the ability to edit the dashboard via the GUI, I’m now looking for a way to change these comment ‘tags’ in the file. WHERE IS THIS?

I use the Studio Code Server add-on.

Great work!

[EDIT]
Solution: raw-Configeditor (3 dots top corner right). Though i could edit the code. Now the scrolling footer-feed bar is working again.
[/edit]

So long
Pc

334

Hey @perlchamp, sorry you had a blip there but glad you were able to figure it out!

The span tags are just formatting, so feel free to delete them! That’s what I like about sharing code - we can tweak it to our liking!

If you are curious to try, I was able to move my ticker to the top. Here is the code for that:

type: custom:html-card
view_layout:
  position: main
content: |
  <div class="ticker-wrap">
    <div class="ticker">
        <style>
            @keyframes flash {
                0% { background-color: #ff0000; opacity: 1; }
                50% { background-color: #000000; opacity: 0; }
                100% { background-color: #ff0000; opacity: 1; }
            }
            .ticker__alert {
                animation: flash 2s infinite;
            }
            .ticker img {
                animation-name: none;
                animation-duration: 0s;
                animation-timing-function: initial;
                animation-delay: initial;
                animation-iteration-count: initial;
                animation-direction: initial;
                animation-fill-mode: initial;
                animation-play-state: initial;
            }
        </style>

      <img src="/local/images/the-weather-network-6.png" alt="logo" style="height: 30px; vertical-align: middle;">
      <span class="ticker__alert" style="color: #FFFFFF; font-weight: bold;">!!!! ALERT !!!!</span>
      <span class="ticker__item" style="color: #2492ff; font-weight: bold;">Current Temperature: </span><span style="color: #FFFFFF;"> [[ sensor.seaton_st_apparent_temperature ]]°C </span>
      <span class="ticker__item" style="color: #2492ff; font-weight: bold;">Feels Like: </span><span style="color: #FFFFFF;"> [[ sensor.seaton_st_realfeel_temperature ]]°C </span>
      <span class="ticker__item" style="color: #2492ff; font-weight: bold;">Wind Chill: </span><span style="color: #FFFFFF;"> [[ sensor.seaton_st_wind_chill_temperature ]]°C </span>
      <span class="ticker__item" style="color: #2492ff; font-weight: bold;">Daytime Wind Gusts Up To: </span><span style="color: #FFFFFF;"> [[ sensor.seaton_st_wind_gust_speed_day_0 ]] km/r </span>
      <span style="color: #2492ff; font-weight: bold;">Nighttime Wind Gusts Up To: </span><span style="color: #FFFFFF;"> [[ sensor.seaton_st_wind_gust_speed_night_0 ]] km/r </span>      
      <span class="ticker__item" style="color: #2492ff; font-weight: bold;">Today: </span><span style="color: #FFFFFF;"> [[ sensor.seaton_st_condition_day_0 ]] </span><span style="color: #2492ff; font-weight: bold;">Tonight: </span><span style="color: #FFFFFF;"> [[ sensor.seaton_st_condition_night_0 ]] </span>
      <span class="ticker__item" style="color: #2492ff; font-weight: bold;">Air Quality Index: </span><span style="color: #FFFFFF;"> [[ sensor.toronto_aqhi ]]PM </span>
    </div>
  <style>
    ha-card {
      height: 0px;
      visibility: hidden;
      z-index: 99;
    }    
    
    @keyframes ticker {
      0% {
        transform: translate3d(0, 0, 0);
        visibility: visible;
      }
      100% {
        transform: translate3d(-100%, 0, 0);
        }
      }  
      .ticker-wrap {
        font-family: tahoma;
        font-size: 1.3rem;
        position: fixed;
        top: 40px;
        left: 0;
        width: 75%;
        overflow: hidden;
        height: 2.7rem;
        background-color: black;
        visibility: visible;
        padding-left: 100%;
        box-sizing: content-box;
      }
      .ticker {
        display: inline-block;
        height: 2.5rem;
        font-size: 1.3rem;
        line-height: 2.5rem;  
        white-space: nowrap;
        padding-right: 100%;
        box-sizing: content-box;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-name: ticker;
        animation-duration: 24s;
        &__item {
          display: inline-block;
          color: white;
          font-weight: bold;
        }
      }
      .ticker__item:before {
        content: "       »»";
        color: #ffff00;
        font-size: 1.5rem;
        font-weight: bold;
        margin-right: 10px;
        }
  </style>
  </div>

If you want a DOUBLE ticker at the bottom, I figured that out too!

**NOTE: It will cover up the Cancel and Save buttons when you are editing the card unfortunately. But what I do is change my zoom of my browser (CTRL+Mouse Wheel) as small as I need it to go, in order to see them again so I can save the edit.

Here’s the code for that:

type: custom:html-card
view_layout:
  position: main
content: |
  <div class="ticker-wrap" style="bottom: 2.5rem; left: 0; padding-left: 0;">
    <div class="ticker" style="padding-left: 0;">
      <span class="ticker__item" style="color: #FFFFFF; font-weight: bold; animation: flashBlue 1s infinite;">WEATHER OUTLOOK </span>
      <style>
      @keyframes flashBlue {
        0% { color: #0984ff; font-weight: bold; }
        50% { color: #000000; font-weight: bold; }
        100% { color: #0984ff; font-weight: bold; }
      }
      </style>
      <span class="ticker__item" style="color: #0984ff; font-weight: bold;">Current Temperature: </span><span style="color: #FFFFFF;">  [[ sensor.seaton_st_realfeel_temperature ]]°C </span>
      <span class="ticker__item" style="color: #0984ff; font-weight: bold;">Tonight: </span><span style="color: #FFFFFF;">  [[ sensor.seaton_st_condition_night_0 ]]. </span>
      <span class="ticker__item" style="color: #0984ff; font-weight: bold;">Today's High: </span><span style="color: #FFFFFF;">  [[ sensor.seaton_st_realfeel_temperature_max_day_0 ]]°C </span>
      <span class="ticker__item" style="color: #0984ff; font-weight: bold;">Air Quality Today: </span><span style="color: #FFFFFF;">  [[ sensor.seaton_st_air_quality_day_0 ]]. </span>
    </div>
  </div>
  <div class="ticker-wrap" style="bottom: 0; left: 0; padding-left: 0;">
    <div class="ticker" style="padding-left: 0;">
      <span class="ticker__item" style="color: #FFFFFF; font-weight: bold; animation: flashRed 1s infinite;">IN THE NEWS TODAY </span>
      <style>
      @keyframes flashRed {
        0% { color: red; font-weight: bold; }
        50% { color: #000000; font-weight: bold; }
        100% { color: red; font-weight: bold; }
      }
      </style>
      <span class="ticker__item" style="color: #FFFFFF;">[[ sensor.ctv_news_attributes_0 ]]  |   </span>
      <span class="ticker__item" style="color: #FFFFFF;">[[ sensor.ctv_news_attributes_1 ]]  |   </span>
      <span class="ticker__item" style="color: #FFFFFF;">[[ sensor.google_news_attributes_0 ]]  |   </span>
      <span class="ticker__item" style="color: #FFFFFF;">[[ sensor.google_news_attributes_1 ]]  |   </span>
    </div>
  </div>
  <style>
    ha-card {
      height: 0px;
      visibility: hidden;
      z-index: 99;
    }
    @keyframes ticker {
      0% {
        transform: translate3d(0, 0, 0);
        visibility: visible;
      }
      100% {
        transform: translate3d(-100%, 0, 0);
      }
    }
    .ticker-wrap {
      font-family: tahoma;
      font-size: 1.3rem;
      position: fixed;
      width: 100%;
      overflow: hidden;
      height: 2.5rem;
      background-color: black;
      visibility: visible;
      box-sizing: content-box;
    }
    .ticker {
      display: inline-block;
      height: 2.5rem;
      font-size: 1.3rem;
      line-height: 2.5rem;
      white-space: nowrap;
      padding-right: 100%;
      box-sizing: content-box;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      animation-name: ticker;
      animation-duration: 80s;
    }
    .ticker__item {
      display: inline-block;
      color: white;
      font-weight: bold;
    }
    .ticker__item:before {
      content: "  »»";
      color: #ffff00;
      font-size: 1.5rem;
      font-weight: bold;
      margin-right: 10px;
    }
  </style>
3 Likes
335

hi @ColtonYYZ ,
double sounds well. The Ticker at the bottom works for me, but i give the top one a shot.

You took tahoma, cause it’s tall? You then could throw an eye on ‘Bahnschrift’. Very clear and taller. This is used in Germany’s train stations. Bloody nice - imo - is the condensed or semi-condensed. In your case maybe condensed-light


First i have to find some rss-sites


Best wishes, stay healthy.

So long
Pc

1 Like
336

@perlchamp, Bahnschrift is nice. I have always liked Tahoma so it’s my usual go to. Other than that, no other reason really. :slight_smile:

337

@ColtonYYZ :

yes, it is. here are my files:
config.yaml:

- platform: feedparser
  name: CHIEFS News
  date_format: "%a, %d %b %Y %H:%M:%S %Z"
  feed_url: "https://www.sport.de/rss/news/te3064/kansas-city-chiefs/"
  inclusions: title
  exclusions: []
  scan_interval:
    minutes: 15
  show_topn: 5
- platform: feedparser
  name: FORTUNA News
  date_format: "%a, %d %b %Y %H:%M:%S %Z"
  feed_url: "https://www.f95.de/rss.xml"
  inclusions: title
  exclusions: []
  scan_interval:
    minutes: 15
  show_topn: 5
- platform: feedparser
  name: GER News
  date_format: "%a, %d %b %Y %H:%M:%S %Z"
  feed_url: "https://www.bundesregierung.de/service/rss/breg-de/1151244/feed.xml"
  inclusions: title
  exclusions: []
  scan_interval:
    minutes: 15
  show_topn: 5
- platform: feedparser
  name: IT News
  date_format: "%a, %d %b %Y %H:%M:%S %Z"
  feed_url: "https://www.pcwelt.de/feed?story_types=news%2Cfeature"
  inclusions: title
  exclusions: []
  scan_interval:
    minutes: 15
  show_topn: 5
- platform: feedparser
  name: SP News
  date_format: "%a, %d %b %Y %H:%M:%S %Z"
  feed_url: "https://www.presseportal.de/rss/polizei/r/Speyer.rss2"
  inclusions: title
  exclusions: []
  scan_interval:
    minutes: 15
  show_topn: 5

## CHIEFS NEWS
- platform: template
  sensors:
    chiefs_news_attributes_0:
      friendly_name: "Chiefs News Content 0"
      value_template: >
        {{ states.sensor.chiefs_news.attributes.entries[0].title }}
- platform: template
  sensors:
    chiefs_news_attributes_1:
      friendly_name: "Chiefs News Content 1"
      value_template: >
        {{ states.sensor.chiefs_news.attributes.entries[1].title }}

## FORTUNA NEWS
- platform: template
  sensors:
    fortuna_news_attributes_0:
      friendly_name: "Fortuna News Content 0"
      value_template: >
        {{ states.sensor.fortuna_news.attributes.entries[0].title }}

## GER NEWS
- platform: template
  sensors:
    ger_news_attributes_0:
      friendly_name: "GER News Content 0"
      value_template: >
        {{ states.sensor.ger_news.attributes.entries[0].title }}

## IT NEWS
- platform: template
  sensors:
    it_news_attributes_0:
      friendly_name: "IT News Content 0"
      value_template: >
        {{ states.sensor.it_news.attributes.entries[0].title }}

## SP NEWS
- platform: template
  sensors:
    sp_news_attributes_0:
      friendly_name: "SP News Content 0"
      value_template: >
        {{ states.sensor.sp_news.attributes.entries[0].title }}

yaml dashboard:

type: custom:html-card
view_layout:
  position: main
content: |
  <div class="ticker-wrap">
    <div class="ticker">
      <style>
      @keyframes flashBlue {
        0% { color: #0984ff; font-weight: bold; }
        50% { color: #000000; font-weight: bold; }
        100% { color: #0984ff; font-weight: bold; }
      }
      </style>
      
      <style>
      @keyframes flashRed {
        0% { color: red; font-weight: bold; }
        50% { color: #000000; font-weight: bold; }
        100% { color: red; font-weight: bold; }
      }
      </style>
      <span class="ticker__item"  color: #FFFFFF;"><img src="/local/img/logo_chiefs.svg" alt="chiefs kingdom" style="height: 20px; vertical-align: middle;">&nbsp;[[ sensor.chiefs_news_attributes_0 ]]</span>&nbsp;&nbsp;&nbsp;
      <span class="ticker__item"  color: #FFFFFF;"><img src="/local/img/logo_chiefs.svg" alt="logo" style="height: 20px; vertical-align: middle;">&nbsp;[[ sensor.chiefs_news_attributes_1 ]]</span>&nbsp;&nbsp;&nbsp;
      <span class="ticker__item"  color: #FFFFFF;"><img src="/local/img/logo_fortuna.svg" alt="Fortuna 95" style="height: 20px; vertical-align: middle;">&nbsp;[[ sensor.fortuna_news_attributes_0 ]]</span>&nbsp;&nbsp;&nbsp;
      <span class="ticker__item"  color: #FFFFFF;"><img src="/local/img/logo_ger.svg" alt="logo" style="height: 20px; vertical-align: middle;">&nbsp;[[ sensor.ger_news_attributes_0 ]]</span>&nbsp;&nbsp;&nbsp;
      <span class="ticker__item"  color: #FFFFFF;"><img src="/local/img/logo_it.svg" alt="logo" style="height: 20px; vertical-align: middle;">&nbsp;[[ sensor.it_news_attributes_0 ]]</span>&nbsp;&nbsp;&nbsp;
      <span class="ticker__item"  color: #FFFFFF;"><img src="/local/img/logo_sp.svg" alt="logo" style="height: 20px; vertical-align: middle;">&nbsp;[[ sensor.sp_news_attributes_0 ]]</span>&nbsp;&nbsp;&nbsp;
    </div>
  <style>
    ha-card {
      height: 0px;
      visibility: hidden;
      z-index: 99;
    }    
    
    @keyframes ticker {
      0% {
        transform: translate3d(0, 0, 0);
        visibility: visible;
      }
      100% {
        transform: translate3d(-100%, 0, 0);
        }
      }  
      .ticker-wrap {
        font-family: "bahnschrift";
        font-stretch: condensed;
        font-size: 1.3rem;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        overflow: hidden;
        height: 2.5rem;
        background-color: black;
        visibility: visible;
        padding-left: 100%;
        box-sizing: content-box;
      }
      .ticker {
        display: inline-block;
        height: 2.5rem;
        font-size: 1.3rem;
        line-height: 2.5rem;  
        white-space: nowrap;
        padding-right: 100%;
        box-sizing: content-box;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-name: ticker;
        animation-duration: 240s;
        &__item {
          display: inline-block;
          color: white;
          font-weight: bold;
        }
      }
      .ticker__item:before {}
      .ticker__item:after {
        content: &nbsp;&nbsp;;
        color: #ffff00;
        font-size: 1.5rem;
        font-weight: bold;
        margin-right: 10px;        
      }
  </style>

the png:

logo_chiefs
logo_chiefs980×625 52.7 KB

logo_fortuna
logo_fortuna2530×2530 314 KB

logo_ger

logo_it
logo_it2500×2500 104 KB

logo_sp
logo_sp1356×1622 123 KB

So long
Pc

338

Two things I’d like to do:

  1. Have the ticker items link to the external page when tapped/clicked.
  2. Have a card that shows rss items in scrollable and linked to external page.
339

Hi,

Personally, I don’t necessarily need this behavior: a scrollable link

340

image
image3298×468 159 KB

I recently built an automatic news feed on top of my kitchen dashboard tablet.
It autoscrolls after several seconds and shows the latest rss articles.

Every link is clickable and links to the external site.

you may need to adjust the animation duration.

type: custom:html-template-card
ignore_line_breaks: true
content: |

  <style>
    .marquee-container {
        width: 100%;
        height: 75px;
        border-radius: 6px;
        overflow: hidden;
        overflow-x: scroll;
        padding-bottom: 8px;
        white-space: nowrap;
        box-sizing: border-box;
    }
   .marquee {
       display: inline-flex;
       animation: marquee 270s linear infinite;
   }
    .marquee a {
         display: flex;
         align-items: center;
         margin-right: 32px;
         text-decoration: none;
         color: #ddd !important;
         padding-right: 24px;
         border-right: 1px solid #333;
     }
     
     a img {
         max-height: 75px;
         margin-right: 10px;
         border-radius: 6px;
     }
     
     a div {
         display: flex;
         flex-direction: column;
         max-height: 70px;
         height: 100%;
     }
     a div span:nth-child(1) {
       font-weight: 700;
       width: 270px;
       white-space: initial;
       line-height: 1.2rem;
       transform: translateY(-4px);
     }
     a div span:nth-child(2) {
       color: #777;
       line-height: 0.88rem;
       font-size: 0.7rem;
       white-space: initial;
       display: -webkit-box;
      -webkit-box-orient: vertical; 
      -webkit-line-clamp: 3; 
      text-overflow: ellipsis;
   }

   @keyframes marquee {
       0% { transform: translateX(0); }
       13% { transform: translateX(0); }
       100% { transform: translateX(-100%); }
   }
   </style>
   <div class="marquee-container">
     <div class="marquee">
     {% for entry in state_attr('sensor.otz_jena', 'entries') %}
           <a href="{{ entry.link }}">
              <img src="{{ entry.links[1].href }}" alt=""> 
              <div style="background: none;">
                <span>{{ entry.title }}</span>
                <span>{{ entry.summary }}</span>
              </div>
           </a>
     {% endfor %}
     </div>
   </div>
card_mod:
  style: >
    ha-card { background: none; border: none; padding-left: 0 !important;
    padding-right: 0 !important;}

maybe it enlighten someones day.

1 Like
341

GrĂŒĂŸe aus der Pfalz nach ThĂŒringen


342

maybe it enlighten someones day.

seems difficult without a example-link or example-picture ?
you see just a black strip/block 


343

I tried this example (also with ChatGPT), but html-card card is sanitising and cleaning all classes. It’s also not able to run able to run any jinja for cycles.

344

Can you clarify what you are using for html-template-card? I cannot find such a card in HACS.

345

Search “HTML Jinja2 Template card” without the quotes.

346

Can you make each title clickable and take you to the news link?

I already have everything done, I just wanted each news item to act as a link.

347

Hi there! Hope that maybe someone can help me.

I’m currently trying to create a “newslist” of sorts, but I’m having some trouble with feedparser. At the moment, I’m having a template helper listen to the first entry in feedparser’s “entries” state attribute, and take up its title. I’m displaying the history of that helper with a custom logbook card, and voilá.

That’s the theory, at least. Sadly, feedparser doesn’t seem to show the entries in the order they are received. Looking at the “states” menu in the dev tools this becomes apparent very quickly when looking at the “published” datapoint:

entries: 
- title: 'Marktbericht: Höhere Verluste als zu Beginn der Corona-Pandemie'
  title_detail:
    type: text/plain
    language: null
    base: ''
    value: 'Marktbericht: Höhere Verluste als zu Beginn der Corona-Pandemie'
  links:
    - rel: alternate
      type: text/html
      href: >-
        https://www.tagesschau.de/wirtschaft/finanzen/marktberichte/marktbericht-boersen-kurssturz-dax-wall-street-trump-zoelle-100.html
  link: >-
    https://www.tagesschau.de/wirtschaft/finanzen/marktberichte/marktbericht-boersen-kurssturz-dax-wall-street-trump-zoelle-100.html
  summary: >-
    Die Bösen weltweit kannten am Freitag nur eine Richtung: nach unten. Die
    grĂ¶ĂŸten US-Unternehmen verloren mehr als zu Beginn der Corona-Pandemie. Der
    US-Finanzminister hat eine andere ErklÀrung.
  summary_detail:
    type: text/html
    language: null
    base: ''
    value: >-
      Die Bösen weltweit kannten am Freitag nur eine Richtung: nach unten. Die
      grĂ¶ĂŸten US-Unternehmen verloren mehr als zu Beginn der Corona-Pandemie.
      Der US-Finanzminister hat eine andere ErklÀrung.
  published: Fri, Apr 04 10:21 PM
  id: a406ff56-e023-43ad-ab8d-a085e0323873
  guidislink: false
  updated: Fri, Apr 04 08:21 PM
  content:
    - type: text/html
      language: null
      base: ''
      value: >-
        <p> <a
        href="https://www.tagesschau.de/wirtschaft/finanzen/marktberichte/marktbericht-boersen-kurssturz-dax-wall-street-trump-zoelle-100.html"><img
        alt="HĂ€ndler an der New York Stock Exchange. | picture alliance /
        newscom"
        src="https://images.tagesschau.de/image/d297a3d9-d942-4284-93b5-9a8161dd4c79/AAABk0Mg4rs/AAABkZLhkrw/16x9-1280/nyse-374.jpg"
        /></a> <br /> <br />Die Bösen weltweit kannten am Freitag nur eine
        Richtung: nach unten. Die grĂ¶ĂŸten US-Unternehmen verloren mehr als zu
        Beginn der Corona-Pandemie. Der US-Finanzminister hat eine andere
        ErklÀrung. [<a
        href="https://www.tagesschau.de/wirtschaft/finanzen/marktberichte/marktbericht-boersen-kurssturz-dax-wall-street-trump-zoelle-100.html">mehr</a>]</p>
- title: 'USA: Frist fĂŒr TikTok in den USA erneut per Anordnung verlĂ€ngert'
  title_detail:
    type: text/plain
    language: null
    base: ''
    value: 'USA: Frist fĂŒr TikTok in den USA erneut per Anordnung verlĂ€ngert'
  links:
    - rel: alternate
      type: text/html
      href: >-
        https://www.tagesschau.de/ausland/amerika/tiktok-verlaengerung-verfuegbarkeit-100.html
  link: >-
    https://www.tagesschau.de/ausland/amerika/tiktok-verlaengerung-verfuegbarkeit-100.html
  summary: >-
    Die Zukunft von TikTok in den USA bleibt offen: US-PrÀsident Trump zufolge
    braucht ein "Deal" noch Zeit. Er will die VerfĂŒgbarkeit der Video-App zum
    zweiten Mal fĂŒr 75 Tage verlĂ€ngern - obwohl es dafĂŒr keine rechtliche Basis
    gibt.
  summary_detail:
    type: text/html
    language: null
    base: ''
    value: >-
      Die Zukunft von TikTok in den USA bleibt offen: US-PrÀsident Trump zufolge
      braucht ein "Deal" noch Zeit. Er will die VerfĂŒgbarkeit der Video-App zum
      zweiten Mal fĂŒr 75 Tage verlĂ€ngern - obwohl es dafĂŒr keine rechtliche
      Basis gibt.
  published: Fri, Apr 04 09:32 PM
  id: 74a148ba-7ecd-4d29-b6f1-32fcfa465741
  guidislink: false
  updated: Fri, Apr 04 07:32 PM
  content:
    - type: text/html
      language: null
      base: ''
      value: >-
        <p> <a
        href="https://www.tagesschau.de/ausland/amerika/tiktok-verlaengerung-verfuegbarkeit-100.html"><img
        alt="US-Zentrale des Social-Media-Unternehmens TikTok in Culver City,
        Kalifornien | REUTERS"
        src="https://images.tagesschau.de/image/d145ab68-80c3-4cc0-8595-70e40a68825e/AAABlHzDVHk/AAABkZLhkrw/16x9-1280/tiktok-210.jpg"
        /></a> <br /> <br />Die Zukunft von TikTok in den USA bleibt offen:
        US-PrÀsident Trump zufolge braucht ein "Deal" noch Zeit. Er will die
        VerfĂŒgbarkeit der Video-App zum zweiten Mal fĂŒr 75 Tage verlĂ€ngern -
        obwohl es dafĂŒr keine rechtliche Basis gibt.[<a
        href="https://www.tagesschau.de/ausland/amerika/tiktok-verlaengerung-verfuegbarkeit-100.html">mehr</a>]</p>
- title: 'Ukraine: Viele Tote und Verletzte bei russischem Angriff auf Krywyj Rih'
  title_detail:
    type: text/plain
    language: null
    base: ''
    value: 'Ukraine: Viele Tote und Verletzte bei russischem Angriff auf Krywyj Rih'
  links:
    - rel: alternate
      type: text/html
      href: https://www.tagesschau.de/ausland/ukraine-angriff-krywyj-rih-100.html
  link: https://www.tagesschau.de/ausland/ukraine-angriff-krywyj-rih-100.html
  summary: >-
    Bei einem russischen Angriff auf die ukrainische Stadt Krywyj Rih sind nach
    Behördenangaben mindestens 14 Menschen getötet worden - darunter auch sechs
    Kinder. Raketen hatten demnach ein Wohngebiet getroffen.
  summary_detail:
    type: text/html
    language: null
    base: ''
    value: >-
      Bei einem russischen Angriff auf die ukrainische Stadt Krywyj Rih sind
      nach Behördenangaben mindestens 14 Menschen getötet worden - darunter auch
      sechs Kinder. Raketen hatten demnach ein Wohngebiet getroffen.
  published: Fri, Apr 04 11:50 PM
  id: 352a4b71-a0ee-4bbc-b209-e384f4e1d0a0
  guidislink: false
  updated: Fri, Apr 04 09:50 PM
  content:
    - type: text/html
      language: null
      base: ''
      value: >-
        <p> <a
        href="https://www.tagesschau.de/ausland/ukraine-angriff-krywyj-rih-100.html"><img
        alt="Ein Wohngebiet im ukrainischen Krywyj Rih nach einem Angriff mit
        mehreren Toten. | via REUTERS"
        src="https://images.tagesschau.de/image/1e100f28-c3e2-4906-977b-008f06aa8680/AAABlgLJFLo/AAABkZLhkrw/16x9-1280/kryvyi-100.jpg"
        /></a> <br /> <br />Bei einem russischen Angriff auf die ukrainische
        Stadt Krywyj Rih sind nach Behördenangaben mindestens 14 Menschen
        getötet worden - darunter auch sechs Kinder. Raketen hatten demnach ein
        Wohngebiet getroffen.[<a
        href="https://www.tagesschau.de/ausland/ukraine-angriff-krywyj-rih-100.html">mehr</a>]</p>
- title: 'Ukraine-Liveblog: ++ Arbeitsgruppen sollen Friedenstruppe vorbereiten ++'
  title_detail:
    type: text/plain
    language: null
    base: ''
    value: 'Ukraine-Liveblog: ++ Arbeitsgruppen sollen Friedenstruppe vorbereiten ++'
  links:
    - rel: alternate
      type: text/html
      href: https://www.tagesschau.de/newsticker/liveblog-ukraine-freitag-510.html
  link: https://www.tagesschau.de/newsticker/liveblog-ukraine-freitag-510.html
  summary: >-
    Laut PrÀsident Selenskyj sollen Arbeitsgruppen die Bildung einer
    internationalen Truppe zur Sicherung einer Waffenruhe vorbereiten. Der
    innere Kreis um US-PrÀsident Trump rÀt ihm offenbar vorerst von einem
    Telefonat mit Kremlchef Putin ab.
  summary_detail:
    type: text/html
    language: null
    base: ''
    value: >-
      Laut PrÀsident Selenskyj sollen Arbeitsgruppen die Bildung einer
      internationalen Truppe zur Sicherung einer Waffenruhe vorbereiten. Der
      innere Kreis um US-PrÀsident Trump rÀt ihm offenbar vorerst von einem
      Telefonat mit Kremlchef Putin ab.
  published: Fri, Apr 04 10:50 PM
  id: 4d2901e1-86d7-4ca9-916c-05c06711bbd1
  guidislink: false
  updated: Fri, Apr 04 08:50 PM
  content:
    - type: text/html
      language: null
      base: ''
      value: >-
        <p> <a
        href="https://www.tagesschau.de/newsticker/liveblog-ukraine-freitag-510.html"><img
        alt="Wolodymyr Selenskyj | AP"
        src="https://images.tagesschau.de/image/383bdc25-b57d-4fab-b80b-a04ce99b550a/AAABlgIsSqg/AAABkZLhkrw/16x9-1280/selenskyj-804.jpg"
        /></a> <br /> <br />Laut PrÀsident Selenskyj sollen Arbeitsgruppen die
        Bildung einer internationalen Truppe zur Sicherung einer Waffenruhe
        vorbereiten. Der innere Kreis um US-PrÀsident Trump rÀt ihm offenbar
        vorerst von einem Telefonat mit Kremlchef Putin ab. [<a
        href="https://www.tagesschau.de/newsticker/liveblog-ukraine-freitag-510.html">mehr</a>]</p>
- title: Ist die ultrarechte Aktivistin Laura Loomer Trumps EinflĂŒsterin?
  title_detail:
    type: text/plain
    language: null
    base: ''
    value: Ist die ultrarechte Aktivistin Laura Loomer Trumps EinflĂŒsterin?
  links:
    - rel: alternate
      type: text/html
      href: https://www.tagesschau.de/ausland/amerika/usa-laura-loomer-100.html
  link: https://www.tagesschau.de/ausland/amerika/usa-laura-loomer-100.html
  summary: >-
    Nachdem US-PrÀsident Trump mehrere Mitglieder seines Teams gefeuert hatte,
    machte sofort das GerĂŒcht die Runde, dass die ultrarechte Influencerin Laura
    Loomer dahinter stecke. Wer ist diese Frau? Von Sebastian Hesse.
  summary_detail:
    type: text/html
    language: null
    base: ''
    value: >-
      Nachdem US-PrÀsident Trump mehrere Mitglieder seines Teams gefeuert hatte,
      machte sofort das GerĂŒcht die Runde, dass die ultrarechte Influencerin
      Laura Loomer dahinter stecke. Wer ist diese Frau? Von Sebastian Hesse.
  published: Fri, Apr 04 08:32 PM
  id: c439994b-a66f-4835-9a2a-2fe933435159
  guidislink: false
  updated: Fri, Apr 04 06:32 PM
  content:
    - type: text/html
      language: null
      base: ''
      value: >-
        <p> <a
        href="https://www.tagesschau.de/ausland/amerika/usa-laura-loomer-100.html"><img
        alt="Laura Loomer | AP"
        src="https://images.tagesschau.de/image/95abe25f-38ca-4085-a195-b691c03bdeab/AAABlgITAOg/AAABkZLhkrw/16x9-1280/laura-loomer-100.jpg"
        /></a> <br /> <br />Nachdem US-PrÀsident Trump mehrere Mitglieder seines
        Teams gefeuert hatte, machte sofort das GerĂŒcht die Runde, dass die
        ultrarechte Influencerin Laura Loomer dahinter stecke. Wer ist diese
        Frau? <em>Von Sebastian Hesse.</em>[<a
        href="https://www.tagesschau.de/ausland/amerika/usa-laura-loomer-100.html">mehr</a>]</p>

attribution: Data retrieved using RSS feedparser
icon: mdi:rss
friendly_name: tagesschau_news

I’m sort of at a loss as to what to do here. Here’s my feedparser config:

sensor:
  - platform: feedparser
    name: tagesschau_news
    feed_url: https://www.tagesschau.de/infoservices/alle-meldungen-100~rss2.xml
    scan_interval:
      seconds: 10
    show_topn: 5

Something which may help: I’m getting warnings relating to date parsing errors. Maybe that’s the reason?

Feed tagesschau_news: Unable to parse RFC-822 date from 2025-04-04T20:21:31Z. This could be caused by incorrect pubDate format in the RSS feed or due to a leapp second

I’d be extremely grateful for any help!

EDIT:

I figured it out, and feel very stupid. I’ve finally had the thought to just look at the raw xml of the feed, and wouldn’t you know it: The sucker just comes unsorted like that.

Well. At least it’s peace of mind. I just need to figure out how to grab the actual latest entry instead of just the first one, and we’re golden.

EDIT 2:

In case anyone happens upon this: I’ve written a template that compares the “published” datapoints of an RSS feed, and outputs the index of the latest entry:

{# setup the counter variable #}
{% set ns = namespace(y = 1) %}

{# set the date at index 0 as the initial comparison variable #}
{% set ns.latest = state_attr('sensor.tagesschau_news','entries')[0].published %}
{# set the latest date index as the initial variable. If this is the latest variable, the loop will run out and this will be outputted. #}
{% set ns.latest_index = 0 %}

{# iterates through the list of entries #}
{% for x in state_attr('sensor.tagesschau_news', 'entries') %}
  {# necessary to not compare with 5 and above, as 5 does not exist #}
  {% if ns.y < 5 %}
    {# compares the currect entry's date with the cached "latest" date. If if is "bigger" (later), sets the currect date as the cached date #}
    {% if state_attr('sensor.tagesschau_news','entries')[ns.y].published > ns.latest %}
      {% set ns.latest_index = ns.y %}
    {% endif %}
  {% endif %}
  {% set ns.y = ns.y + 1 %}
{% endfor %}

{{ ns.latest_index }}
348

I was looking for a list card in an accordion style to display RSS feeds without taking up too much dashboard space.
Since I couldn’t find one, I built a small custom card:

image
image760×834 100 KB

HACS installation:

Open your Home Assistant instance and open a repository inside the Home Assistant Community Store.

It shows your RSS feed items in a collapsible accordion list, so you only expand the entries you’re interested in.
The card is lightweight, clean, and designed to keep your Lovelace view tidy while still giving quick access to headlines and details.

Might be useful for others here too :rocket:

Repository: :point_right: RSS Accordion

2 Likes