Trying to display Sonos album art from a sensor

Configuration
1

I’m creating an interface completely based on Picture Element Cards and one of my pages is a custom layout for music control. I want to display the album art for the current song playing on Sonos and I feel like I’m SO CLOSE but don’t know how to finish…

I created a sensor (two of them actually, just to be sure I was doing this right) to grab the url of the art:

- platform: template
  sensors:
    album_art:
      friendly_name: "Album Art"
      value_template: "http://192.168.2.98:8123{{ state_attr('media_player.tv_room_sonos', 'entity_picture') }}.jpg"

- platform: template
  sensors:
    sonos_art:
      friendly_name: "Sonos Art"
      value_template: "{{ state_attr('media_player.tv_room_sonos', 'entity_picture') }}"

So now I have two sensors: sensor.sonos_art and sensor.album_art and either will return a path like this:
/api/media_player_proxy/media_player.tv_room_sonos?token=e0159aa4d5be2e848cdd1dfbde076eb2435fc1b146eea24d6a4ee4f21e1bf129&cache=eb2f5a426813b506

But how do I use that sensor to show the image in my Picture Elements Card?

If I just paste the path from the sensors above, it displays the image - so I know that the path works - but I need it to update with the media player. Below is the code that works with just the path.

What do I need to put in the image line to pull from one of the sensors I created?

      - type: picture-elements
        elements:
          - image: /api/media_player_proxy/media_player.tv_room_sonos?token=e0159aa4d5be2e848cdd1dfbde076eb2435fc1b146eea24d6a4ee4f21e1bf129&cache=eb2f5a426813b506
            style:
              left: 50.1%
              top: 40.3%
              width: 24%
            # tap_action: none
            type: image
2

I found one way to do it using the Mini Media Player. I just hid all the elements I don’t need. There’s probably a more efficient way, but this works:


          - type: custom:mini-media-player
            entity: media_player.tv_room_sonos
            artwork: full-cover
            hide:
              volume: true
              source: true
              power_state: true
              power: true
              controls: true
              icon: true
              progress: true
              name: true
              info: true
              source: true
            style:
              left: 50.1%
              top: 40.3%
              width: 24%
4 Likes