How to create background images for cards other than location card

Add-ons UIs
1

Has anybody an idea how to create background images for cards other than location card. I’m unclear how to code that in YAML

Any hint is highly appreciated

2

Do you mean cards that you are manually placing on a Layout page or the cards on the Equipment and Properties tabs?

3

I mean cards that i place manually on layout page

4

For cells, add something like this to your cell or card:

  style:
    background: url(/static/home.png)
    background-size: cover

Addl. info on background-size:
https://www.w3schools.com/cssref/css3_pr_background-size.asp
For standalone cards this is not currently possible.

1 Like
5

Hey Yannick

Thanks a lot for your answer. I will try it out…

6

Hi apologies for jumping on an old thread but I suppose it is on the same topic only I would like to use a dynamic image URL taken from the chromecast binding.

I have searched about and tried a few different ways to solve this (see below). Any help from the community would be greatly appreciated.

Regards

component: f7-card
config:
  style:
    height: 160px
    background-image: ='url(' + props.albumArtItem + ')'
    background-size: cover
    background-position: center

component: f7-card
config:
  style:
    height: 160px
    background-image: ='url(' + =items[props.albumArtItem].state + ')'
    background-size: cover
    background-position: center
1 Like
7

Hi clincophobic,

were you able to figure out a solution for that ?
I have the same problem and can’t figure out how to solve it.

Regards

8

See the recent discussion here:

1 Like
9

Thank you Justin!

I figured out another way how I solve this for me.

I took a F7-Card and placed a image-card into it. thats how I can have a dynamic Image and placed some Icons on the Image.

But now, somehow I get a really big Border around my Image. Is there a way to have automatic sizing which fits my Image?

Here is my Code:

uid: Bildtest2
tags: []
props:
  parameters:
    - context: item
      description: Item zu Bild auswählen
      label: Item with Imagepath
      name: imagepath
      required: false
      type: TEXT
    - context: item
      description: Item um aktuelle Temp anzuzeigen
      label: Temperatur Actual value
      name: tempAV
      required: false
      type: TEXT
    - context: item
      description: Item um Temp setpoint anzuzeigen
      label: Temperatur Setpoint
      name: tempSP
      required: false
      type: TEXT
    - context: item
      description: Item um Luftfeuchte anzuzeigen
      label: Humidity
      name: humidity
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Feb 10, 2022, 12:26:45 PM
component: f7-card
config:
  style:
    --f7-card-margin-horizontal: 0px
    height:
slots:
  default:
    - component: f7-card-content
    - component: oh-image-card
      config:
        item: =props.imagepath
        noBorder: true
        noShadow: true
        lazy: true
    - component: f7-card-content
    - component: oh-link
      config:
        text: "=(items[props.tempAV].displayState  ? items[props.tempAV].displayState : items[props.tempAV].state) +  (props.tempSP ? ' (' + items[props.tempSP].state + ')' : '')"
        iconF7: thermometer
        iconSize: 30
        style:
          color: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
          left: 10em
          top: -5.5rem
          position: relative
    - component: oh-link
      config:
        text: =items[props.humidity].displayState
        iconF7: drop
        iconSize: 30
        style:
          color: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
          left: 12em
          top: -5.5rem
          position: relative
10

The big border is because you used an oh-image-card component. All the “card” components are just combinations of the the basic components already incorporated into an f7-card. So in effect you are just adding a card (which already has the set white background and border stylings) on top of a card, getting double the card margin. Instead of dding card components when you are making your own custom card, use the basic component instead; in this case an oh-image. Then you have much more control over the sizing and position. Here’s a quick comparison:

    - component: f7-row
      config:
        style:
          justify-content: flex-start
      slots:
        default:
          - component: f7-card
            config:
              style:
                max-width: 200px
            slots:
              default:
                - component: oh-image-card
                  config:
                    item: Speaker_MasterBath_CurrentAlbumCoverArt
          - component: f7-card
            config:
              style:
                max-width: 200px
            slots:
              default:
                - component: oh-image
                  config:
                    item: Speaker_MasterBath_CurrentAlbumCoverArt
                    style:
                      max-width: 100%

image

The downside here, as you can see in the image on the right, is that this covering over much of the card, not acting as an actual background. You can customize it completely if you want to, rounding off the corners to match, etc., but that’s a lot of extra work when a true background image will have that all done automatically. If you want the image to be the actual card background with all the autosizing and placement that implies, you need to read up on the link I posted above.

1 Like