Variable as URL

Configuration Frontend
1

I am using a picture-elements card as my HA initial display. There is a background picture displayed which changes from time to time. Historically I have just used a common file name to which I copy the desired picture file. Now I am on a mission to have this happen automatically. Using the ‘Season’ integration I have set up a variable and via a script choose the appropriate picture file URL and copy the URL to the variable. That all works correctly but I have not been able to use the variable as the URL in the picture-elements card. I am using a template to extract the URL text but I don’t know if that is permitted on this card or if I am just doing it all wrong.

type: picture-elements
panel: true
image: "{{ states( 'var.season_pix_path' ) }}"
width: 99.9%
title: Today
2

Do not use dynamic picture for main image, you will face issues with refreshing the image.
Use dynamic picture as image element of the card instead. It can’t be directly templated in picture-elments card, so I use additionally config-templete-card. Here is sample code I use for person card and I have dynamic pictures representing defined zones:

type: picture-elements
image: /local/overlay1.png # does not matter what it is, just has to be defined
elements:
  type: custom:config-template-card
  entities:
    - sensor.mirek_icloud_iphone_zone_name # this is entity/list of entities that their state change triggers card refresh
  variables:
    - states['sensor.mirek_icloud_iphone_zone_name'].attributes.zone_fname # variable that defines zone name of picture to be used
  element:
    type: image
    image: ${'/local/' + vars[0] + '.jpg'} # actual template that cobines zone name with location and extension to get full url

Hope this helps to start…

3

I will see if this works for what I am trying. As far as the refresh issue of which you speak, I did have this problem frequently when changing images. Thanks to a post I read on this issue I have found a work around that has so far worked unfailingly. By stipulating a width for the image the image is correctly refreshed, i.e. width: 99.99% or similar. That percentage is what I settled on as it obviously has little effect on the actual picture width.

4

I was never able to get the image: entry to see the variable. I did try your example using the actual text URL but the problem was that the image, rather than filling the space that it did previously, was about 1/4 size in the left margin. Attempts to move the image and scale it were not satisfactory as setting the top: to anything but zero achieved nothing. There is a colored band at the top of the card with text and setting top: to zero cause the image to cover it. Scaling helped but scaling seems a bit unreliable as only certain parameters caused the image to behave in any linear manner.
The real problem comes down to my inability to get variables: to work. Using the HA Developer templating tool, the text contents of the variable are properly extracted but testing the variables: functionality there was not that helpful. If there was a way to ‘peek’ at the variable ‘vars[0]’ inside the card that would be helpful but I have not found a way to do that.

5

You can try to use markdown card to check how the variable is evalueated in dashboard

type: custom:config-template-card
entities:
  - device_tracker.mirek_icloud_iphone_zone_name
variables:
  - states['sensor.mirek_icloud_iphone_zone_name'].attributes.zone_fname
card:
  type: markdown
  content: ${'/local/' + vars[0] + '.jpg'}

image
image963×250 23.4 KB

Also, what is important, you need to ensure that:
format of URL is as on my screenshot (if you are using local file)
file is stored in /config/www folder
This is due to how HA serves local resources to web server.