Hey Ildar, getting back to this. It was one of the last cards I had still to perfectionizeā¦
even with your exact config, the text of my template would still run through the images, because it crosses the half of the card, as you can see below.
Even after having cut the word Media in each attribute. (see the template in the config)
So I decided to give it a try an have them vertically stacked, first the markdown, below the image, and found only 2 ways to do so really.
1- a core entities card and set a background on that (and an empty entities list). We need to set the height of the background manually, and that is a bit of a trial and error, but, the end result is really nice
2- a custom:button-card, set to 1/1, no action (can change of course) and nothing fancy
for both cards I needed to find a way to fill the full width. 16px allround. this is what I did:
1- entities card
type: vertical-stack
cards:
- type: custom:auto-entities
show_empty: false
card:
type: entities
title: Plex Playing
card_mod:
style: |
.card-header {
background-color: var(--background-color-off);
color: var(--text-color-off);
padding-top: 0px;
padding-bottom: 0px;
margin: 0px 0px 16px 0px;
}
filter:
include:
- entity_id: 'media_player.plex*'
state: /playing|paused|'on'/
options:
type: custom:hui-element
card_type: markdown
card_mod:
style: |
ha-card.type-markdown {
box-shadow: none;
margin: -8px -16px;
}
content: >
{% set player = config.entity %}
{% if states(player) not in ['unknown','unavailable'] %}
{%- for attr in states[player].attributes %}
{%- if not attr in ['media_content_id','icon','entity_picture', 'hide_attributes',
'media_position_updated_at', 'media_duration','media_position',
'player_source', 'media_content_rating',
'is_volume_muted','username','friendly_name', 'volume_level',
'supported_features'] %}
{{attr.split('media_')[1]|replace('_',' ')|title}}: {{states[player].attributes[attr]|title}} {%- endif %}
{% endfor %} User: {{state_attr(player,'username')}}
{% else %} Nothing playing
{% endif %}
sort:
method: name
- type: custom:auto-entities
show_empty: false
card:
type: entities
card_mod:
style: |
ha-card {
margin: -8px 0px 0px 0px;
box-shadow: none;
}
filter:
include:
- entity_id: 'media_player.plex*'
state: /playing|paused|'on'/
options:
type: custom:hui-element
card_type: entities
card_mod:
style: |
ha-card {
background: url({{state_attr(config.entity,'entity_picture')}});
box-shadow: none;
background-size: cover;
margin: -16px;
height: 500px;
}
entities: []
and the button-card:
replace with
- type: custom:auto-entities
show_empty: false
card:
type: entities
card_mod:
style: |
ha-card {
margin: -8px 0px 0px 0px;
box-shadow: none; /* not really necessary because of button card mode below */
}
.card-content {
margin: -16px;
}
filter:
include:
- entity_id: 'media_player.plex*'
state: /playing|paused|'on'/
options:
type: custom:button-card
aspect_ratio: 1/1
show_name: false
show_icon: false
tap_action: none
card_mod:
style: |
ha-card {
background: url({{state_attr(config.entity,'entity_picture')}});
box-shadow: none;
background-size: cover;
}
result:
note the button really is square, the entities card seems a longer image.
On the iPhone this fits the full screen perfectly.
I also tried it with core picture card, but ofc it complains it needs an imageā¦ didnt really try hard yet, and maybe I can overcome that with config-template-card. That would require yet another custom-card, and Iād like to keep it as simple as can be.
didnt test a stack-in-cardā¦
but for you I just did, and it works the same, can simply replace vertical-stack with custom:stack-in-card, and still need several of the mods, so no real advantage I guess
