Template as image URL in picture elements card

[chaibas]

I’m trying to use the state of this sensor,

{{states('sensor.jewish_calendar_day_of_the_omer')}}

to show different images on this picture elements card.

It doesn’t seem to work, even though in developer tools the template renders as expected. Does anyone know why?

[nickrout]

As you haven’t shown us the card config who knows? Posting a picture is useless, particularly if there are parts hidden! yaml please!

Also, the word ‘template’ is not found on this page Picture Elements Card - Home Assistant so I am not sure it is even templatable.

[tom_l]

It is not. At least not without Ian’s third party “card”:

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!

[chaibas]

type: picture-elements
image: /local/sefira/backround light.jpg
elements:
  - type: image
    image: /local/sefira/day/{{states('sensor.jewish_calendar_day_of_the_omer')}}.gif
    style:
      top: 11%
      left: 50%
      tranform: none
      width: 75%
      transform: translate(-50%,-50%)
  - type: image
    image: >-
      /local/sefira/midah/{{states('sensor.jewish_calendar_day_of_the_omer')}}
      (1).gif
    style:
      top: 84%
      left: 63%
      width: 37%
      transform: translate(-100%,0%)

[chaibas]

I’ll check that out. Thank you!

[teadragon7]

BH, This is exactly what I am currently trying to do. Were you able to get it to work? Can you please share your code?

[mirekmal (Mirek Malinowski)]

As Tom_I mentioned picture lements card is not templatable directly and custom:config-template-card is requred to make it. Below is sample code for one of my cards, where I use zone name to select corresponding background for person card. Please note that you can, but should not template main piocture of the card for performance issues. This will work but will cause lots of flickering as entire card will be redrawn at any change. Better solution is to use image element to overlay entire card and template this element only. obviously you will need to play a bit with styling to make it perfectly.

type: picture-elements
image: /local/overlay1.png # dummy background picture
elements:
  - type: custom:config-template-card
    entities:
      - device_tracker.mirek_icloud_iphone_zone_name
    variables:
      - states['sensor.mirek_icloud_iphone_zone_name'].attributes.zone_fname
    element:
      type: image
      image: ${'/local/' + vars[0] + '.jpg'} # this is templatable image