I want to show image based on nane of a template.
I try many different times, this format work in devo tools but showing nothing.
I donāt understand if i can use this mod
type: picture
image: /local/{{ states('input_text.prova') }}.jpg
tap_action:
action: none
hold_action:
action: none
Read docs on Github, there are examples there.
Basically - whatever you use, you should read a manual first before using.
In short: your templates are written in jinjia, but this card accepts templates written in JS.
Must be smth like this:
type: custom:config-template-card
entities:
- ...
card:
type: picture
image: '${ your js code here }'
Also - please check this (not related to our issue, but anyway):
tap_action:
action: none
hold_action:
action: none
There are some problems with indents.
I read a lot but for me itās not very simply.
I made this but didnāt work
type: custom:config-template-card
entities:
- input_text.prova
card:
type: picture
image: /local/'${ states('input_text.prova') }'.jpg
tap_action:
action: none
hold_action:
action: none
image: '${ "some_static_text" + some js code + "some_static_text" }'
Again - learn examples on GitHub.
Sorry but Iām not software maker, maybe 20 years ago, and now there is little time for learn and the brain is like steel.
I did this and doesnāt work
type: custom:config-template-card
entities:
- input_text.prova
card:
type: picture
image: /local/'${ states[āinput_text.provaā].state. }'.jpg
tap_action:
action: none
hold_action:
action: none
No problem, this is what the Community for).
Please check this:
image: '${ "/local/" + states["input_text.prova"].state + ".jpg" }'
or (same):
image: >-
${ "/local/" + states["input_text.prova"].state + ".jpg" }
Yes but not all itās of the same thinking.
Thanks to much, first code finally working.
This is only a first try, this evening I have to put as a background image in a very long picture element
Thanks so much, my 250 lines of picture element is fully working!
I want to show value of the entity used in a history-graph card. Originally, the card has this code:
type: history-graph
show_names: false
entities:
- entity: sensor.gas_consumption
title: Daily Gas Consumption (mĀ³)
I want to change the title to Daily Gas Consumption (xxx mĀ³) , where xxx = the value of the entity sensor.gas_consumption.
How do I do that with? Tried this code below, but it was not correct.
type: history-graph
show_names: false
entities:
- entity: sensor.gas_consumption
- type: 'custom:config-template-card'
entities:
- entity: sensor.gas_consumption
variables:
gas_value: sensor.gas_consumption
title: Daily Gas Consumption (${gas_value} mĀ³)
Tried this below, no error, but no graph.
type: 'custom:config-template-card'
entities:
- entity: sensor.gas_consumption
variables:
- GAS_VALUE: states['sensor.gas_consumption'].state
card:
type: history-graph
show_names: false
entities:
- entity: sensor.gas_consumption
title: Daily Gas Consumption (${GAS_VALUE} mĀ³)
Almost ā¦ Any idea?
Finally! I made it 
Whatever that was, I canāt use āvariable nameā. This works.
Too bad, I cannot escape colon character.
Iām having trouble changing icons based on sensors with more than one state.
For an on/off sensor this works to change icon based on state:
type: custom:config-template-card
variables:
SHELLY_STATE: states['switch.shelly_pump_control'].state
entities:
- switch.shelly_pump_control
card:
type: entities
entities:
- entity: switch.shelly_pump_control
icon: '${SHELLY_STATE === ''on'' ? ''mdi:power'' : ''mdi:power-off''}'
But I have a sensor ( a TRV / climate sensor) with four states: Idle, Off, Heat & ERROR and Iād like to change the icon based on the state of the sensor. I tried this and variations of it - but Iām basically guessing (unsuccessfully) at the correct syntax:
type: custom:config-template-card
variables:
TRV03_STATE: states['sensor.trv_03_status'].state
entities:
- switch.trv_03
card:
type: entities
entities:
- entity: switch.trv_03
icon: >-
{% if '${TRV03_STATE === ''ERROR'' ? ''mdi:alert-circle''}' %}
{% elif '${TRV03_STATE === ''Off'' ? ''mdi:power-off''}' %}
{% elif '${TRV03_STATE === ''Idle'' ? ''mdi:sleep''}' %}
{% elif '${TRV03_STATE === ''Heat'' ? ''mdi:fire''}' %}
{% else %}
{% endif %}
Iāve blindly tried a bunch of other stuff - but nothing that gets me closer to a solution. Any ideas or nudges in the right direction appreciated and welcome.
You are using a mix of jinjia code and ā${}ā code.
You should only use JS code inside ā${}ā. Scroll up a bit, find an example with a weblink. It does not have conditions āif then elseā, add them by yourself - using JS.
Thanks @Ildar_Gabdullin - I was pretty sure I was doing something fundamentally wrong. I couldnāt find any examples dealing with icon change on multiple states. I did play with this kind of syntax:
icon: '${SHELLY_STATE === ''on'' ? ''mdi:power'' : ''mdi:power-off''}'
But I basically just donāt know what Iām doing - not even enough to google solutions 
You can place JS code here:
icon: >-
${ ... }
Thanks @Ildar_Gabdullin Iām afraid I donāt know what JS code is Iām proficient at copy / paste and very little else. I tried this following your suggestion, but I have no idea why itās wrong:
type: custom:config-template-card
entities:
- sensor.s1_circulation_pump_onoff
card:
type: entities
entities:
- entity: sensor.s1_circulation_pump_onoff
icon: >-
${
{% if is_state('sensor.s1_circulation_pump_onoff', '1') %}
mdi:lightning-bolt-circle
{% else %} mdi:lightning-bolt-outline
{% endif %}
}
I appreciate this must be frustrating to watch ā¦
4 methods:
type: vertical-stack
cards:
- type: custom:config-template-card
entities:
- sensor.processor_use
card:
type: entities
entities:
- entity: sensor.processor_use
icon: |-
${
if (parseFloat(states['sensor.processor_use'].state) >= 50)
'mdi:car';
else
'mdi:account';
}
- type: entities
entities:
- type: custom:config-template-card
entities:
- sensor.processor_use
row:
entity: sensor.processor_use
icon: |-
${
if (parseFloat(states['sensor.processor_use'].state) >= 50)
'mdi:car';
else
'mdi:account';
}
- type: entities
entities:
- type: custom:template-entity-row
entity: sensor.processor_use
icon: |-
{% if states(config.entity)|int >= 50 -%}
mdi:car
{%- else -%}
mdi:account
{%- endif %}
- type: entities
entities:
- entity: sensor.processor_use
card_mod:
style: |
:host {
{% if states(config.entity)|int >= 50 %}
--card-mod-icon: mdi:car;
{% else %}
--card-mod-icon: mdi:account;
{% endif %}
}
Awesome, thanks for your patience with me - thereās no way Iād have got there without working examples to start with - I really appreciate your help
Hereās what worked for me eventually (I got caught out not knowing the difference between āelse ifā and āelifā). Thanks again for your help @Ildar_Gabdullin
- entity: switch.trv_02
icon: |-
${
if ((states['sensor.trv_02_status'].state) == 'ERROR')
'mdi:alert-circle';
else if ((states['sensor.trv_02_status'].state) == 'Off')
'mdi:mdi:power-off';
else if ((states['sensor.trv_02_status'].state) == 'Idle')
'mdi:sleep';
else if ((states['sensor.trv_02_status'].state) == 'Heat')
'mdi:fire';
else
'mdi:help-circle-outline';
}
Thank you for posting a working template. Here is a test template I just worked on that does a few things that werenāt working for you. Noticeably it uses named variables and I was able to escape the character colon : by surrounding it with backslashes \
This template is fully working (for me at least); Iām just posting it here in case it can help someone else. I find the original documentation could use a few more to demonstrate how certain things can be done.
type: custom:config-template-card
entities:
- light.bathroom
variables:
STATE: states['light.bathroom'].state
LABEL: ('The bathroom light is ' + states['light.bathroom'].state)
card:
type: light
entity: light.bathroom
name: ${'This\:\ ' + LABEL}
