I have tried getting a good looking rss feed via aftonbladet
Here is what I have ended up with after inspiration from various tips and tricks on this site.
first I had to edit the feedparser sensor.py file to be able to catch the img url in the enclosure tag.
# Check for the enclosure tag
if "enclosures" in entry:
enclosure = entry["enclosures"][0] # Assuming only one enclosure
entry_value["image"] = enclosure.get("url", "")
if not entry_value.get("image"):
# If there's no enclosure, check for image in summary
images = []
if "summary" in entry:
images = re.findall(
r"<img.+?src=\"(.+?)\".+?>", entry["summary"]
)
if images:
entry_value["image"] = images[0]
else:
entry_value[
"image"
] = "https://www.home-assistant.io/images/favicon-192x192-full.png"
to create the sensor.aftonbladet, I have this in my sensors.yaml (moved my sensors to a seperate file instead of the configuration.yaml)
# RSS feedparser
- platform: feedparser
name: aftonbladet
feed_url: "https://rss.aftonbladet.se/rss2/small/pages/sections/senastenytt/"
date_format: "%Y-%m-%d %H:%M:%S"
local_time: true
show_topn: 5
inclusions:
- title
- published
- summary
- link
exclusions:
- id
and finally I use the custom:list-card.
type: custom:list-card
entity: sensor.aftonbladet3
feed_attribute: entries
title: ' '
row_limit: 3
columns:
- title: ''
field: image
type: image
width: 90px
height: auto
- title: Title
field: title
- title: Summary
field: summary
add_link: link
- title: Published
field: published
style: |
ha-card {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
img {
width: 500px;
height: auto;
}
tbody {
display: grid;
grid-gap: 2em;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
@media only screen and (max-width: 1200px) {
tbody {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
grid-gap: 0.5em;
}
}
table {
width: 100%;
}
table * {
box-sizing: border-box;
font-family: sans-serif;
}
th {
display: none;
}
tr {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
margin: 0;
overflow: hidden;
border-radius: 10px;
}
.summary img {
width: 100%;
height: auto;
vertical-align: middle;
}
tr .title {
position: absolute;
text-align: left;
top: 0px;
padding: 35px 10px 10px 10px;
height: 100%;
width: 100%;
margin-left: auto;
margin-right: auto;
font-size: 20px;
line-height: 24px;
font-weight: bold;
color: #fff;
background-image: linear-gradient(rgba(0,0,0, 1), rgba(0,0,0, 0.3), rgba(0,0,0, 1));
border-top-left-radius: 5px;
border-top-right-radius: 5px;
opacity: 1;
backdrop-filter: blur(0px);
}
tr .published {
position: absolute;
text-align: left;
font-size: 14px;
top: 0px;
color: darkorange;
padding: 10px 10px;
opacity: 1;
}
tr .summary {
position: absolute;
bottom: 10px;
padding: 0 10px 10px;
width: 100%;
font-size: 16px;
font-weight: 400;
color: #fff;
z-index: 1000;
opacity: 1;
text-align: left;
opacity: 1;
}
tr .summary p:last-of-type {
display: none;
}
Here’s another way to do it.
type: custom:list-card
entity: sensor.aftonbladet3
feed_attribute: entries
title: ' '
row_limit: 5
columns:
- title: ''
field: image
type: image
width: 90px
height: auto
- title: Title
field: title
add_link: link
- title: Published
field: published
card_mod:
style: |
ha-card {
max-width: 100%;
margin: 0 auto;
}
img {
width: 600px;
height: auto;
}
tbody {
display: grid;
margin: 0;
padding: 0;
grid-gap: 0.3em;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}
table {
width: 100%;
}
table * {
box-sizing: border-box;
font-family: sans-serif;
}
th {
display: none;
}
tr {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
height: 90px;
margin: 0;
overflow: hidden;
border-radius: 10px;
transform: translateY(-110px);
}
tr .title {
position: absolute;
text-align: left;
top: 0px;
padding: 35px 10px 10px 10px;
height: 100%;
width: 100%;
margin-left: auto;
margin-right: auto;
font-size: 18px;
line-height: 24px;
font-weight: bold;
color: #fff;
background-image: linear-gradient(rgba(0,0,0, 1), rgba(0,0,0, 0.5), rgba(0,0,0, 1));
border-top-left-radius: 5px;
border-top-right-radius: 5px;
opacity: 1;
backdrop-filter: blur(0px);
}
tr .published {
position: absolute;
text-align: left;
font-size: 14px;
top: 0px;
color: darkorange;
padding: 10px 10px;
opacity: 1;
}
tr .summary {
position: absolute;
bottom: 10px;
padding: 0 10px 10px;
width: 100%;
font-size: 16px;
font-weight: 400;
color: #fff;
z-index: 1000;
opacity: 1;
text-align: left;
opacity: 1;
}
tr .summary p:last-of-type {
display: none;
}
. I have two feeds (“Süddeutsche” and “Auto News”). “Auto News” has provided the image only in enclosure, so the change in sensor.py made it to work. But, now the entity of my first feed “Süddeutsche” disappeared?! Do you have an idea? Here is my feedparser config: