Struggling with Card mod

[ksmith]

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.

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.

[Ildar_Gabdullin]

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' %}

[Frosty]

just wanted to add your missing

card_mod:
      style: | 

[ksmith]

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

[ksmith]

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.

[Ildar_Gabdullin]

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).

[LiQuid_cOOled]

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.