iantrich / list-card Goto Github PK

📰 Display sensor list data in a table

License: Apache License 2.0

JavaScript 100.00%

list-card's Introduction

List Card by @iantrich

This card for Lovelace on Home Assistant that gives you a table generated with data from the feedparser custom component or any other sensor that provides data as a list of attributes.

Support

Hey dude! Help me out for a couple of 🍻 or a ☕!

Great resource for further filtering your feeds is siftrss

From left to right: feedparser | aftership | untappd

Options

Name	Type	Requirement	Description
type	string	Required	`custom:list-card`
entity	string	Required	The entity_id of the entity you want to show.
feed_attribute	string	Optional	Attribute containing the feed
title	string	Optional	Add a custom title to the card.
row_limit	number	Optional	Limit the number of rows to display.
columns	object	Optional	List of columns to display.

Column object

Name	Type	Requirement	Description
title	string	Required	Column header to display.
field	string	Required	key value of the entity that you wish to display.
add_link	string	Optional	key value of entity that has the link property to use.
type	string	Optional	options are `image` and `icon`. Default is `None`. Only set this for images or icons, otherwise leave blank
style	object	Optional	CSS styles to apply to this column.
width	string	Optional	If type is image, sets the width of the image. Default 70.
height	string	Optional	If type is image, sets the width of the image. Default 90.
regex	string	Optional	Regex string to apply to field.
prefix	string	Optional	String to prefix to field.
postfix	string	Optional	String to postfix to field.

Note: If width and height are set to "auto", the image will not be resized. If width or height are set to "auto", the aspect ratio of the image will be maintained.

Installation

Add to HACS as a Custom Repo

Example Configuration

      - type: custom:list-card
        entity: sensor.engineering_feed
        title: Engineering Feed
        feed_attribute: entries
        columns:
          - title: ''
            type: image
            add_link: link
            field: image
          - title: Title
            field: title
            style:
              - white-space: nowrap
          - title: Description
            field: description

Troubleshooting

list-card's People

Contributors

Stargazers

Watchers

list-card's Issues

Cant find in HACS

I cant find it when I search for it at HACS!

Possibility for a date & Time Column

Would it be possible to have a date column where the data for the field came in in an ISO format
2023-10-22T20:30:00+00:00`` and the results is displayed in the time of the local time zone ... ideally in a user defined format In HA the template command is ``{{ as_timestamp(state_attr('binary_sensor.octopus_energy_target_test','target_times')[0]['valid_from']) | timestamp_custom("%A %R") }}
I have played around with this and got it to work partially but with no real success
It would also be useful to be able to format the outputted string maybe using some of the standard datetime format codes.
This would be particularly useful when interfacing to 'Bottlecap Dave's Octopus Energy Integration' where he quotes times always in UTC to get Agile Windows for charging and discharging
Of course if anyone can assits me in anyway then I would be more than welcome.

Style for Image

Thank you for this awesome contrib. Is there a way to apply the style property to the image?

list card not showing anymore after HA update..

there is no error, nothing.. just no card is shown without altering any of the config..

Could this be this issue ?
--> atomic7777/atomic_calendar#63

Link isn’t clickable on mobile

Set up an RSS feed with this tested it on desktop and links were fine but on mobile they don’t do anything or redirect to the website

edit: sorry it’s working i just didn’t add add_link

Unable to add in HACS

When trying to add list-card repository in HACS I get an error message:
Repository structure for 0.1.0 is not compliant.

Feature Request: Allow templating of field

The field attribute currently acts as a selector for the field of the feed to be displayed. It would be great if there was a possibility to apply templates to the field content.

Use case could be date formatting, where the field just contains and ISO date string but the frontend is supposed to display something nicer.

Extension: the field attribute could take more than one field, which then could be combined in a template.

Use case could be two data fields that are displayed in only one column. As a special case you do this already with the icons and the links.

Regex option - could you add more info/examples in readme?

First, thank you for this card and component. I am finally able to use RSS the way I've wanted in my HA install. It was what I had hoped the stock RSS component would do but never did. Bless you, sir!!

