Ok, feels like we are out of the scope for this card 
Not sure how to solve it. Conditional card - Home Assistant ?
I found this, for the mini media player - but not sure how to amend that for Sonos Card, because thereâs no easy way to tell what groups are playing or to select a particular group for the cardâŚ
type: custom:auto-entities
show_empty: false
card:
type: entities
filter:
template: |
[
{% for player in states.media_player
| selectattr('state', 'eq', 'playing')
| selectattr('attributes.group_members', 'defined')
if player.attributes.group_members[0] == player.entity_id %}
{{
{
'type': 'custom:mini-media-player',
'entity' : player.entity_id,
'artwork' : 'full-cover',
'info' : 'scroll',
'hide': {
'power': true,
'source': true,
'controls': true,
'group_button': true,
'volume': true,
'icon': true
},
'speaker_group': {
'platform': 'sonos',
'show_group_count': true,
'entities': [
{
'entity_id': 'media_player.kitchen',
'name': 'Kitchen'
},
{
'entity_id': 'media_player.living_room',
'name': 'Living Room'
},
{
"entity_id": "media_player.marcbed",
"name": "Marc"
},
{
"entity_id": "media_player.mancave",
"name": "Mancave"
},
{
"entity_id": "media_player.move",
"name": "Move"
}
]
}
}
}},
{% endfor %}
Does this card work with google speakers/ media_players?
You can, by setting:
´showNonSonosPlayers: true # default is false, which means only Sonos players will be shown.`
But I recommend you use the more generic version of this card if you are not using sonos: GitHub - punxaphil/maxi-media-player: Media card for Home Assistant UI with a focus on managing multiple media players, but not excluding single player setups.
1 Like
ChatGPT helped me to add great looking color background to the card. The background is based on a blurred image of the current album art, thus it always aligns with the cloros scheme of the album art.
You can play with adjusting the level of blur, brightness and saturation.
Thought to share so you can have fun with it, too.
(I also tweaked some elements of the card)
`type: custom:sonos-card
entityId: media_player.kitchen
card_mod:
style:
sonos-player: >
ha-card {
position: relative;
overflow: hidden;
border-radius:20px; /* Optional rounded corners */
} ha-card::before {
content: "";
background-image: url('{{ state_attr("media_player.kitchen", "entity_picture") }}');
background-size: cover;
background-position: left;
filter: blur(70px) brightness(40%) saturate(2);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
/* Ensure the album art and content stay sharp and above the background */
ha-card > * {
position: relative;
z-index: 2;
}
/* White color make elĂŠements the most visible on all colors */
:host {
--secondary-text-color: white !important;
}`
5 Likes
I have adjusted the section grouping via CSS so that only the names of the Sonos speakers are displayed. I want to use these as buttons to quickly select the speakers. This works fine, but now I want to split it into two columns using a horizontal stack.
When I set the width percentage to 50%, there is an overlap in the middle. Lowering this percentage has no effect anymore. How can I best solve this?
My code:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:sonos-card
sections:
- groups
topFavorites:
- ""
heightPercentage: 25
entities:
- media_player.sonos_woonkamer
- media_player.sonos_overloop
- media_player.sonos_slaapkamer
widthPercentage: 40
card_mod:
style:
sonos-groups$ sonos-group$: |
mwc-list-item {
border-color: grey !important;
border-style: solid;
border-width: 1px;
background-color: rgba(0, 0, 0, 0.2) !important;
}
.row {
margin: 4px !important;
}
.speakers {
font-size: 16px !important;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal !important;
}
.song-title {
display: none
}
- type: custom:sonos-card
sections:
- groups
topFavorites:
- ""
heightPercentage: 25
entities:
- media_player.sonos_serre
- media_player.sonos_badkamer
- media_player.sonos_zolder
widthPercentage: 50
card_mod:
style:
sonos-groups$ sonos-group$: |
mwc-list-item {
border-color: grey !important;
border-style: solid;
border-width: 1px;
background-color: rgba(0, 0, 0, 0.2) !important;
}
.row {
margin: 4px !important;
}
.speakers {
font-size: 16px !important;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal !important;
}
.song-title {
display: none
}
- type: custom:sonos-card
sections:
- player
- volumes
- grouping
- media browser
- queue
startSection: player
Thanks for sharing. As the background-image is aligned to a dedicated media player, how can you achieve the same results for multiple media players in the same card?
Was also thinking about this but couldnât figure out a solution.
I put 3 cards with different sonos media players in a tabbed card and Iâm switching between them.
Nice improvement! I can build this into the card. Can you please create a request on Github?
2 Likes
just curious, been using this card for awhile on my wall mounted tablets, but recently picked up and rooted a couple ThinkSmart View devices. Has anyone created a really good looking Sonos Card for the ThinkSmart? Would love to see how yours looks!
Can any of you help.
How to get rid of URL under âkitchenâ. Itâs only showing when music is paused
Maybe use mediaTitleRegexToReplace? (search docs for details)
Is there a way to hide the album?
It tried album and albumname, but it didnt vanish 
I got this already but want to hide album as well
card_mod:
style:
mxmp-player$ mxmp-player-header$: |
.entity {
display: none;
}
.song {
display: none;
} Hi!
Iâm new to Sonos card and cant find anything about this earlier. Iâve set up the card as a want it but I found a problem regarding the volume slider.
Letâs say Iâve adjusted the volume like this and then want to lower the overall volume, but in relation to each other. I thought the âAllâ slider would be that slider. But when I lower that one, the rest follows it to the same state:
Does anyone have a solution for this problem?
Did you read the âmanualâ? 
This will hide the album art:
card_mod:
style:
sonos-player$: |
.artwork {
display: none;
}
And this will hide the album name:
card_mod:
style:
sonos-player$ sonos-player-header$: |
.artist-album {
display: none;
}
adjustVolumeRelativeToMainPlayer: true
@suxlala Looking great!
Would you be willing to share your full YAML for the card?
That would be perfect!