Widget background Image change base on the item value

Setup, Configuration and Use Widgets
1

Hello everone,

I would like to request some help. Im trying to make the UI background change with the actual season (script is done, change the item), but Im not able to load in any way the background image. If Im using the background-image: url(‘/static/Spring.jpg’) its loading the image from the static folder but if I try to use my item which is itemSeasonName its not works.

This is the current code:

component: f7-card
config:
  comment: "box-shadow: 0 3px 6px rgba(80,255,255,50.3)"
  style:
    background-image: url('/static/Spring.jpg')
    background-position: center
    background-repeat: no-repeat
    border-radius: 0px
    height: 100vh
    width: 100vw

item:

    - context: item
      description: Season name item
      label: Smart Home panel season tag
      name: itemSeasonName
      required: true
      type: TEXT
      groupName: SmartHomeWallPanel

The item value can be: Spring.jpg , Winter.jpg, etc

Thank for the help!!

2

If the actual name is your item is itemSeasonName, then you don’t need to use the widget property at all. You can access the state of items directly in the widget expression. In this case, I would use a string template to build the full string value:

background-image: =`url('/static/${items.itemSeasonName.state}')`
3

I I tried this but its not works:

image
image1658×921 144 KB

If I use this its loading the image:

image
image1658×921 282 KB

4

okay, found a way :smiley:

component: f7-card
config:
  comment: "Main card element"
  style:
    height: 100vh
    width: 100vw
slots:
  default:
    - component: oh-image-card
      config:
        comment: ('Dynamic background image')
        url: =@props.itemSeasonName
        style:
          z-index: 0
          height: 100vh
          width: 100vw
          left: -8px
          top: -2px
          position: relative
          object-fit: cover
    - component: f7-block
      config:
        comment: ('Control Button widget part')
        style:
          left: 0
          position: absolute
          top: 0
          z-index: 30

The item value looks like this: http://:8080/static/image + format and in this way its good and it can be dynamically changed