Picture element use vertical-stack or horizontal-stack (inside)

Hi, I don’t know why it’s not already there, but it would be useful to have more flexibility with the image element card, a vertical stack and horizontal stack is not a custom type so I can’t add horizontal-stack or vertical-stack

Good idea? , please vote

Thank :slight_smile:

I’m having a lot of difficulty understanding what you are asking for.

Do you want to put picture element cards in horizontal and/or vertical stacks?

Because that is possible now.

In addition to what @tom_l has said, you can add any card - including vertical and horizontal stacks - to the picture elements card using the HACS hui-element integration.

1 Like

Hi sorry I have corrected to clarify more.

I have a picture-element dashboard so it is in the panel mode.But I has far I can see, I am not able to horizontal-stack or vetical-stack inside the type picture-element.

The documentation did not say if can add this type of cards.

I hope you will understand better :slight_smile:

Here is the code I want to make it work:

I use picture element for the state_image

Thank :slight_smile:

type: picture-elements
entity: sensor.openweathermap_condition
state_image:
  clear-night: /local/images/Weather-st/clear-night.jpg
  clear-day: /local/images/Weather-st/clear-day.webp
  cloudy: /local/images/Weather-st/cloudy.jpg
  fog: /local/images/Weather-st/fog.jpg
  hail: /local/images/Weather-st/hail.jpg
  partlycloudy: /local/images/Weather-st/partly-cloudy-day,.jpg
  partly-cloudy-night: /local/images/Weather-st/partly-cloudy-night.jpg
  sleet: /local/images/Weather-st/sleet.jpg
  snow-day: /local/images/Weather-st/snow-day.jpg
  thunderstorm: /local/images/Weather-st/thunderstorm.jpg
  tornado: /local/images/Weather-st/tornado.jpg
  wind: /local/images/Weather-st/wind.jpg
elements:
  - type: vertical-stack
    style:
      top: 50%
      left: 50%
    cards:
      - type: horizontal-stack
        cards:
          - type: horizontal-stack
            cards:
              - color_thresholds:
                  - color: '#fe2712'
                    value: 30
                  - color: '#fefe33'
                    value: 20
                  - color: '#66b032'
                    value: 10
                  - color: '#0000cd'
                    value: -10
                color_thresholds_transition: smooth
                entities:
                  - entity: sensor.gw1100b_v2_2_5_feels_like_temperature
                    name: Température extérieure
                group: false
                hour24: true
                line_width: 2
                points_per_hour: 4
                show:
                  extrema: true
                  fill: fade
                  icon: true
                  labels: false
                  name: true
                  state: true
                type: custom:mini-graph-card
              - color_thresholds:
                  - color: '#fe2712'
                    value: 30
                  - color: '#fefe33'
                    value: 20
                  - color: '#66b032'
                    value: 10
                  - color: '#0000cd'
                    value: -10
                color_thresholds_transition: smooth
                entities:
                  - entity: sensor.gw1100b_v2_2_5_feels_like_temperature
                    name: Température resentie
                group: false
                hour24: true
                line_width: 2
                points_per_hour: 4
                show:
                  extrema: true
                  fill: fade
                  icon: true
                  labels: false
                  name: true
                  state: true
                type: custom:mini-graph-card

I have never try this but it’s work :slight_smile:

изображение

        type: picture-elements
        elements:
          - type: custom:hui-element
            card_type: vertical-stack
            cards:
              - type: entities
                entities:
                  - sun.sun
              - type: glance
                entities:
                  - sun.sun
            style:
              top: 50%
              left: 50%
        image: /local/images/test/blue.jpg
2 Likes

Can you show such an example for putting a swipe card inside a picture elements card?

I’ve been battling this for days and never see a card -_-

          - type: custom:hui-element
            cards: 
              - type: sensor
                entity: sensor.domnasq_system_temperature
              - type: sensor
                entity: sensor.domnasq_system_temperature      
            style:
              top: 50%
              left: 50%
            card_type: custom:swipe-card

after such configuration, the card simply does not show - without any error

After the fight, only this was achieved:

          - type: custom:hui-element
            card_type: custom:swipe-card
            start_card: 1
            cards:
              - entity: light.sufit_salon
                type: custom:button-card
                template:
                  - podstawowy
                  - light
                  - menu
                  - ikona_hue
              - entity: light.sufit_salon
                type: custom:button-card
                template:
                  - podstawowy
                  - light
                  - menu
                  - ikona_hue
            style:
              top: 50%
              left: 50%

However, instead of showing one tab and scrolling to the other, it shows two side by side:

Not sure if “hui-element” may be used for a CUSTOM card.
Try w/o it.

managed to find a solution

# SWIPE GRID
          - type: custom:hui-element
            card_type: custom:swipe-card
            cards:
              - type: vertical-stack
                title: Backyard
                cards:
                  - type: horizontal-stack
                    cards:
                      - entity: light.sufit_salon
                        type: custom:button-card
                        template:
                          - podstawowy
                          - light
                          - menu
                          - ikona_hue
                      - entity: light.sufit_salon
                        type: custom:button-card
                        template:
                          - podstawowy
                          - light
                          - menu
                          - ikona_hue
                  - type: horizontal-stack
                    cards:
                      - entity: light.sufit_salon
                        type: custom:button-card
                        template:
                          - podstawowy
                          - light
                          - menu
                          - ikona_hue
                      - entity: light.sufit_salon
                        type: custom:button-card
                        template:
                          - podstawowy
                          - light
                          - menu
                          - ikona_hue
              - type: vertical-stack
                title: Backyard
                cards:
                  - type: horizontal-stack
                    cards:
                      - entity: light.sufit_salon
                        type: custom:button-card
                        template:
                          - podstawowy
                          - light
                          - menu
                          - ikona_hue
                      - entity: light.sufit_salon
                        type: custom:button-card
                        template:
                          - podstawowy
                          - light
                          - menu
                          - ikona_hue
                  - type: horizontal-stack
                    cards:
                      - entity: light.sufit_salon
                        type: custom:button-card
                        template:
                          - podstawowy
                          - light
                          - menu
                          - ikona_hue
                      - entity: light.sufit_salon
                        type: custom:button-card
                        template:
                          - podstawowy
                          - light
                          - menu
                          - ikona_hue                             
            style:
              top: 50%
              left: 50%
              width: 21%