PhotoFrame custom card

[Cyb3rfr3ak]

Hello there,

I want to share PhotoFrame with you - a custom card which adds a simple photo slideshow to your Home Assistant dashboards.

My motivation behind this project was that our Echo Show 15 device is nowadays showing an unbearable amount of ads, so I wanted to use an old tablet + Home Assistant to get a better alternative for what we had been using that device for.

The PhotoFrame card uses the folder and media source integration to access the image files and any registered Home Assistant user can easily upload new photos via Media Browser.

You can find the project on GitHub with installation instructions. I am probably lacking advanced UI skills to fulfill any complex feature request, but I’d still love to hear your thoughts, feedback and suggestions for improvements.

Cheers!

[ImYAHA]

Thanks for sharing this! Do you think you could look into adding a fade effect to the picture changes?

[Cyb3rfr3ak]

Sorry for the delayed response. I’ve been wanting that as well and will try to look into it during the weekend

[ImYAHA]

No worries man, take your time

[Cyb3rfr3ak]

@ImYAHA just a week later, but I’ve added a crossfade transition effect now You should be able to update the card through HACS - I’m still fairly new to this, so let me know if you run into issues.

[kexan82]

Hi. Is it possible to custom point this to another media folder?

[Cyb3rfr3ak]

Hi @kexan82, yes, you can point the folder-sensor to another media folder. For example, if you want to use a folder on a NAS (shared via samba):

1. Go to “Settings → System → Storage → Add network storage”

• Name: Fileserver_Photoframe
• Usage: Media
• Server, remote share etc. depends on your setup

2. Add another folder sensor to your Home Assistant configuration

- platform: folder
  folder: /media/Fileserver_Photoframe

3. Either upload images to your NAS folder the way you like, or open Home Assistant’s Media Browser panel, then go to “My Media → Fileserver_Photoframe” and upload your images there
4. In the custom card configuration, under “Images Sensor Entity”, select the “Fileserver_Photoframe” sensor

[kexan82]

I tried this. I can access the folder Onedrive in my my_media folder in media, but using the path /media/Onedrive doesnt work. To be fair though, its a multi folder setup with years and the sub folders for each months. Can it read into folders or just the top mounted one?

Is it possible to use a dlna server link? It has a all pictures feature that i can point to

http://192.168.50.1:8200/MediaItems/

Can i point a folder sensor to this adress?

[Cyb3rfr3ak]

Apparently, the folder sensor that I am using is not able to list files recursively. So in your case, even if you’d configure the sensor to point to your NAS folder, it will only provide top-level items to the custom card.

I am looking into building a custom integration but I feel like there must be some easier way

[cnudelmann]

Stupid question. I placed folder in /media directory. Next to the config directory. When I go to media browser it shows in the my_media folder. Nothing is showing though in the frame. C&Pd the configuration.yaml info. Not sure what I am doing wrong.

[Cyb3rfr3ak]

Hi @cnudelmann, the folder you created in /media/… directory must be configured in the folder sensor.

For example: if the folder is at /media/my-photos, then the sensor config should be:

sensor:
- platform: folder
  folder: /media/my-photos

After restarting HA, you will have a sensor named sensor.my_photos which contains all photos of your folder.

That sensor should show up in the custom card configuration under “Images Sensor Entity”.

[tyler.asselin]

I have a great use for the photo-frame card so thanks for this!. I’m wondering what calendar card you’re using to see the whole month. I’ve been looking for an alternative to the native one and have had no luck.

EDIT: Looks like it’s GitHub - totaldebug/atomic-calendar-revive: An advanced calendar card for Home Assistant Lovelace.! Finally found one!

[Cyb3rfr3ak]

Happy to hear!
And yes, that’s the calendar card I’m using for the monthly view.

[NavNav]

@tyler.asselin

I’m wondering what calendar card you’re using to see the whole month

I am also using the Atomic Calendar Revive but mostly in event mode since it’s pretty flexible with card_mod!

[LordeXf]

Thx @Cyb3rfr3ak for sharing, it is simple and effective!
Well done for the ratio

What I needed:)

Questions:

1. What would be a large amount of picture that we would need to install GitHub - tienducle/ha-media-files ?

2. I’m struggling to remove the borders that appearing at the very beginning of the slideshow, when the card is loading:

The code displaying what should be my end result (don’t scream about how I achieved it;) ) :

card_mod:
  style: |
    .photo-container {
      transform: scale(1.1) !important;
    } .photo-container img {
      transform: scale(1.01) !important;
      transform-origin: center !important;
    }
    ha-card {
      background: transparent !important;
    }

here to remove border and remove the white out fade from beginning:

card_mod:
  style: |
    .photo-container {
      background: transparent !important;
      border: 0px !important;
    } 
    .photo-container img {
      transform: scale(1.01) !important;
      transform-origin: center !important;
      background: transparent !important;
      border: 0px;
    }
    ha-card {
      height: 274px;
      background: #19212E !important;
      border: 0px !important;
    }

3. Can we extend the picture visibility to the full card size, and not only “inside”?
   See question 2, the borders is the limit of the picture, and the background colored is the size of the card.

Many thx!

[Cyb3rfr3ak]

Hi @LordeXf, thank you for the feedback and suggestions!

To 1.: I have changed the wording now, it was a bit unclear. That custom integration is only needed if you have an existing photo collection (e.g. mounted from a NAS) which contains subfolders - the Home Assistant Folder sensor does not list files from subfolders.

To 2.: I was not able to figure out how to remove the thin lines of the image container - or at least with my limited knowledge about HTML/CSS/Lovelace, I did not find any of the solutions suggested by my favourite LLM slot machine Cursor to be acceptable

To 3.: But I have now added a “borderless” option which extends the picture to the full card size. And maybe the thin line at first load disturbs you a bit less now!