How to display enclosed images? #43

deam0n · 2022-02-01T00:30:09Z

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:

The text was updated successfully, but these errors were encountered:

Dynamix72 · 2022-02-01T14:13:27Z

I have the same issue for a different news feed. The image is in links part of the feedparser. Any luck to solve this?

deam0n · 2022-03-23T23:17:35Z

I have the same issue for a different news feed. The image is in links part of the feedparser. Any luck to solve this?

yes!

I've changed the card code and added a couple of lines:


class ListCard extends HTMLElement {

    constructor() {
      super();
      this.attachShadow({ mode: 'open' });
    }

    setConfig(config) {
      if (!config.entity) {
        throw new Error('Please define an entity');
      }

      const root = this.shadowRoot;
      if (root.lastChild) root.removeChild(root.lastChild);

      const cardConfig = Object.assign({}, config);
      const columns = cardConfig.columns;
      const card = document.createElement('ha-card');
      const content = document.createElement('div');
      const style = document.createElement('style');
      style.textContent = `
            ha-card {
              /* sample css */
            }
            table {
              width: 100%;
              padding: 0 16px 16px 16px;
            }
            thead th {
              text-align: left;
            }
            tbody tr:nth-child(odd) {
              background-color: var(--paper-card-background-color);
            }
            tbody tr:nth-child(even) {
              background-color: var(--secondary-background-color);
            }
            .button {
              overflow: auto;
              padding: 16px;
            }
            paper-button {
              float: right;
            }
            td a {
              color: var(--primary-text-color);
              text-decoration-line: none;
              font-weight: normal;
            }
          `;

      // Go through columns and add CSS sytling to each column that is defined
      if (columns) {
        for (let column in columns) {
          if (columns.hasOwnProperty(column) && columns[column].hasOwnProperty('style')) {
            let styles = columns[column]['style'];

            style.textContent += `
              .${columns[column].field} {`

            for (let index in styles) {
              if (styles.hasOwnProperty(index)) {
                for (let s in styles[index]) {
                  style.textContent += `
                  ${s}: ${styles[index][s]};`;
                }
              }
            }

            style.textContent += `}`;
          }
        }
      }

      content.id = "container";
      cardConfig.title ? card.header = cardConfig.title : null;
      card.appendChild(content);
      card.appendChild(style);
      root.appendChild(card);
      this._config = cardConfig;
    }

