Advice on Lovelace - Horizontal-Stack card

Configuration Frontend
1

I am trying to follow the example on the https://home-assistant-lovelace-gallery.netlify.com/#demo-hui-stack-card to create a horizontal stack.

I am using this code below, the image firetv.jpg is just a small icon size image that is enlarged in the UI to a massive picture and the card that is meant to be next to it appears under it. I am not sure what I am doing wrong.

Any pointers greatly appreciated

  - type: horizontal-stack
    cards:
      - type: picture-entity
        image: /local/images/firetv.jpg
        tap_action: toggle
        entity: light.hallway_bulb
      - type: glance
        entities:
          - device_tracker.duncan_smith
          - device_tracker.emma_
          - device_tracker.barbara_smith
2

Still havent sorted this, here is a picture to show the issue (the real image is about 20% of this size before it appears in Lovelace)

35
35669×906 153 KB

3

It’s because the height of the image is wildly large in comparision to the width. Home assistant is trying to make the width of the card a certain size, which increases the height of the card off the page. Make the homer simpson image a 4:3 aspect ratio and it will solve your problems.

4

Ok thanks I will give that a go

5

Ok so changing it to 4:3 did work.

Is there a way to stop HA/Lovelace from auto resizing the image?

6

to an extent you can with certain cards, not the picture-entity card. The HA ui tries to fit many objects in your interface at all times while working with all browser and monitor types. If you want custom sized objects, you may need to create your own custom card.

7

Got it working to suit my need… this was the final yaml with help from Ezbe and Ludeus

  - type: horizontal-stack
    cards:
      - type: picture-entity
        entity: device_tracker.duncan_smith
        image: /local/images/duncan_away.png
        state_image:
          "home": /local/images/duncan43.png
      - type: picture-entity
        entity: device_tracker.catherine_
        image: /local/images/catherine_away.png
        state_image:
          "home": /local/images/catherine43.png
      - type: picture-entity
        entity: device_tracker.emma_
        image: /local/images/emma_away.png
        state_image:
          "home": /local/images/emma43.png
1 Like