But I am not quite sure what the regex option does and if it would allow me to filter out entries in the list table. When you get a chance could you elaborate a little more in the docs on usage and perhaps provide an example or two?

If this can be used as a filter, this would solve an issue for me but I'm not sure how to go about it. I'd like to filter out any entry beginning with "NYSTA" or "NYSDOT" but not sure if understanding how this works would be the answer or not.

Thanks again for an awesome feature enhancement to HA!

Not so much an issue, but something fun made with your work!

Reasoning:
I wanted to align the Title / Summary to the right of the image and truncate the text if it got too long (the truncating proved to be a mistep, but bear with me). I started CSS Gridding it out!
This might not be perfect but might be a decent starting point, meh?
Thanks for making a great repo!

Requirements:

Sensor Config:

  - platform: feedparser
    name: NYT News
    feed_url: 'https://rss.nytimes.com/services/xml/rss/nyt/US.xml'
    date_format: '%a, %d %b %Y %H:%M:%S %Z'
    show_topn: 5
    scan_interval:
      hours: 1

Custom List Card Code:

type: custom:list-card
entity: sensor.nyt_news
title: ''
feed_attribute: entries
row_limit: 3
columns:
  - title: ''
    type: image
    field: media_content
    add_link: link
  - title: ''
    field: title
    add_link: link
  - title: ''
    field: summary
    add_link: link
  - title: ''
    field: published
card_mod:
  style: |
    ha-card table tbody tr {
      display: grid;
      grid-column-gap: 0.5rem;
      grid-row-gap: 0.2rem;
      grid-template-rows: auto 1fr;
      grid-template-areas: 
        "image title"
        "image summary"
        "image published";
      justify-content: start;
    }

    .media_content {
       grid-area: image;
    }

    .title {
       font-size: 0.9rem;
       font-weight: 700;
       grid-area: title;
       line-height: 1rem;
    }

    .summary {
       font-size: 0.8rem;
       grid-area: summary;
       line-height: 1rem;
    }

    .published {
       font-size: 0.7rem;
       grid-area: published;
       opacity: 0.5;
    }

Output:

Convert to TypeScript

Error when card is displayed before the sensor gets updated for the first time

I created custom mqtt sensor which gets its data on a regular basis, i.e. every minute. If I visit the page with the list-card before the first update of the sensor, I get the following error in the HA logs:

Logger: frontend.js.latest.202203012
Source: components/system_log/__init__.py:190
First occurred: 10:28:10 AM (1 occurrences)
Last logged: 10:28:10 AM

http://192.168.1.111:8123/hacsfiles/list-card/list-card.js:92:71 TypeError: can't convert undefined to object

Once the sensor is updated this error doesn't happen.

This is my sensor:

- platform: mqtt
  name: hostnames
  state_topic: "viktak/network/dhcp"
  value_template: >
    {{ value_json.hosts | length }}
  json_attributes_topic: "viktak/network/dhcp"
  json_attributes_template: >-
      {{
        {
        'hosts' : value_json.hosts
        } | tojson        
      }}

This is my card:

  - type: custom:list-card
    entity: sensor.hostnames
    title: Hostnames
    feed_attribute: hosts
    columns:
      - title: Hostname
        field: field4
      - title: IP Address
        field: field3
      - title: MAC Address
        field: field2

This is a sample JSON arriving:

{"hosts":[
  {
    "field1": "1648590673",
    "field2": "00:24:8c:66:7f:54",
    "field3": "192.168.1.222",
    "field4": "test",
    "field5": "01:00:24:8c:66:7f:54"
  },
  {
    "field1": "1648586977",
    "field2": "5c:cf:7f:18:d6:94",
    "field3": "192.168.1.147",
    "field4": "officehall-18D694",
    "field5": "*"
  },
  {
    "field1": "1648585868",
    "field2": "5c:cf:7f:2b:b3:78",
    "field3": "192.168.1.105",
    "field4": "bedroomhall-2BB378",
    "field5": "*"
  }
]}

