F7-photo-browser not rendered at all

Does anybody know why this isn’t working?

uid: widget_2c279b5cfe
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Jan 31, 2025, 1:50:17 PM
component: f7-block
config:
  style:
    border: 1px solid red
    width: 400px
    height: 300px
slots:
  default:
    - component: Label
      config:
        text: Test
    - component: f7-photo-browser
      config:
        style:
          border: 1px solid yellow
          width: 100%
          height: 100%
        _exposition: false
        _navbarOfText: von
        _popupCloseLinkText: Schließen
        type: standalone
        photos:
          - url: ="/static/test1.jpg"
            caption: Test1
          - url: ="/static/test2.jpg"
            caption: Test2
          - url: ="/static/test3.jpg"
            caption: Test3
        swiper:
          initialSlide: 1
          spaceBetween: 20
          speed: 300
          loop: true
          preloadImages: true

When looking into the browser’s inspection details, I can see that the f7-photo-browser is not rendered at all.

Changing the type to popup or page does not have any effect, too.

The f7 photo browser is not supposed to render anything immediately.

This isn’t going work in the widget system because you need access to the vue context to open the broswer after the vue component just instantiates it.

Is there a reason you are trying to do this instead of just using the OH photos action?

Yes, there is. Currently I am using a regular oh-cell with actionPhotos like this

component: oh-cell
config:
  action: photos
  actionPhotoBrowserConfig:
  actionPhotos: =JSON.parse(@'vKlingelFilenames')

I want to extend this by 2 more actionPhotos sources which I want to trigger by button press or a tabbed presentation.
In any case I do not want to create 3 separate oh-cells.
Another alternative by an expanded card containing three buttons to launch the actionPhoto is also not really my preferred solution.

Tha’ts why I came up with the idea of embedding the photo-browser in an expaded card.

Most likely then, you’ll just have to construct your own browser from scratch using a swiper or something like that. I cannot think of any workaround that would get the f7-photo-browser working via widgets.

You could add a feature request that adds a photo browser component (or possibly lets the oh-image act a photo broswer if supplied with an array of image sources).

Thanks for your information.
Unfortunately I am already coming from a draft where I tried to create my own photoBrowser by a widget containing

oh-swiper/f7-swiper
  oh-repeater
    f7-swiper-slide
      oh-image

but after 2 days I quit as I did not manage to rebuild a photoBrowser in a desired style and functionality.

I see no reason why that shouldn’t work, depending on the style and functionality that you are aiming for. If you post that code, or start a new thread, we can take a look at it.

1 Like

Problem is to get the swiper spread across the full width and height of the available screen. Setting height and width does not work as probably the container does not know the size of the expanded card (border style just for controlling purposes to better see the results)

component: oh-cell
config:
  title: Swiper
slots:
  default:
    - component: oh-swiper
      config:
        params:
          initalSlide: 1
          observeSlideChildren: true
          observer: true
          slidesPerView: 1
          spaceBetween: 0
        scrollbar: true
        style:
          height: 100%
          width: 100%
          border: 1px solid red
      slots:
        default:
          - component: f7-swiper-slide
            config:
              style:
                height: 100%
                width: 100%
                border: 1px solid yellow
            slots:
              default:
                - component: oh-image
                  config:
                    url: ="/static/test1.jpg"
                    style:
                      border: 1px solid green
                      height: 100%
                      width: 100%
          - component: f7-swiper-slide
            config:
              style:
                height: 100%
                width: 100%
            slots:
              default:
                - component: oh-image
                  config:
                    url: ="/static/test2.jpg"
                    style:
                      border: 1px solid green
                      height: 100%
                      width: 100%

This problem comes from the fact that you are putting this on an oh-cell. If you look at the oh-cell vue definition, you can see that default slot components that get added to the expanded cell contents get put inside an extra div:

image

That extra div has no styling. This means that it’s height and width are determined by the size of its child elements. Setting the height and width as percentages won’t work as long as that div has no concrete height and width of its own (it cannot be meaningful to set a width to 100% of the minimum size required to contain that 100%). If you set the height and width of the swiper to absolute values, you would see that those values work. You could use an absolute value because the expanded card is set to a constant 670px. But, if you want relative sizing to work, you need to give that extra div a concrete (or relative to its parent) size.

That can’t be done with an easy setting because the vue file doesn’t assign any properties to that div, so you’ll have to use a stylesheet in the cell itself:

component: oh-cell
config:
  title: Swiper
  stylesheet: >
    .cell-expanded-contents > div {
      width: 100%;
      height: 100%;
    }
1 Like

ok. Getting closer but still difficult for me. I am not getting the desired result no matter in which combination I set (or do not set) size style for f7-swiper, f7-swiper-slide and oh-image.

component: oh-cell
config:
  title: Swiper
  stylesheet: |
    .cell-expanded-contents > div {
      width: 100%;
      height: 100%;
    }
slots:
  default:
    - component: f7-swiper
      config:
        style:
          border: 1px solid red
          height: 100%
          width: 100%
      slots:
        default:
          - component: f7-swiper-slide
            config:
              style:
                height: 100%
                width: 100%
                border: 1px solid yellow
            slots:
              default:
                - component: oh-image
                  config:
                    url: ="/static/test1.jpg"
                    style:
                      border: 1px solid green
                      height: 100%
                      width: 100%
          - component: f7-swiper-slide
            config:
              style:
                height: 100%
                width: 100%
            slots:
              default:
                - component: oh-image
                  config:
                    url: ="/static/test2.jpg"
                    style:
                      border: 1px solid green
                      height: 100%
                      width: 100%

You are probably also running into issues with the size of the cell header. Try this:

component: oh-cell
config:
  title: Swiper
  stylesheet: |
    .cell-expanded-contents {
      width: 100%;
      height: calc(100% - 92.5px);
    }

    .cell-expanded-contents > div {
      width: 100%;
      height: 100%;
      display: flex;
    }
slots:
  default:
    - component: f7-swiper
      config:
        style:
          border: 1px solid red
          height: 100%
          width: 100%
          flex-shrink: 0
      slots:
        default:
          - component: f7-swiper-slide
            config:
              style:
                border: 1px solid yellow
            slots:
              default:
                - component: oh-image
                  config:
                    url: ="/static/test1.jpg"
                    style:
                      border: 1px solid green
                      width: 100%
          - component: f7-swiper-slide
            config:
              style:
            slots:
              default:
                - component: oh-image
                  config:
                    url: ="/static/test2.jpg"
                    style:
                      border: 1px solid green
                      width: 100%

This gets even more explicit with the restricting the height of the card contents (and subtracts the extra used space from the top), and then lets the extra div do more of the work determining the size of the slider. You still need to the width declarations on the images so that they shrink to fit (you way also need height if any of your images are ever taller than they are wide), but the rest of the size declarations become unnecessary.

1 Like

Works great. Thank you very much indeed!

Out of curiosity, is there a similiar way to also tweak the size of an oh-cell‘s expanded card to fullscreen or a custom size?

Not quite as easily. It can definitely be done, but I have never tried it because my guess is that’s it’s way more trouble than it’s worth given the number of hard coded size and position values you have to find and override. If you want something bigger, just set the cell to open a sheet modal which will take up at least full screen width always and the fullscreen height as needed.