Resizing images for picture elements card

Configuration Frontend
1

Screenshot 2023-11-14 at 15.03.58
Screenshot 2023-11-14 at 15.03.581334×823 136 KB

As you can see from the attached screenshot, I am attempting to create a person location bar consisting of 3 picture entity cards which display badges based on their location and, if away from home, the time of how far they are from home.

Everything is working how it should, apart from 3 2 issues.

  1. The size of the images is all over the place. What is the best method to address this so they are all the same size, preferably much smaller too?

2. The prefix text ‘mins’ is butted up directly next to the travel_time state-label. Can this be changed? It doesn’t recognise blank spaces after the prefix text

  1. The state icon greys out when not active. I can change this via state_color: false, but this turns the icon grey permanently, and ideally, I would have this the same as the theme (orange)

Here’s my config:

type: horizontal-stack
cards:
  - type: picture-elements
    elements:
      - type: state-icon
        state_color: false
        entity: binary_sensor.person_jake
        style:
          top: 80%
          left: 20%
          transform: translate(-50%, -50%) scale(2.0, 2.0)
      - type: conditional
        conditions:
          - entity: person.jake
            state: away
        elements:
          - type: state-label
            entity: sensor.jake_travel_time
            prefix: Mins
            style:
              top: 82%
              left: 54%
    image: /local/jake-new.jpeg
  - type: picture-elements
    elements:
      - type: state-icon
        entity: binary_sensor.person_emma
        tap_action:
          action: toggle
        style:
          top: 80%
          left: 20%
          transform: translate(-50%, -50%) scale(2.0, 2.0)
      - type: conditional
        conditions:
          - entity: person.emma
            state: not_home
        elements:
          - type: state-label
            entity: sensor.em_travel_time
            prefix: Mins
            style:
              top: 82%
              left: 59%
    image: /local/emma-new.jpeg
  - type: picture-elements
    elements:
      - type: state-icon
        entity: binary_sensor.person_rio
        tap_action:
          action: toggle
        style:
          top: 80%
          left: 20%
          transform: translate(-50%, -50%) scale(2.0, 2.0)
    image: /local/rio.png
2

try width: in the style: section to scale the image (in %)

have you tried "Mins "

1 Like
3

Thank you for your reply. "Mins " worked like a charm. Many thanks.

I wasn’t too sure where to apply width: so I tried the following, but it didn’t work for me:

type: horizontal-stack
cards:
  - type: picture-elements
    style:
      width: 20%
    elements:
      - type: state-icon
        state_color: false
        entity: binary_sensor.person_jake
        style:
          top: 80%
          left: 20%
          transform: translate(-50%, -50%) scale(2.0, 2.0)
      - type: conditional
        conditions:
          - entity: person.jake
            state: away
        elements:
          - type: state-label
            entity: sensor.jake_travel_time
            prefix: 'Mins '
            style:
              top: 82%
              left: 54%
    image: /local/jake-new.jpeg
  - type: picture-elements
    style:
      width: 20%
    elements:
      - type: state-icon
        entity: binary_sensor.person_emma
        style:
          top: 80%
          left: 20%
          transform: translate(-50%, -50%) scale(2.0, 2.0)
      - type: conditional
        conditions:
          - entity: person.emma
            state: not_home
        elements:
          - type: state-label
            entity: sensor.em_travel_time
            prefix: 'Mins '
            style:
              top: 82%
              left: 59%
    image: /local/emma-new.jpeg
  - type: picture-elements
    style:
      width: 20%
    elements:
      - type: state-icon
        entity: binary_sensor.person_rio
        style:
          top: 80%
          left: 20%
          transform: translate(-50%, -50%) scale(2.0, 2.0)
    image: /local/rio.png
4

i meant instead of transform:

Sorry I see what you mean now, you’re trying to scale the background image, not the elements. not sure how to so that, maybe edit the JPGs so they are the same size ?

5

I’ve been trying that, but it seems to make no difference for some strange reason. The only thing I can think is I may have to make it much smaller to take effect.