I think, the correct behavior should be no error message, just the card with the header, but no rows.

Templates in field

I am having trouble getting templates to work in the "field" attribute. Specifically I was trying to remove text that is on every "summary".

Question:

Hey,
i have data nested within a table (train times - see example below).
is it possible to draw the data out into the table, from the nesting?
eg. to show the values for the next 4 trains in a table?

i was trying the following which worked, however this card then broke other things.

type: 'custom:flex-table-card'
        title: Worthing to Brighton Trains
        max_rows: 10
        entities:
          exclude: null
          include: sensor.next_train_to_btn
        columns:
          - align: center
            attr_as_list: next_trains
            modify: x.status
            name: status
          - align: center
            attr_as_list: next_trains
            modify: x.scheduled
            name: scheduled
          - align: center
            attr_as_list: next_trains
            modify: x.estimated
            name: estimated
          - align: center
            attr_as_list: next_trains
            modify: x.platform
            name: platform
          - align: center
            attr_as_list: next_trains
            modify: x.destination_name
            name: destination

data

{
"station_code": "WRH",
"calling_at": "BTN",
"next_trains": [
{
"origin_name": "Chichester",
"destination_name": "Brighton",
"status": "EARLY",
"scheduled": "09:26",
"estimated": "09:26",
"platform": "2",
"operator_name": "Southern"
},
{
"origin_name": "Chichester",
"destination_name": "Brighton",
"status": "ON TIME",
"scheduled": "09:55",
"estimated": "09:55",
"platform": "1",
"operator_name": "Southern"
},
{
"origin_name": "Chichester",
"destination_name": "Brighton",
"status": "ON TIME",
"scheduled": "10:26",
"estimated": "10:26",
"platform": "2",
"operator_name": "Southern"
},
{
"origin_name": "Chichester",
"destination_name": "Brighton",
"status": "ON TIME",
"scheduled": "10:55",
"estimated": "10:55",
"platform": "2",
"operator_name": "Southern"
}
],
"unit_of_measurement": "min",
"friendly_name": "Next train to BTN",
"icon": "mdi:train"
}{
"station_code": "WRH",
"calling_at": "BTN",
"next_trains": [
{
"origin_name": "Chichester",
"destination_name": "Brighton",
"status": "EARLY",
"scheduled": "09:26",
"estimated": "09:26",
"platform": "2",
"operator_name": "Southern"
},
{
"origin_name": "Chichester",
"destination_name": "Brighton",
"status": "ON TIME",
"scheduled": "09:55",
"estimated": "09:55",
"platform": "1",
"operator_name": "Southern"
},
{
"origin_name": "Chichester",
"destination_name": "Brighton",
"status": "ON TIME",
"scheduled": "10:26",
"estimated": "10:26",
"platform": "2",
"operator_name": "Southern"
},
{
"origin_name": "Chichester",
"destination_name": "Brighton",
"status": "ON TIME",
"scheduled": "10:55",
"estimated": "10:55",
"platform": "2",
"operator_name": "Southern"
}
],
"unit_of_measurement": "min",
"friendly_name": "Next train to BTN",
"icon": "mdi:train"
}

#enhancement - Please add HACS support for ease of install

Please add HACS support for ease of install.

I really enjoy this Plugin as it has been a great tool for me. Please make this easier for more people especially newer adopters to easily install this Plugin.

Subfield. multidimensional

Is there a way to select the value?
I want the image value as showen below

entries:

title: 'GGD Utrecht: Derde van besmette Verknipt-bezoekers uit regio had virus al'
title_detail:
type: text/plain
language: null
base: https://www.nu.nl/rss/Algemeen
value: >-
GGD Utrecht: Derde van besmette Verknipt-bezoekers uit regio had virus
al
links:
- rel: alternate
  type: text/html
  href: >-
  https://www.nu.nl/muziek/6148408/ggd-utrecht-derde-van-besmette-verknipt-bezoekers-uit-regio-had-virus-al.html
