Gallery Panel for images/videos

Hrm, sounds like you have everything right, but the files component isn’t picking up the files for some reason.

A longshot – Have you checked that your ha user has access to that folder?

I cant seem to change the acces to the symlink (other than root, but maybe thats my lack of debian expertise), but making a new folder with HA user signed to it (all rights, 777) still results in no images turning up.

Is this your root config directory? /home/homeassistant/.homeassistant/

If so, you might try changing the config to

path: /config/www/images/

That’s the only other thing I can think that would cause the issue.

Also, I know others have used symlink or equivalent and had some success.

I changed

sensor:
    - platform: files
      folder: /home/homeassistant/.homeassistant/www/images
      filter: '**/*.jpg'
      name: gallery_images
      sort: date

to

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

then I get this error when validating configuration.yaml

Invalid config for [sensor.files]: [path] is an invalid option for [sensor.files]. Check: sensor.files->path. (See ?, line ?).

Also tried it with

folder: /config/www/images/

then I get

Invalid config for [sensor.files]: not a directory for dictionary value @ data['folder']. Got '/config/www/images/'. (See ?, line ?).

Sorry, my fault. “folder” is the correct attribute name.

But odd that this time it did error that it’s not a valid directory, where it did not before. So it would seem that it could see the directory before but did not pick up any files, which is odd.

changed it back to folder: /home/homeassistant/.homeassistant/www/images

then the config validation error disappears

Great component, David, thanks for all the time and effort that’s gone into this.

I’m using this to take snaps whenever someone rings an inner or outer doorbell to show the caller; the app notification is transient so I wanted a permanent record of callers that was visible in the main page.
I’m getting the same issues with front-end not updating; I’m using the Files sensor. It doesn’t auto-update within 60 seconds, nor does changing view trigger an update. A refresh of the web interface DOES fix things, but that’s not possible on the app; you have to change to a non-view component e.g. Logbook and back before it refreshes itself.

First thing I did was add to the automation a service call to homeassistant.update_entity to refresh the file list, so the backing source is up-to-date - that has a polling interval of 60 seconds, which can cause delays. I can see the list refreshing within 0.02 seconds of a doorbell press, so that’s all good.

So, what’s the hook that triggers the update of the gallery when the referenced object changes? Maybe HA isn’t sending that through, and I couldn’t see it in the code. As an alternative for us immediate-response types, maybe it would be possible to listen for a specific refresh event that we could call ourselves in our automations? That’s a nice option as it might reduce system load.
Alternately, is this to do with the fact that Files is using Mb (2dp) as its state metric? That isn’t going to change if you’re saving small files, or swapping files; maybe the better metric would be last-updated.

I’m going to try to call config-changed, which seems a bit extreme :slight_smile: I’ll stay tuned in case I can be of any help.

I pushed a few updates in version 3.1 (list below).

I’m hoping the Reload option will help with the not updating, but it’s hard for me to test since I don’t have that issue. Try that and let me know if it works.

  • Loads videos into menu one at a time (instead of all at once), for better performance
  • Keyboard navigation of images: up/left (previous) and down/right (next)
  • Added show_reload option for adding a link for reloading images/videos.
  • Fixed bug in captions if file names contained URL encodes (e.g. spaces in file names were replaced with %20, throwing off the caption computation)

I added a pull request that only loads the images when they come into view.

1 Like

Hey guys, great card.
I’m trying to make it work but it seems to not be seen.
I got my sensor going:

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

And my card:

card:
                      type: 'custom:gallery-card'
                      entities:
                        - sensor.gallery_images
                      menu_alignment: Responsive
                      maximum_files: 10
                      file_name_format: '%YYY_%m_%d_%H_%M_%S'
                      caption_format: '%m/%d %H:%M %p'

My images are seen in the Dev tools. I use HACS to install both the Gallery and the Files component.
I added the :slight_smile: { url: /hacsfiles/gallery-card/gallery-card.js, type: module }, in my config.

But in lovelace I get:

Anyone would know what I’m missing?

Hrm, have you tried clearing your browser cache?

Also, what version are you running? You threw me with the resource bit which I’ve only done via the UI recently (but maybe there is a config way I don’t know about)

1 Like

you were right, it was a cache thing.
How can I not see the titles and not see the photos on the right?

Hrm, I haven’t thought about hiding the titles. Try setting caption_format to a space, see if that works.

The photos on the right are controlled by the menu_alignment settings. If you don’t want them at all set it to “hidden”.

1 Like

YES!!! that all worked. How often do the pictures change? or is is usually all done manually?
I would like them to change every so often.
Great work. Thanks fo the card.

Do you mean how often new images are picked up? That is set by the scan interval on the files sensor:

The UI should refresh them when the files sensor changes, but some have reported that they need to manually refresh, so YMMV there.

Now if you mean you want the UI to automatically advance through the images, that can be done with the slideshow_timer option on the card.

1 Like

Yup, that was it, slideshow_timer. Thanks

Great, I’m 3 for 3. I think that’s my best record ever, lol. :slight_smile:

2 Likes

And super fast too. haha. Thanks man

For some reason. Now that I have the card formatted the way I want, the picture stays the same all the time. I can click through them if I want but otherwise it doesn’t flow from one pic to another every 120 seconds.

Could it be anything in my new code?
The fact that I use card_mod?


card:
                      type: custom:gallery-card
                      entities:
                        - sensor.gallery_images
                      menu_alignment: hidden
                      card_mod:
                        style: |
                          ha-card {
                            border-radius: calc(var(--custom-button-card-border-radius) / 2);  /* card - rounded corners */
                            aspect-ratio: 1/1;  /* card - square */
                          }
                          figure {
                            margin: 0px !important;  /* remove card margins to line up with rest of dashboard */
                          }
                          figcaption {
                            display: none;  /* hide image caption */
                          }
                          img {
                            object-fit: cover !important;  /* fill the whole card */
                            aspect-ratio: 1/1;  /* needed for object-fit */
                          }
                          .btn {
                            top: 50% !important;  /* center buttons */
                          }
                          .modal-content {
                            aspect-ratio: unset;  /* undo image aspect-ratio when clicked */
                          }