Button card, change background to sensor value on state value?

Configuration Frontend
1

I’m trying to change the background image based on a sensor value. Now I have the default off image, working, but when I use JS to template the state value for on, the YAML will reset on save. Code below:

type: custom:button-card
entity: sensor.ps5_mxp_activity
name: PS5 Game Cover
show_name: false
show_icon: false
aspect_ratio: 2/3
state:
  - value: playing
    styles:
      card:
        - background-image: |
          [[[
            return `url(${states['sensor.playstation_cover_from_steamgriddb'].state})`;
          ]]]
        - background-size: cover;
styles:
  card:
    - background-image: url("/local/images/ps5-offline.jpg");
    - background-size: cover;

How do I properly write this so the value sticks?

2

Do the styling inside the “state:”-statement:

state:
  - value: "off"
    styles:
      card:
        - background-color: red;
  - value: "on"
    styles:
      card:
        - background-color: green;
3

I actually did it this way, as I read some other posts stating having a conditional card up.

          - type: conditional
            conditions:
              - condition: state
                entity: switch.ps5_mxp_power
                state: "on"
            card:
              type: custom:button-card
              name: PS5 Game Cover
              show_name: false
              show_icon: false
              aspect_ratio: 2/3
              styles:
                card:
                  - background-image: |
                      [[[
                        if (states['sensor.ps5_mxp_activity'].state === 'playing')
                          return `url(${states['sensor.playstation_cover_from_steamgriddb'].state})`;
                        return `url("/local/images/ps5.webp")`;
                      ]]]
                  - background-size: cover;
          - type: conditional
            conditions:
              - condition: state
                entity: switch.ps5_mxp_power
                state: "off"
            card:
              type: custom:button-card
              name: PS5 Game Cover
              show_name: false
              show_icon: false
              aspect_ratio: 2/3
              styles:
                card:
                  - background-image: url("/local/images/ps5-offline.jpg")
                  - background-size: cover;
4

If it works for you, it works…