- length: '0'
  type: image/jpeg
  href: >-
  https://media.nu.nl/m/herxmqdaehck_sqr256.jpg/ggd-utrecht-derde-van-besmette-verknipt-bezoekers-uit-regio-had-virus-al.jpg
  rel: enclosure

Feature request: Filter keywords to include / exclude

Hi!

I am using this plugin for an RSS feed, and an awesome feature I am hoping to see is the ability to set a list of key words to include or exclude from the presented list.

If I ask for 3 lines, show only lines containing / not containing at least one of the words on the list.

Please note - my lists are in Hebrew, so encoding and language support would be also important to consider in the implementation

Hope to see this feature soon :)

Styling the Card

Hi Ian,

I am trying to apply styling to the list-card, specifically I want to remove the background-color for what I believe is the:

tbody tr:nth-child(odd) { background-color: var(--paper-card-background-color); } tbody tr:nth-child(even) { background-color: var(--secondary-background-color); }

Can I just change this to:

tbody tr:nth-child(odd) { background-color: transparent; } tbody tr:nth-child(even) { background-color: transparent; }

Is this changed in the .js file or do I need to add it in via the dashboard editor?

Icon field with link

How can I add a linked icon field?

this is my configuration for the field in question, but I am not able to make the icon appear

title: Ticket
type: icon
add_link: ticket
field: 'mdi:ticket-percent'

I've tried 'mdi: ticket-percent', mdi: ticket-percent, hass: ticket-percent, 'hass: ticket-percent', ticket-percent, 'ticket-percent'. But nothing works.

The table goes outside the boundaries of the card

There's a way to fix this?

entity: sensor.seventeentrack_packages_in_transit
title: Packages
feed_attribute: packages
row_limit: 20
columns:
  - title: Name
    field: friendly_name
    style:
      - white-space: nowrap
  - title: Status
    field: status
    style:
      - white-space: nowrap
  - title: Trcking number
    field: tracking_number
  - title: More info
    field: info_text
    style:
      - white-space: nowrap
  - title: location
    field: location

"Buy me a coffee" link is broken

Please fix

Can't find the List-card under HACS

Hello,

Is it correct the list-card is no longer available in HACS?

Feature request: Allow double row

Hi, it will be very interesting to be able to configure a double row, defining columns for each one, or at least been able to have fields spanned through columns in a different row. This will allow to have the descriptions or summaries in a different full width row.
I think it may be easily accomplished with a newrow and colspam attributes in the columns object attributes.
This will allow to have nice feeds like:
<tr><td><image></td><td>Title</td></tr><tr><td colspam=2>sumarry</tr>

Installed via HACS, visible in Resources, but not usable in YAML

I have a weird issue. I installed the card, and it shows in HACS and also in the Lovelace resources (as "/hacsfiles/list-card/list-card.js?hacstag=145479324011").

However, the use of the card seems not to work. I usually start with the examples, so:

type: custom:list-card
entity: sensor.engineering_feed
title: Engineering Feed
feed_attribute: entries
columns:
- title: Title
  field: title
- title: Description
  field: description

But I already get "No card type configured".

My hunch is that the resource is somehow incorrect or broken?

How to display enclosed images?

Hi,
I'm having issues to display images.

feed:

