#Custom image for button

1 messages · Page 1 of 1 (latest)

vocal seal
#

Hello there, backend dev but a home assistant newbie here.

I've setup everything on a raspberry pi 5, and i'm trying to put together some dashboards.

Right now i have a script that opens YT on TV, and I'm struggling to create a horizontal stack with 4 buttons where one of them is YT with YT image pointing to the script.
To be clear the problem is i don't know how to have a button with a proper YT image as the icon.

I've tried using picture, but that doesn't center the image so things can easily get visually messed up as soon as there are images with non-matching aspect ratios.

I also tried to install and use custom:button-card although it seems to be unmaintained, and i failed to get it working based on the installation guide on the README (did some searches, did restart too, still not working).

I couldn't get the built-in button card to show the image as icon or image although the same path would work in picture.

I have the VSCode add-on in case you need to instruct me to do some manual setting changes or something.

proven horizon
#

While the custom:button-card appears to be unmaintained, it works very well and, IMO, is probably the single most powerful custom card available. There's not much this card can't do, though it might take a bit of work but the payoff is usually well worth it. (Being "unmaintained", I don't think it is Sections-friendly and it does not have a UI editor (which is not surprising considering what all the card can be made to do.)

#

In terms of installation, do not do the manual method unless you have a specific reason. Just use the HACS installation method. (Assuming you have HACS installed. If not, install HACS, first.) A restart might be needed (I can't remember) and you'll probably need to refresh your browser/app and possible clear its cache. (Refreshing/clearing cache is generally a good practice whenever installing new cards.)

#

Once everything is installed, refreshed, and ready to go, you should be able to add the custom:button-card. Everything will be configured in YAML. Regarding the image you want to use, this is something that tends to throw people off: The image must reside in the /config/www/ folder (subfolders are okay inside the www folder.) Now, that folder is linked to /local/ so you won't point the card to /config/www/YT.jpg but, instead, use /local/YT.jpg.

#

Here's an example for you: ```yaml
type: custom:button-card
styles:
card:
- background-image: url("/local/youtube_logo.png") ;
- background-size: cover
- height: 125px
- width: 125px

image.png
vocal seal
#

@proven horizon thank you for the help.
I tried symlinking image to www/image so i can share the images, but apparently that's not supported because the images don't show up.
All good other than that, so far.