Please help, it’s been 2 weeks and I am throwing in the towel and asking for help. I have been trying to get images to appear in really any card that I find examples online of hoping that one will work and I can reverse engineer it, but ideally the room card as shown through a room card tweak here: https://www.reddit.com/r/homeassistant/comments/154l0aj/minimalist_ui_room_card_tweak/
At the very bottom there is the template code and example. Please somebody look at my code and tell me what the heck I am doing wrong. I think it is just a formating issue, I had the gradients working at one time without the image and I decided to call it a night. I reboot and must have had my tweaks in the wrong custom card dir because just like that it was gone and I havent been able to get it back.
My code looks like this:
---
custom_room_pic_on:
state:
- styles:
card:
- background-image: >
[[[
var opacity = states[variables.custom_picture_brightness_entity].attributes.brightness/variables.custom_picture_brightness_max;
if (hass.themes.darkMode) {
return 'linear-gradient(to top right,rgba(' + variables.custom_card_bg_color + ',' + opacity + '),rgba(0,0,0,0))';
} else {
return 'linear-gradient(to top right,rgba(' + variables.custom_card_bg_color + ',' + opacity + '),rgba(0,0,0,0))';
}
]]]
- background-color: rgba(var(--color-background-yellow),var(--opacity-bg))
icon:
- opacity: 0.0
img_cell:
- background-image: "[[[ return 'url(' + variables.custom_picture + ')'; ]]]"
- background-size: contain
- width: 85%
- height: 85%
- transition: filter 0.5s, opacity 0.5s, width 0.5s, height 0.5s
id: 'on'
value: 'on'
- styles:
card:
- background-color: rgba(var(--color-background-yellow),var(--opacity-bg))
icon:
- opacity: 0.1
img_cell:
- background-image: "[[[ return 'url(' + variables.custom_picture + ')'; ]]]"
- background-size: contain
- filter: grayscale(65%)
- opacity: 0.25
- width: 65%
- height: 65%
- transition: filter 0.5s, opacity 0.5s, width 0.5s, height 0.5s
id: 'off'
value: 'off'
`
And my card looks like this:
- type: 'custom:button-card'
template:
- card_room
- custom_room_pic_on
name: Living_room
entity: light.livingroom
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: navigate
navigation_path: living_room
variables:
custom_picture: /local/pictures/living_room.jpg
custom_picture_brightness_entity: light.livingroom_light
custom_picture_brightness_max: 188
custom_card_bg_color: 170,110,1
label_use_temperature: false
label_use_brightness: true
entity_1:
entity_id: light.livingroom_light
custom_icon: mdi:lightbulb
templates:
- yellow_on
tap_action:
action: toggle
hold_action:
action: more-info
entity_2:
entity_id: light.living_room_tv_light
templates:
- purple_on
tap_action:
action: toggle
hold_action:
action: more-info
entity_3:
entity_id: light.upper_landing_light
templates:
- green_on
tap_action:
action: toggle
hold_action:
action: more-info
entity_4:
entity_id: sensor.livingroom_tempsense_temperature
templates:
- red_on
tap_action:
action: more-info
hold_action:
action: navigate
navigation_path: thermostat
I’m new to home assistant (6weeks), I’m a roofer and this became a little project of mine when my son was born and I had a few weeks off and no sleep. I’m working again and would love love love if somebody could help me make this work?! My brain will not let me finish the rest of my dashboard until those damn room cards have pictures of my damn rooms in them haha.