entries:
  - title: '''We don''t want war'': Russia, US clash at UN over Ukraine crisis'
    title_detail:
      type: text/plain
      language: null
      base: https://today.rtl.lu/rss/headlines
      value: '''We don''t want war'': Russia, US clash at UN over Ukraine crisis'
    summary: >-
      Russia and the United States clashed over Ukraine at the UN Security
      Council Monday, with Moscow's representative accusing Washington of
      whipping up hysteria over the 100,000 Russian troops massed on its
      neighbour's borders.
    summary_detail:
      type: text/html
      language: null
      base: https://today.rtl.lu/rss/headlines
      value: >-
        Russia and the United States clashed over Ukraine at the UN Security
        Council Monday, with Moscow's representative accusing Washington of
        whipping up hysteria over the 100,000 Russian troops massed on its
        neighbour's borders.
    published: Mon, Jan 31 08:01 PM
    links:
      - rel: alternate
        type: text/html
        href: http://today.rtl.lu/news/world/a/1855799.html
      - type: image/jpeg
        length: '0'
        href: >-
          https://static.rtl.lu/rtl2008.lu/nt/p/2022/01/31/20/dce0793a4b6acdb219b0e4d6cadda7ac.jpeg
        rel: enclosure
    link: http://today.rtl.lu/news/world/a/1855799.html
    id: http://today.rtl.lu/news/world/a/1855799.html
    guidislink: false
    content:
      - type: text/html
        language: null
        base: https://today.rtl.lu/rss/headlines
        value: >-
          <img align="left" hspace="5"
          src="https://static.rtl.lu/rtl2008.lu/nt/p/2022/01/31/20/dce0793a4b6acdb219b0e4d6cadda7ac.jpeg"
          />Russia and the United States clashed over Ukraine at the UN Security
          Council Monday, with Moscow's representative accusing Washington of
          whipping up hysteria over the 100,000 Russian troops massed on its
          neighbour's borders.
    slash_comments: '0'

card:

type: custom:list-card
entity: sensor.luxembourg_news
title: Luxembourg News
row_limit: 5
feed_attribute: entries
columns:
  - title: ''
    field: links
    type: image
  - title: ''
    field: title

result:

Only display Images

Is it possible to use only 1 column? I would like to only have the image shown.

type: 'custom:list-card'
entity: sensor.xkcd
title: XKCD
feed_attribute: entries
columns:
  - title: '1'
    type: image
    field: image
    add_link: link

Cannot convert undefined or null to object

Feed:

# feedreader:
#   urls:
#     - https://www.home-assistant.io/atom.xml
#     - https://merkurist.de/mainz/Newsfeed

sensor:
  platform: feedparser
  name: Merkurist Mainz
  feed_url: "https://merkurist.de/mainz/Newsfeed"
  date_format:
    "%a, %d %b %Y %H:%M:%S %Z"
    # Sun, 14 Apr 2024 17:29:38 GMT
  scan_interval:
    hours: 1
  inclusions:
    - title
    - link
    - description
    - image
    - pubDate
  # exclusions:
  #   - language

Error / Card

type: custom:list-card
entity: sensor.merkurist_mainz
title: Merkurist
feed_attribute: Entries
columns:
  - title: ''
    type: image
    add_link: link
    field: image
  - title: Title
    field: title
    style:
      - white-space: nowrap

add to HACS

I didn't see the list-card added to HACS if it's possible to add it. Thanks.

Not able to add list-card

Preform tap action on a cell

I've been using this card the last few days and it's great!
I'm just wondering if it is currently possible to preform a tap action on a cell. I'm looking to do something similar to how the entity button / picture entity card can work to change a state.

If not are there any plans on adding this as a future feature?

I also noticed that there are a few commented out lines in the code relating to a button type. Is that feature currently broken or a work in progress?

Thanks for your time

Readme request

Could you please add an example of the sensor values that would be parsed by this card?

How to ADD image?

The RSS feed of mine does not have images in items .

Is it possible to add images through lovelace?

RSS example:

