Dynamic image from sensor value

[Mrianphill (Ian Hill)]

Hi noob here,

I have a picture-element card to show a football match. I’m trying to add the club badge next to each team using an image as below but the image is not showing up, just a grey missing image box.

- type: image
  entity: sensor.next_liverpool_fixture_away_team
  image: >
         "/local/images/football/" + {{ sensor.next_liverpool_fixture_away_team }} +".svg"
  style:
      top: 35%
      left: 30%
      width: 5%
      transform: translate(0%,0%)

I have tried setting image : “/local/images/football/Liverpool.svg” and that works as expected and {{ sensor.next_liverpool_fixture_away_team }} returns Liverpool so the path would be the same.

Am I doing something wrong or is it not possible to do it this way?

Thanks

[eggman (bertie basset)]

Templates are not supported everywhere by default. But there are options.

You could probably do it using a markdown card using an image tag ![Image](http://url/a.png)

Markdown card

If not, then either of these custom cards will do it.

100% Templatable Lovelace Configurations

Lovelace Templates I’ve gone and made a crazy card that allows you to pretty much template anything in Lovelace for your card configurations using any information available on the frontend; states, attributes, user, etc. Want state/attribute-based icons? DONE! Want dynamic stacks; vertical vs horizontal based on user? DONE! Want OR conditionals? DONE! The list is pretty much endless and I’m sure you all will come up with some crazy stuff. Be sure to share. Go nuts! Enjoy!

Lovelace card-templater card (Jinja2 card templating in Lovelace!)

I had looked at the config-template card but, since I wanted to be able to reuse the Jinja2 templates I use in the rest of Home Assistant, I decided to see if I could create a card like that which could apply Jinja2 templates Lovelace cards. Introducing the card-templater card https://github.com/gadgetchnnel/lovelace-card-templater Installation This requires card-tools to be installed, check the link for details on installing this if you don’t have it installed. This card can either be instal…

[Mrianphill (Ian Hill)]

Thanks for the help I’ll give them a go and let you know how I get on

[Mrianphill (Ian Hill)]

Thanks eggman,

I went with the config-template-card and got it to work with the below which I’m including in case anyone else wants to do something similar.

         - type: 'custom:config-template-card'
            entities:
              - sensor.next_liverpool_fixture_away_team
            card:
              type: 'custom:hui-image-element'
              entity: sensor.next_liverpool_fixture_away_url
              image: "${states['sensor.next_liverpool_fixture_away_url'].state}"
            style:
                top: 45%
                left: 35%
                width: 5%
                height: 5%
                transform: translate(0%,2%)

Thanks
Ian

[daneboom]

Hi Mr Ian

I AM wanting to do something similar… and found this post but I’m confused what a hui-image-element is? I can’t really find any reference to this when Googling. After LOTS of fiddling I got the above code snippet to be accepted into my lovelace, I had to include it like this. At the moment it displays nothing, because I don’t have the liverpool fixtures sensors etc.

  - title: WoWo
    config:
      - type: 'custom:config-template-card'
        entities:
          - sensor.next_liverpool_fixture_away_team
        card:
          type: 'custom:hui-image-element'
          entity: sensor.next_liverpool_fixture_away_url
          image: '${states[''sensor.next_liverpool_fixture_away_url''].state}'
        style:
          top: 45%
          left: 35%
          width: 5%
          height: 5%
          transform: 'translate(0%,2%)'

What I’m wanting to do is show the caller name and number and ideally a photograph for incoming callers. Bit of a challenge. Thanks

[eggman (bertie basset)]

@daneboom

‘custom:hui-image-element’

Is an image element for the picture-elements card which is being used in an ‘unsupported’ way as a row in an entities card. No harm in this as long as you accept the functionality might not be available in future releases.

[Mrianphill (Ian Hill)]

Eggman beat me to it. As he says It is just the way the standard card is referenced for the custom control

Ian

[daneboom]

Mr Ian would you mind posting the full ‘tab’ or ‘page’ for your lovelace config? I can’t figure out how to insert this into an existing lovelace ‘tab’ or ‘page’ ? Thank you
I’m also using node-red to send the full local image location as an MQTT sensor to Home Assistant but I’m not sure that’s gonna work…

         - type: 'custom:config-template-card'
            entities:
              - sensor.next_liverpool_fixture_away_team
            card:
              type: 'custom:hui-image-element'
              entity: sensor.next_liverpool_fixture_away_url
              image: "${states['sensor.next_liverpool_fixture_away_url'].state}"
            style:
                top: 45%
                left: 35%
                width: 5%
                height: 5%
                transform: translate(0%,2%)

[Mrianphill (Ian Hill)]

Here you go it shows a couple of images of the teams playing and the date and time. I hope it helps

- title: Information2
    path: information2
    panel: false
    icon: mdi:information-outline
    badges: []
    cards:
      - type: picture-elements
        image: "/local/images/blank_background6.png"
        elements: 
          - type: image
            entity: sensor.next_liverpool_fixture_competition
            state_image : 
              "PL": /local/images/football/pl.svg
              "FA": /local/images/football/fa.svg
              "CL": /local/images/football/cl2.svg
            style:
              position: absolute
              top: 18%
              width: 20%
              transform: translate(20%,0%)
          - type: 'custom:config-template-card'
            entities:
              - sensor.next_liverpool_fixture_home_team
            card:
              type: 'custom:hui-image-element'
              entity: sensor.next_liverpool_fixture_home_url
              image: "${states['sensor.next_liverpool_fixture_home_url'].state}"
            style:
                top: 15%
                left: 35%
                width: 5%
                height: 5%
                transform: translate(0%,0%)
                
          - type: state-label
            entity: sensor.next_liverpool_fixture_matchday
            style:
              left: 40%
              top: 0%
              font-size: 12px
              line-height: 12px
              transform: translate(0%,0%)

              
          - type: state-label
            entity: sensor.next_liverpool_fixture_home_team
            style:
              left: 40%
              top: 15%
              font-size: 20px
              line-height: 20px
          
              transform: translate(0%,0%)
              
          - type: 'custom:config-template-card'
            entities:
              - sensor.next_liverpool_fixture_away_team
            card:
              type: 'custom:hui-image-element'
              entity: sensor.next_liverpool_fixture_away_url
              image: "${states['sensor.next_liverpool_fixture_away_url'].state}"
            style:
                top: 45%
                left: 35%
                width: 5%
                height: 5%
                transform: translate(0%,2%)
                
          - type: state-label
            entity: sensor.next_liverpool_fixture_away_team
            style:
              left: 40%
              top: 45%
              font-size: 20px
              line-height: 20px
              
              transform: translate(0%,0%)
          - type: state-label
            entity: sensor.next_liverpool_fixture_kickoff
            style:
              left: 40%
              top: 65%
              font-size: 12px
              line-height: 12px
             
              transform: translate(0%,0%)
          

Regards
Ian

[daneboom]

Thanks Ian - got it sort of working but for some weird reason even though all the sensors are updating correctly unless I refresh the page, when the local URL changes, the lovelace page doesn’t want to show the image. It shows a broken image. But a refresh sorts it out straight away. Weird. Thanks

[ralphieq (Rafael Quinones)]

Thank you for sharing this! I have been trying to get a dynamic image overlay on a picture-element and this was what I was missing.

[mellamomax (Mellamo)]

Old post but i´m having problem with this setup…
I´ve tried everything suggested above but i just cant style the image itself…
Not move it, size it, hide it, color it. nothing.

What am I doing wrong?
Note: I see the correct image, its just way to big. I´ve also tried Card Mod but without success

type: custom:config-template-card
entities:
  - sensor.barca_cl_team_logo
card:
  type: custom:hui-image-element
  entity: sensor.barca_cl_team_logo
  image: ${states['sensor.barca_cl_team_logo'].state}
style:
  top: 15%
  left: 35%
  width: 5%
  height: 5%
  transform: translate(0%,0%)