Struggling with Card mod

I’m trying to be able to modify image elements that are on a picture-elements card based on the value of an entity. I have narrowed down my problem into a simple example that suggests that card-mod is not working (correctly? at all?)

This is my code;

type: picture-elements
style: |
  ha-card {
    {% set ANGLE = '90deg' %}
    --my-transform-style: rotate({{ANGLE}});
  }
elements:
 - type: image
    image: /local/dog.png
    style:
      top: 30%
      left: 40%
      height: 10%
      width: 10%
      transform: var(--my-transform-style)
image: https://demo.home-assistant.io/stub_config/floorplan.png

I would expect to see the dog image rotated, but it is not.
ScreenshotDog

As you can guess, once I get this working, I would move to the value (scale in most cases) being provided by an entity, but while I try and get this solved, its hard-coded.

I saw a post talking about testing card-mod by doing the following in the developer tools, and it appears to be working there, so… I’m confused. Its probably something simple that I have missed, so please forgive me.

  1. Suggest to rename the thread, this is a picture-elements card, not a mushroom.
  2. Check this, could be useful.
  3. If you need to define an angle based on some input_number - try this:
    {% set ANGLE = states('input_number.xxx')|int|string + 'deg' %}

just wanted to add your missing

card_mod:
      style: | 

Ahh thankyou @Frosty . It was indeed something silly.

This is the working code;

type: picture-elements
card_mod:
  style: |
    ha-card {
      {% set ANGLE = '90deg' %}
      --my-transform-style: rotate({{ANGLE}});
    }
elements:
  - type: image
    image: /local/dog.png
    style:
      top: 30%
      left: 40%
      height: 10%
      width: 10%
      transform: var(--my-transform-style)
image: https://demo.home-assistant.io/stub_config/floorplan.png

Interestingly, the same thing is missing (“card_mod:”) from the code that I was using as my example from that very same thread @Ildar_Gabdullin here.

It could be missing since the code you took was written a long time ago when the “card_mod” keyword was not added yet (or was optional).

From my experience, it’s best to keep up with HA and HACS release notes and always check the original posts that reference guides. You’ll generally find EDITs like @Ildar_Gabdullin provided after the card_mod change.

2 Likes