<item>
   <title>[SubsPlease] Gochuumon wa Usagi Desu ka S3 - 06 (720p) [61498D46].mkv</title>
   <link>magnet:?xt=urn:btih:6DAUW25ROIGXYRR5H6F2V42WCIQAZM4A&dn=%5BSubsPlease%5D%20Gochuumon%20wa%20Usagi%20Desu%20ka%20S3%20-%2006%20%28720p%29%20%5B61498D46%5D.mkv&xl=771540651&tr=http%3A%2F%2Fnyaa.tracker.wf%3A7777%2Fannounce&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969%2Fannounce&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337%2Fannounce&tr=udp%3A%2F%2F9.rarbg.to%3A2710%2Fannounce&tr=udp%3A%2F%2F9.rarbg.me%3A2710%2Fannounce&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969%2Fannounce&tr=udp%3A%2F%2Ftracker.internetwarriors.net%3A1337%2Fannounce&tr=udp%3A%2F%2Ftracker.cyberia.is%3A6969%2Fannounce&tr=udp%3A%2F%2Fexodus.desync.com%3A6969%2Fannounce&tr=udp%3A%2F%2Ftracker3.itzmx.com%3A6961%2Fannounce&tr=udp%3A%2F%2Ftracker.torrent.eu.org%3A451%2Fannounce&tr=udp%3A%2F%2Ftracker.tiny-vps.com%3A6969%2Fannounce&tr=udp%3A%2F%2Fretracker.lanta-net.ru%3A2710%2Fannounce&tr=http%3A%2F%2Fopen.acgnxtracker.com%3A80%2Fannounce&tr=wss%3A%2F%2Ftracker.openwebtorrent.com</link>
   <guid isPermaLink="false">6DAUW25ROIGXYRR5H6F2V42WCIQAZM4A</guid>
   <pubDate>Sat, 14 Nov 2020 13:01:08 +0000</pubDate>
   <subsplease:size>735.8 MiB</subsplease:size>
</item>

My Lovelace entry:

- type: custom:list-card
  entity: sensor.subsplease_feed
  title: SubsPlease Release
  feed_attribute: entries
  columns:
      - title: ''
        field: title
         add_link: link
  row_limit: 27
  style:
      .: |
         ha-card {
              height: -webkit-fill-available;
         }

Custom element doesn't exist: list-card.

Hi,
Awesome work man.
I wanted to use your code with the RSS Feedparser, but I cannot make it work in the Lovelace card.
the error is:
`Custom element doesn't exist: list-card.
columns:

add_link: link
field: image
title: ''
type: image
field: title
style:
- white-space: nowrap
  title: Title
field: description
title: Description
entity: sensor.hotnews_romania
feed_attribute: entries
title: HotNews Romania
type: 'custom:list-card'`

I am running HA 0.107 in docker. And since a couple versions ago, they changed the location of resources. I cannot figure where the resources should be placed. I think that this is my issue.

Thank you for your time.

Small style request with headers

Just a small point, but it would be nice if the headers were excluded from any styling done with the style option. In my opinion, headers should remain untouched from any styling and should be in a bold font style by default.

Is this possible?

Using templates

Hi,
I was wondering if it is possible to use templates for the columns.

I have a date/time column and looks very ugly:

I don't need the whole time field, just the time. I tried to use a kinja2 template, but it didn't render anything:

{{ strptime("2021-02-10 08:37:59+02:00", "%X") }}

If templates are not usable, any other idea how to do it would be most welcome.

Can't find the repo in HACS

My bad!

Feature Request: Paging

This is a great Card - thanks!
Would be possible to add an AutoPaging property - therefore row_limit: x would become perhaps page_limit? I guess would be a nice addition ;) thanks :D

Doesn't work with custom component Feedparser

Hi,
list-card doesn't work with custom component Feedparser, I don't know if the problem is inside feedparser or list-card.
Bue

Feature Request: Ability to sort on any field

This is a great card - Thanks!!
Is it possible to add the ability to sort on any field in either ascending or descending order?
Thanks in advance.

2021.7 HA update and new Python

Hi trying to update to 2021.7 from 2021.3 but list-card does not work. I believe this is because 2021.7 has the updated python. Will you be updating list-card? Currently I am just staying with 2021.3 as list-card works really well. Thanks.

Possibility to scroll down automatically the list for news display

Hello,
I use this card after a feedparser of a RSS news stream, and it works very well.
I was wondering if this could be possible to automatically scroll down the list, or to select randomly only one row to display.
It should be possible using a javascript on the DIV displaying the card, but what I tried didn't work so far.
How should I proceed ?
I thank you for your help.
Regards.

Cannot select text in the list

I noticed that I cannot make a selection on the list rendered in HA. I would expect that a piece of text on a web page can be selected with the mouse etc.