    set hass(hass) {
      const config = this._config;
      const root = this.shadowRoot;
      const card = root.lastChild;

      if (hass.states[config.entity]) {
        const feed = config.feed_attribute ? hass.states[config.entity].attributes[config.feed_attribute] : hass.states[config.entity].attributes;
        const columns = config.columns;
        this.style.display = 'block';
        const rowLimit = config.row_limit ? config.row_limit : Object.keys(feed).length;
        let rows = 0;

        if (feed !== undefined && Object.keys(feed).length > 0) {
          let card_content = '<table><thread><tr>';

          if (!columns) {
            card_content += `<tr>`;

            for (let column in feed[0]) {
              if (feed[0].hasOwnProperty(column)) {
                card_content += `<th>${feed[0][column]}</th>`;
              }
            }
          } else {
            for (let column in columns) {
              if (columns.hasOwnProperty(column)) {
                card_content += `<th class=${columns[column].field}>${columns[column].title}</th>`;
              }
            }
          }

          card_content += `</tr></thead><tbody>`;

          for (let entry in feed) {
            if (rows >= rowLimit) break;

            if (feed.hasOwnProperty(entry)) {
              if (!columns) {
                for (let field in feed[entry]) {
                  if (feed[entry].hasOwnProperty(field)) {
                    card_content += `<td>${feed[entry][field]}</td>`;
                  }
                }
              } else {
                let has_field = true;

                for (let column in columns) {
                  if (!feed[entry].hasOwnProperty(columns[column].field)) {
                    has_field = false;
                    break;
                  }
                }

                if (!has_field) continue;
                card_content += `<tr>`;

                for (let column in columns) {
                  if (columns.hasOwnProperty(column)) {
                    card_content += `<td class=${columns[column].field}>`;

                    if (columns[column].hasOwnProperty('add_link')) {
                      card_content +=  `<a href="${feed[entry][columns[column].add_link]}" target='_blank'>`;
                    }

                    if (columns[column].hasOwnProperty('type')) {
                      if (columns[column].type === 'image') {
                        if (columns[column].hasOwnProperty('width')) {
                          var image_width = columns[column].width;
                        } else {
                          var image_width = 70;
                        }
                        if (columns[column].hasOwnProperty('height')) {
                          var image_height = columns[column].height;
                        } else {
                          var image_height = 90;
                        }
                        if (feed[entry][columns[column].field][1].hasOwnProperty('href')) {
                            var url = feed[entry][columns[column].field][1].href
                        } else if(feed[entry][columns[column].field][0].hasOwnProperty('url')) {
							var url = feed[entry][columns[column].field][0].url
						}else{
                          var url = feed[entry][columns[column].field]
                        }
                          card_content += `<img id="image" src="${url}" width="${image_width}" height="${image_height}">`;
                      } else if (columns[column].type === 'icon') {
                        card_content += `<ha-icon class="column-${columns[column].field}" icon=${feed[entry][columns[column].field]}></ha-icon>`;
                      }
                      // else if (columns[column].type === 'button') {
                      //   card_content += `<paper-button raised>${feed[entry][columns[column].button_text]}</paper-button>`;
                      // }
                    } else {
                      let newText = feed[entry][columns[column].field];

                      if (columns[column].hasOwnProperty('regex')) {
                        newText = new RegExp(columns[column].regex).exec(feed[entry][columns[column].field]);
                      } 
                      if (columns[column].hasOwnProperty('prefix')) {
                        newText = columns[column].prefix + newText;
                      } 
                      if (columns[column].hasOwnProperty('postfix')) {
                        newText += columns[column].postfix;
                      }

                      card_content += `${newText}`;
                    }

                    if (columns[column].hasOwnProperty('add_link')) {
                      card_content +=  `</a>`;
                    }

                    card_content += `</td>`;
                  }
                }
              }

              card_content += `</tr>`;
              ++rows;
            }
          }

          root.lastChild.hass = hass;
          card_content += `</tbody></table>`;
          root.getElementById('container').innerHTML = card_content;
        } else {
          this.style.display = 'none';
        }
      } else {
        this.style.display = 'none';
      }
    }

    getCardSize() {
      return 1;
    }
  }

  customElements.define('list-card', ListCard);

Since this is not the most elegant solution and I'm not familiar with github, I'll not request a PR.
But you can copy the code above and try it.

Dynamix72 · 2022-04-04T10:54:34Z

Thanks for your update. I tried the new code, but unfortunately it didn't show the image. What do you use in the configuration.yaml to set de news feed?

deam0n · 2022-04-04T11:37:19Z

I use feedparser to get the feed on my configuration.yaml:

sensor:  
  - platform: feedparser
    name: Luxembourg News
    feed_url: "https://today.rtl.lu/rss/headlines"

I've replaced the card code with the code of the post above (make sure to clean your cache).

And this is my card configuration:

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

result:

Dynamix72 · 2022-04-04T12:30:50Z

Even with your config, i can't get the images.

Did you also made changes to the feedparser?

deam0n · 2022-04-04T13:58:26Z

No, only the changes to the js of the card.

My best guess is that you're still caching the old (unmodified) file. HA has a pretty aggressive cache system.

try to:

ctrl+shift+del (delete all cached files and images)
ctrl+F5 (to force refresh)

Dynamix72 · 2022-04-06T14:12:40Z

