Limit OH-Image to size of card

Setup, Configuration and Use Widgets
1

I have a widget that displays an image from an item where the item is a string url that scrolls through various images off of my emby server. The images are of varying sizes. However, i would like the display to resize the images to keep the image inside the widgets card.

I have tried various configurations of max-width/ max-height and can’t get it to work.

I have set the widgets card max-height to be the maximum height that can be displayed on my tablet. And the widget is then deployed in a cell that has its width set.

What do i need to change in this yaml code to get the image to re-size correctly.

uid: widget_tablet_left_page
tags: []
props:
  parameterGroups: []
timestamp: Nov 3, 2023, 8:24:46 PM
component: f7-card
config:
  expandable: false
  padding: false
  style:
    max-height: 520px
    min-height: 520px
  stylesheet: >
    .card-content { justify-content: center }
slots:
  content:
    - component: f7-block
      config:
        class:
        visible: =items.System_State.state == "ON" && items.DenDisplaySwitches.state =="OFF"
      slots:
        default:
          - component: f7-row
            slots:
              default:
                - component: f7-col
                  slots:
                    default:
                      - component: oh-image
                        config:
                          height: 500px
                          url: =items.embyRandomPicture.state
                          visible: =items.CameraKioskView.state == "OFF"
    - component: f7-block
      config:
        class:
        visible: =items.DenDisplaySwitches.state =="ON"
      slots:
        default:
          - component: widget:widget_Den_Button_control
2

Your extra row and column containers are just complicating matters. You really only need one container for the image. Once you have that image in a single container then you just want that image to never be wider or taller than the container.

uid: widget_tablet_left_page
tags: []
props:
  parameterGroups: []
timestamp: Nov 3, 2023, 8:24:46 PM
component: f7-card
config:
  expandable: false
  padding: false
  style:
    max-height: 520px
    min-height: 520px
  stylesheet: >
    .card-content { justify-content: center }
slots:
  content:
    - component: f7-block
      config:
        class:
        visible: =items.System_State.state == "ON" && items.DenDisplaySwitches.state =="OFF"
      slots:
        default:
          - component: oh-image
            config:
              url: =items.embyRandomPicture.state
              visible: =items.CameraKioskView.state == "OFF"
              style:
                max-height: 100%
                max-width: 100%
    - component: f7-block
      config:
        class:
        visible: =items.DenDisplaySwitches.state =="ON"
      slots:
        default:
          - component: widget:widget_Den_Button_control
3

Thank you!!!

This code worked perfectly

4

My den wall screen is now displaying exactly how i wanted it to…

image
image1440×1920 105 KB

1 Like
5

While I have your attention :slight_smile:

Any easy way to make the background of the cell transparent so it doesn’t display as a grayer background and all you see is the image itself?

This way it would look like the image was just floating on the background black screen?

I assume there is someway to set the cell to be transparent or the like?

6

Just don’t use an f7-card for the base of that widget. All the “cards” have the styles preset to so that they look like that and you’d have to get rid of the background, the border, the shadows, and a few other things probably.

Instead just use an f7-block as your base component for the widget.

7

awesome thanks for your help. i had been running a HABPanel screen on this machine for years but glad to finally have it converted over to MainUI.