Any reason it is not "click-and-draggable"? :)

Unable to display images

Hi, I am quite the newbie and I can't seem to figure out how to get my images to display from feedparser.

This is what my code looks like for the list:

columns:
  - field: title
    title: 'Title:'
  - field: summary
    title: 'Description:'
  - field: links
    title: 'Image:'
    type: image
entity: sensor.st_nu
feed_attribute: entries
row_limit: 5
type: 'custom:list-card'

And this is one of the entries from feedparser:

- title: "29-åring ny ägare till hus i Sundsvall – 1\_650\_000 kronor blev priset"
  title_detail:
    type: text/plain
    language: null
    base: 'https://www.st.nu/alla.xml'
    value: "29-åring ny ägare till hus i Sundsvall – 1\_650\_000 kronor blev priset"
  summary: "1\_650\_000 kronor fick Lars Emil Karström, 29 år, ge för huset på adressen Violvägen 4 i..."
  summary_detail:
    type: text/html
    language: null
    base: 'https://www.st.nu/alla.xml'
    value: "1\_650\_000 kronor fick Lars Emil Karström, 29 år, ge för huset på adressen Violvägen 4 i..."
  published: 'Fri, Jun 26 12:31 PM'
  links:
    - rel: alternate
      type: text/html
      href: >-
        https://www.st.nu/artikel/29-aring-ny-agare-till-hus-i-sundsvall-1-650-000-kronor-blev-priset
    - type: image/jpeg
      length: '0'
      href: >-
        https://bildix.mmcloud.se/bildix/api/images/c08e9a85-9177-4ee7-9195-d696d8b78020.jpeg?fit=crop&h=169&w=300
      rel: enclosure
  link: >-
    https://www.st.nu/artikel/29-aring-ny-agare-till-hus-i-sundsvall-1-650-000-kronor-blev-priset
  id: 12c518bb-e876-4d76-bdbd-1fb5a8be010e
  guidislink: false
  source:
    href: 'https://www.st.nu/alla.xml'
    title: Senaste nyheterna för Alla nyheter på st.nu

