Trouble with variables in strings (hacs custom button card)

Hi all,

I have created a template for a custom button card. It’s working nicely, but I am struggling with how to use the variables I am passing in other parameters.

The template card has a variable set up for “item”. When I use the card, I would enter that variable. It’s working fine in the most basic form, but when I try to manipulate the string, it’s not liking it.

button_card_templates:
  shopping_item:
    variables:
      item: not_set
    label: '[[[ return variables.item]]]' 
    entity_picture: '/local/shopping/milk.avif'

So the above would show the milk image and show “milk” as the label for the button. I call it as follows:

image

- type: custom:button-card
            template: shopping_item
            variables:
              item: milk

I need to use the variable item as a path. I’ve tried alsorts, but nothing seems to work! I also would like to use the string function (title) to capitalise the item. (keeping it lower case in the original call for the relevant filename).

#doesn't work
label: '{{ [[[ return variables.item]]] | title }}'
entity_picture: '/local/shopping/[[[ return variables.item ]]].avif'

image

I assume it’s something (hopefully) I am simply missing for formatting a variable within a string. I tried using the pipeline or >, but again I just had no luck!

I’ve managed to get the image path working using the JS template method. Still struggling with the label though.

entity_picture: >
      [[[ return '/local/shopping/' + variables.item + '.avif' ]]]

I don’t think you can wrap jinja around javascript with button-card (I don’t think you can use jinja at all) in button-card templates.

No, you’re quite right. It just renders it as-is.

image

Ah, found a function on the style card mod!

styles:
      card:
        - text-transform: capitalize

image

1 Like