Blue Iris with 30 cameras

I have Blue Iris running on 2 separate machines and HA on another machine, with a total of about 30 cameras.

I set up the integration and a lovelace dashboard using picture-element cards in a custom-layout-card.

I am pretty weak at making things look nice and was hoping to get some suggestions on how better to show ~30 cameras.

Thank you!

Here’s what I have now:

And the raw config:

views:
  - title: Home
    type: custom:horizontal-layout
    layout:
      width: 235
      max_cols: 12
    cards:
      - show_state: false
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.unnamed_cam1_630
      - show_state: true
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.unnamed_cam2_630
      - show_state: true
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.unnamed_cam3_630
      - show_state: true
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.unnamed_192_168_20_40
      - show_state: true
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.unnamed_192_168_30_40
      - show_state: true
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.unnamed_192_168_30_41
      - show_state: true
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.unnamed_192_168_40_40
      - show_state: true
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.unnamed_192_168_40_41
      - show_state: true
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.unnamed_192_168_70_40
      - show_state: true
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.unnamed_192_168_70_41
      - show_state: true
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.unnamed_192_168_70_41
      - show_state: true
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.blueiris_192_168_5_81
      - show_state: true
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.blueiris_60_2022
      - show_state: true
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.blueiris_c62
      - show_state: true
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.blueiris_c65blue
      - show_state: true
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.blueiris_c66shop_rear_nw
      - show_state: true
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.blueiris_c70inside_shop
      - show_state: true
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.blueiris_c71
      - show_state: true
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.blueiris_c75_shop_front_north
      - show_state: true
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.blueiris_c80
      - show_state: true
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.blueiris_pool_cam_new_new
      - show_state: true
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.blueiris_s_e_corner_shop_125
      - show_state: true
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.blueiris_i61
      - show_state: true
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.blueiris_i63
      - show_state: true
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.blueiris_i64
      - show_state: true
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.blueiris_i64
      - show_state: true
        show_name: true
        camera_view: auto
        type: picture-entity
        entity: camera.blueiris_i67

Anyone have any suggestions?

Good luck. I resorted to putting all of my cards of similar side into columns together, and then making a vertical stack to put my odd shaped ones all together and to the far right.

I have yet to find an easy or good way to get all of the cards to match in size when they have different resolutions.