I want to display the image (in this case https://bildix.mmcloud.se/bildix/api/images/c08e9a85-9177-4ee7-9195-d696d8b78020.jpeg?fit=crop&h=169&w=300) in the 3rd column.

Any insight would be appreciated.

Edit: Oh, and this is what the lovelace UI looks like:

The original JSON would look like this:

[
  {
    "product_id": "K04W",
    "issue_datetime": "2022-05-16 05:00:24.337",
    "message": "Space Weather Message Code: WARK04\r\nSerial Number: 4102\r\nIssue Time: 2022 May 16 0500 UTC\r\n\r\nWARNING: Geomagnetic K-index of 4 expected\r\nValid From: 2022 May 16 0500 UTC\r\nValid To: 2022 May 16 0900 UTC\r\nWarning Condition: Onset\r\n\r\nNOAA Space Weather Scale descriptions can be found at\r\nwww.swpc.noaa.gov\/noaa-scales-explanation\r\n\r\nPotential Impacts: Area of impact primarily poleward of 65 degrees Geomagnetic Latitude.\r\nInduced Currents - Weak power grid fluctuations can occur.\r\nAurora - Aurora may be visible at high latitudes such as Canada and Alaska."
  },
  {
    "product_id": "K04A",
    "issue_datetime": "2022-05-15 02:53:30.973",
    "message": "Space Weather Message Code: ALTK04\r\nSerial Number: 2295\r\nIssue Time: 2022 May 15 0253 UTC\r\n\r\nALERT: Geomagnetic K-index of 4\r\nThreshold Reached: 2022 May 15 0247 UTC\r\nSynoptic Period: 0000-0300 UTC\r\n \r\nActive Warning: Yes\r\n\r\nNOAA Space Weather Scale descriptions can be found at\r\nwww.swpc.noaa.gov\/noaa-scales-explanation\r\n\r\nPotential Impacts: Area of impact primarily poleward of 65 degrees Geomagnetic Latitude.\r\nInduced Currents - Weak power grid fluctuations can occur.\r\nAurora - Aurora may be visible at high latitudes such as Canada and Alaska."
  },
  {
    "product_id": "K04W",
    "issue_datetime": "2022-05-15 02:30:15.460",
    "message": "Space Weather Message Code: WARK04\r\nSerial Number: 4101\r\nIssue Time: 2022 May 15 0230 UTC\r\n\r\nWARNING: Geomagnetic K-index of 4 expected\r\nValid From: 2022 May 15 0229 UTC\r\nValid To: 2022 May 15 1500 UTC\r\nWarning Condition: Onset\r\n\r\nNOAA Space Weather Scale descriptions can be found at\r\nwww.swpc.noaa.gov\/noaa-scales-explanation\r\n\r\nPotential Impacts: Area of impact primarily poleward of 65 degrees Geomagnetic Latitude.\r\nInduced Currents - Weak power grid fluctuations can occur.\r\nAurora - Aurora may be visible at high latitudes such as Canada and Alaska."
  }
]

So I configured multiscrape to do this:

- name: NOAA Space Weather - Alerts
  resource: https://services.swpc.noaa.gov/products/alerts.json
  scan_interval: 3600
  sensor:
    - unique_id: noaa_space_weather_alerts
      name: NOAA Space Weather - Alerts
      value_template: '{{ value_json[0]["product_id"] }}'
      attributes:
        - name: Entries
          value_template: |
            {% set temp = '' %}
            {% for message in value_json %}
            - product_id: {{ message.product_id }}
              issue_datetime: {{ message.issue_datetime }}
              message: {{ message.message }}
            {% endfor %}

It would generate something that looks like a feed, but it wouldn't work:

friendly_name: NOAA Space Weather - Alerts
entries: - product_id: K04W
  issue_datetime: 2022-05-16 05:00:24.337
  message: Space Weather Message Code: WARK04
Serial Number: 4102
Issue Time: 2022 May 16 0500 UTC

WARNING: Geomagnetic K-index of 4 expected
Valid From: 2022 May 16 0500 UTC
Valid To: 2022 May 16 0900 UTC
Warning Condition: Onset

NOAA Space Weather Scale descriptions can be found at
www.swpc.noaa.gov/noaa-scales-explanation

Potential Impacts: Area of impact primarily poleward of 65 degrees Geomagnetic Latitude.
Induced Currents - Weak power grid fluctuations can occur.
Aurora - Aurora may be visible at high latitudes such as Canada and Alaska.

- product_id: K04A
  issue_datetime: 2022-05-15 02:53:30.973
  message: Space Weather Message Code: ALTK04
Serial Number: 2295
Issue Time: 2022 May 15 0253 UTC

ALERT: Geomagnetic K-index of 4
Threshold Reached: 2022 May 15 0247 UTC
Synoptic Period: 0000-0300 UTC
 
Active Warning: Yes

NOAA Space Weather Scale descriptions can be found at
www.swpc.noaa.gov/noaa-scales-explanation

Potential Impacts: Area of impact primarily poleward of 65 degrees Geomagnetic Latitude.
Induced Currents - Weak power grid fluctuations can occur.
Aurora - Aurora may be visible at high latitudes such as Canada and Alaska.

- product_id: K04W
  issue_datetime: 2022-05-15 02:30:15.460
  message: Space Weather Message Code: WARK04
Serial Number: 4101
Issue Time: 2022 May 15 0230 UTC

WARNING: Geomagnetic K-index of 4 expected
Valid From: 2022 May 15 0229 UTC
Valid To: 2022 May 15 1500 UTC
Warning Condition: Onset

NOAA Space Weather Scale descriptions can be found at
www.swpc.noaa.gov/noaa-scales-explanation

Potential Impacts: Area of impact primarily poleward of 65 degrees Geomagnetic Latitude.
Induced Currents - Weak power grid fluctuations can occur.
Aurora - Aurora may be visible at high latitudes such as Canada and Alaska.