(un)Conditional Card 🗂

[FireScraper]

Hello fellow home Assitors!

I have a problem and you are here to solve it - right?

I’m having this nice conditional “stack” card which (depending on the state 1 to 5) shows always only one of the 5 images defined:

The yaml:

type: vertical-stack
title: Fire Risk Today
cards:
  - type: conditional
    conditions:
      - entity: sensor.fire_risk_today
        state: '1'
    card:
      type: picture-entity
      entity: sensor.fire_risk_today
      image: 'https://www.ipma.pt/bin/icons/svg/rcm/out-Reduzido.svg'
      aspect_ratio: 30%
      show_name: false
      show_state: false
  - type: conditional
    conditions:
      - entity: sensor.fire_risk_today
        state: '2'
    card:
      type: picture-entity
      entity: sensor.fire_risk_today
      image: 'https://www.ipma.pt/bin/icons/svg/rcm/out-Moderado.svg'
      aspect_ratio: 30%
      show_name: false
      show_state: false
  - type: conditional
    conditions:
      - entity: sensor.fire_risk_today
        state: '3'
    card:
      type: picture-entity
      entity: sensor.fire_risk_today
      image: 'https://www.ipma.pt/bin/icons/svg/rcm/out-Elevado.svg'
      aspect_ratio: 30%
      show_name: false
      show_state: false
  - type: conditional
    conditions:
      - entity: sensor.fire_risk_today
        state: '4'
    card:
      type: picture-entity
      entity: sensor.fire_risk_today
      image: 'https://www.ipma.pt/bin/icons/svg/rcm/out-MuitoElevado.svg'
      aspect_ratio: 30%
      show_name: false
      show_state: false
  - type: conditional
    conditions:
      - entity: sensor.fire_risk_today
        state: '5'
    card:
      type: picture-entity
      entity: sensor.fire_risk_today
      image: 'https://www.ipma.pt/bin/icons/svg/rcm/out-Maximo.svg'
      aspect_ratio: 30%
      show_name: false
      show_state: false

You can see all images in the card editor:

but only the one “active” when live:

But it reserves all space for the hidden 4 images (all other cards are forced to the right):

[Syrius (Jeremy)]

Use state-switch card instead (install via HACS)

[FireScraper]

easy peasy

type: 'custom:state-switch'
entity: sensor.fire_risk_today
states:
  '1':
    type: picture-entity
    aspect_ratio: 30%
    entity: sensor.fire_risk_today
    image: 'https://www.ipma.pt/bin/icons/svg/rcm/out-Reduzido.svg'
    show_name: false
    show_state: false
  '2':
    type: picture-entity
    aspect_ratio: 30%
    entity: sensor.fire_risk_today
    image: 'https://www.ipma.pt/bin/icons/svg/rcm/out-Moderado.svg'
    show_name: false
    show_state: false
  '3':
    type: picture-entity
    aspect_ratio: 30%
    entity: sensor.fire_risk_today
    image: 'https://www.ipma.pt/bin/icons/svg/rcm/out-Elevado.svg'
    show_name: false
    show_state: false
  '4':
    type: picture-entity
    aspect_ratio: 30%
    entity: sensor.fire_risk_today
    image: 'https://www.ipma.pt/bin/icons/svg/rcm/out-MuitoElevado.svg'
    show_name: false
    show_state: false
  '5':
    type: picture-entity
    aspect_ratio: 30%
    entity: sensor.fire_risk_today
    image: 'https://www.ipma.pt/bin/icons/svg/rcm/out-Maximo.svg'
    show_name: false
    show_state: false

works