Pictuer with space in filename

Configuration Frontend
,
1

Hi everybody, I followed this tutorial Custom Button Card 5: Change Background using Input Select - YouTube to set the background of a button-card depending on the state of a input_select. It does work for files that do not contain spaces. Has anybody a idea how to adapt this to filenames with spaces? I tried to apply String() or the .replace() function to no avail.

And as an addition, does anyone know how to center the image?

Here is the yaml:

type: custom:button-card
entity: input_select.radiosender
show_state: false
show_name: false
show_icon: false
triggers_update:
  - input_select.radiosender
tap_action:
  action: call-service
  service: input_select.select_next
  service_data:
    entity_id: input_select.radiosender
styles:
  card:
    - background-color: transparent
    - height: 400px
    - background: |
        [[[
          var images = states["input_select.radiosender"].state; 
          return 'url(/local/pictures/radio-button/'+(images)+'.png) round'
        ]]]
    - background-size: cover
2

A normal space is url encoded as %20
So “my home sweet home.png” is my%20home%20sweet%20home.png

in Jinja2:

{{ "my home sweet home.png" | urlencode }}

gives

my%20home%20sweet%20home.png

EDIT I assume that style is about javascript so

var images = states["input_select.radiosender"].state;
var encodedUrl = 'url(/local/pictures/radio-button/' + encodeURIComponent(images) + '.png) round';
return encodedUrl;

something like that …

EDIT 2: You’ll have to play around with " and ’ to get what you need.

3

AwesomeK All it took was your hint with the %20 url encoding and the encodeURIComponent() function. Thanks alot! :slight_smile:

This is the code:

type: custom:button-card
entity: input_select.radiosender
show_state: false
show_name: false
show_icon: false
triggers_update:
  - input_select.radiosender
tap_action:
  action: call-service
  service: input_select.select_next
  service_data:
    entity_id: input_select.radiosender
hold_action:
  action: more-info
double_tap_action:
  action: more-info
styles:
  card:
    - background-color: transparent
    - height: 400px
    - background: |
        [[[
          var images = states["input_select.radiosender"].state; 
          return 'url(/local/pictures/radio-button/'+encodeURIComponent(images)+'.png) round'
        ]]]
    - background-size: cover
4

Can you please mark my reply as solution, so it will close your topic.
Thank you :slight_smile:

5

Sure thing. Thank you!

1 Like