Yes!!!! Got it finally working. The HACS plugin list-card was somehow still active (so you can't edit the plugin javascript).
I removed that list-card and manualy created the file and directory. Then set the source in the dashboard to the local directory and file.

Many thanks Deam0n!

Dynamix72 · 2023-03-20T12:27:02Z

Hi, Je dient een aangepaste versie van de list card te gebruiken. Deze dient handmatig toegevoegd te worden aan home assistant. zie ook #43 (comment)

…

________________________________ Van: Raznor09 ***@***.***> Verzonden: woensdag 15 maart 2023 13:00 Aan: iantrich/list-card ***@***.***> CC: Dynamix72 ***@***.***>; Mention ***@***.***> Onderwerp: Re: [iantrich/list-card] How to display enclosed images? (Issue #43) @Dynamix72<https://github.com/Dynamix72> I have the text but no images: confi.yaml: sensor: platform: feedparser name: Nu Nieuws feed_url: 'https://www.nu.nl/rss/Algemeen' date_format: '%a, %d %b %Y %H:%M:%S %Z' scan_interval: hours: 1 inclusions: - title - link - description - image - pubDate exclusions: - language Lovelace Card: type: custom:list-card entity: sensor.nu_nieuws title: Nu.nl RSS feed_attribute: entries row_limit: 4 columns: * title: '' field: image type: image width: 80 * title: '' field: title add_link: link [nu]<https://user-images.githubusercontent.com/114279718/225302622-b97ef9d3-dcee-4051-958d-ff6f2a585a29.png> — Reply to this email directly, view it on GitHub<#43 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AUFYMXHYCSU4G7Y2OFXUROTW4GVOVANCNFSM5NHXZT2A>. You are receiving this because you were mentioned.Message ID: ***@***.***>

Raznor09 · 2023-03-20T13:58:28Z

Hi, Je dient een aangepaste versie van de list card te gebruiken. Deze dient handmatig toegevoegd te worden aan home assistant. zie ook #43 (comment)
…
________________________________ Van: Raznor09 @.> Verzonden: woensdag 15 maart 2023 13:00 Aan: iantrich/list-card @.> CC: Dynamix72 @.>; Mention @.> Onderwerp: Re: [iantrich/list-card] How to display enclosed images? (Issue #43) @Dynamix72 https://github.com/Dynamix72 I have the text but no images: confi.yaml: sensor: platform: feedparser name: Nu Nieuws feed_url: 'https://www.nu.nl/rss/Algemeen' date_format: '%a, %d %b %Y %H:%M:%S %Z' scan_interval: hours: 1 inclusions: - title - link - description - image - pubDate exclusions: - language Lovelace Card: type: custom:list-card entity: sensor.nu_nieuws title: Nu.nl RSS feed_attribute: entries row_limit: 4 columns: * title: '' field: image type: image width: 80 * title: '' field: title add_link: link [nu]https://user-images.githubusercontent.com/114279718/225302622-b97ef9d3-dcee-4051-958d-ff6f2a585a29.png — Reply to this email directly, view it on GitHub<#43 (comment)>, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AUFYMXHYCSU4G7Y2OFXUROTW4GVOVANCNFSM5NHXZT2A. You are receiving this because you were mentioned.Message ID: @.***>

Hi, idd had het al opgelost, bedankt

heidle78 · 2024-03-11T19:24:34Z

@deam0n
Short question - even if it´s some time ago, is it still working? I can´t manage. I tried to build it up on my own with the new code but no pics - really strange

heidle78 · 2024-03-12T10:20:23Z

Incredible, took a day to recognize that I changed the code...now done. I only have issues if I want to implement a link -it always ends not in the internet, it always opens my HA page

Dynamix72 mentioned this issue Apr 6, 2022

Subfield. multidimensional #37

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to display enclosed images? #43

How to display enclosed images? #43

deam0n commented Feb 1, 2022

Dynamix72 commented Feb 1, 2022

deam0n commented Mar 23, 2022

Dynamix72 commented Apr 4, 2022

deam0n commented Apr 4, 2022

Dynamix72 commented Apr 4, 2022

deam0n commented Apr 4, 2022

Dynamix72 commented Apr 6, 2022 •

edited

Loading

Dynamix72 commented Mar 20, 2023 via email

Raznor09 commented Mar 20, 2023

heidle78 commented Mar 11, 2024

heidle78 commented Mar 12, 2024

How to display enclosed images? #43

How to display enclosed images? #43

Comments

deam0n commented Feb 1, 2022

Dynamix72 commented Feb 1, 2022

deam0n commented Mar 23, 2022

Dynamix72 commented Apr 4, 2022

deam0n commented Apr 4, 2022

Dynamix72 commented Apr 4, 2022

deam0n commented Apr 4, 2022

Dynamix72 commented Apr 6, 2022 • edited Loading

Dynamix72 commented Mar 20, 2023 via email

Raznor09 commented Mar 20, 2023

heidle78 commented Mar 11, 2024

heidle78 commented Mar 12, 2024

Dynamix72 commented Apr 6, 2022 •

edited

Loading