Merge branch 'master' into add-icon-column

iantrich · Jan 26, 2021 · 87719d3 · 87719d3
2 parents 2d5aff4 + a311647
commit 87719d3
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -45,10 +45,13 @@ From left to right: [feedparser](https://github.com/custom-components/sensor.fee
 | 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
 

diff --git a/list-card.js b/list-card.js
@@ -146,13 +146,24 @@ class ListCard extends HTMLElement {
 
                     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][0].hasOwnProperty('url')) {
-                            card_content += `<img src="${feed[entry][columns[column].field][0].url}" width="70" height="90">`;
-                          } else {
-                            card_content += `<img src="${feed[entry][columns[column].field]}" width="70" height="90">`;
-                          }
+                            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>`;
+                        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>`;