Can you reference Media Source items in Picture cards?

bverkron · September 27, 2020, 2:32am

Looking for the most current, simplest (and ideally secure) way to add an image to my home assistant server (Pi w/ Home Assistant OS 0.115.2) and then reference it in a Picture Entity card.

The traditional way seems to be Hosting Files which requires manually creating folders, reboots, and publicly exposed files. I’m wondering if the new Media Source is the more modern way?

However, it’s unclear to me if / how Media Source items can be used in lovelace entities. I attempted things like /media/image_name.jpg but it does not work. The doc doesn’t help much.

Color me confused on how to best accomplish my goal (bolded above)

bverkron · September 27, 2020, 3:09am

Partially figured it out by inspecting the images in the media browser. The image source in the Media Browser UI is something like…

/media/local/image_name.jpg?authSig=eyJ0eXAiOiJKV1QiLCJhaGciOiJIUzI1NiJ9.eyJpc3MiOiJlZjA5ZDJmNjMyZDk0MjdjYmYwMmRiMDZmZWE4NWQ1NiIsInBhdGgiOiIveWVkaWEwbG9jYWwvQmVuLmpwZyIsImlhdCI6MTYwMTE3NTc4NSwiZXhwIjoxNjAxMTc1ODEefQ.A5ScY2t6nJMOuwT1M3B59r2YdVf14AP2GE-5-k0JHl4

Dropping that into the Image Path of the Picture Entity card works but seems cumbersome and not the right way to go about it. Also makes the YAML editing in the UI impossible because it makes the UI edit element stretch way out to accommodate the long string and pushes Cancel, Save, and other elements off the screen.

Edit: Looks like that authSig value in the image string is user specific. If I try to view that Picture card from my wall panel (which is logged in as a different user) it doesn’t work. Guessing I’m going outside the bounds of what Media Source is meant for.

matthijsberg · February 3, 2021, 10:13pm

HI,

I have the same ask here. I recently found that everything in your www dir is more or less exposed to the internet without password, also when using nabu casa, so I changed my directory for images I take from my webcam and publish to my devices to the Media Source component.

Especially since the more recent security incidents I became more security aware. This works great when I attach it to a message I send to the IOS app since the app handles the auth to my instance.

But now I want to show the latest image, of a certain event when this image was shot, in the GUI, but I can’t get it to work. So if anyone has some good idea’s or if we can make this a standard practice with the enhanced security, I’m all for!

matthijsberg · February 4, 2021, 10:07am

Mmh, the trick with the images in messagess from the media dir is not working anymore since 2021.2.0 .

Mariusthvdb · March 25, 2022, 7:07am

was this ever answered? Seems nobody can provide a way how to serve images from the /media share?

there have been recent posts asking about this on discord channels, but no response unfortunately. If it cant be done, its fine, but a somewhat definitive answer would be cool, and make us stop trying

I would love to know how to write the path (eg on a type: picture card) to files stored on the /media share in a folder /images… btw, shouldnt the UI editor have an image selector in place there?

hosting the files in the /config/www folder is no problem. its just that the /media share seems not to be found, even after enabling media_source: and image: in configuration.yaml.

I can find the images via Media in the left side menu and browse local files

HeroArcade · March 29, 2022, 2:22pm

I respond to Marius, has this been answered?
I would prefer to not have my images openly accesable through the www folder.

The new media share folder upload option also allows easy uploads, but now you can’t refer to that folder with a local path.

Being able to set this path on the dashboard frontend would be perfect.

cortes · March 31, 2022, 9:08pm

I came here looking for the same answer. In its place, I’m using gallery-card. It supports media source. I set menu_alignment to hidden and maximum_files to 1. That was I just get a single image and a tight frame. I also set show_reload to true as my images change frequently. Here my config:

type: custom:gallery-card
title: Driveway
menu_alignment: Hidden
show_reload: true
maximum_files: '1'
entities:
  - media-source://media_source/base/image_capture/driveway/

And in my config.yaml:

homeassistant:
  media_dirs:
    media: /media
    base: /base_media

I’m running home assistant in Docker. The startup command has a volume mount named base_media

Mariusthvdb · April 1, 2022, 8:59am

Ive had no success with any url variant after the media-source:// and before /images/season/spring.png …

    - type: picture
      image: 'media-source://media_source/local/images/season/spring.png'

![Schermafbeelding 2022-04-01 om 11.04.06|690x48, 50%]
(upload://lnjlWfVsrASxQMU7ymYdo04Y6QK.png)

which is odd, since the working path to my sound files is identical

media-source://media_source/local/sounds/sound_bites/

cortes · April 1, 2022, 4:47pm

@Mariusthvdb
I left out an important part. I added it to the original post although I’m not sure it’s a fix for your issue.

JOHLC · June 24, 2022, 4:36pm

Anyone figure out if this is possible via the native card(s)?

stoehr.jona · June 28, 2023, 7:58pm

I cannot figure out how this works
My media path is
/media/Pfanzen/Esszimmer /Calathea
I want more gallery panel cards with oder medias
my yaml settings for the card is seen in the screenshot
i already use a gallery panel card (the picture shown) but there is no media path configured

My configuration Yaml:

sensor:
    - platform: files
      folder: /config/www/images
      filter: '**/*.jpg'
      name: gallery_images
      sort: date
      recursive: True

luixal · September 21, 2023, 11:33am

Hi,

I spent some time trying to show pictures stored in media source (so they’re private and not public) in lovelace with no luck so… I’ve built a very simple cards that gets the job done.

Configuration is really simple:

type: custom:media-source-image-card
image: media-source://media_source/local/nissan_leaf.jpg
entity_id: switch.lamapara_salon_mss310_main_channel
apply_grayscale: false

The repo is here, can be installed manually (just one file) or through HACS as a custom repo for now:

Please, feel free to try it and provide feedback!

sayanova · December 12, 2023, 4:22pm

Can I use video in your card?

aki1987 · December 16, 2023, 12:24pm

Hi.
Im trying to do slideshow from images in certain folder.
I have mapped Media network storage for HA and can access photos from Media on side bar.
If I have understood Gallery card should be able to do this slide show?
But after 2 days of googling I havent been able to get single image to show up in Gallery card nor Picture card.

What am I missing?

Bernator · January 10, 2024, 8:12pm

the default media directory is “local”, so try something like this:

media-source://media_source/local/MyFolder/

luixal · April 7, 2024, 3:28pm

I haven’t updated the docs on how to use it, but there was and issue asking for this and I added video support, have a look here:

Anyhow, file size limit in media sources made it quite unusable for me when refereing to video. No idea if it can be configured.