Custom card for Home Assistant's UI LoveLace which will display images and videos in the style of a gallery. Also supports displaying camera images.

This was developed for use alongside the component for Kuna cameras but should work with any images/videos, in theory.

To display files from a folder, there are now three options when using v3.3+:

1. The files component, a separate integration you must install and configure.
2. Using Local Media through a media source. Set up the media source per hass and ensure it appears in the media browser. NOTE: DLNA sources not currently supported.
3. (new in v3.3) The folder component, similar to the files component but included in Home Assistant by default.

At present, the decision of which to use is up to you, but there are consequences. The files and folder components load the files from the server on the backend into a sensor. This means when Lovelace loads it is much faster to access files. However, you MUST store your files in the www directory, which means they are essentially publicly available to anyone who can access your HA URL. The media source component only retrieves files when you load the page, which means it appears slower to load. However, those files are protected by Home Assistant's authorization and not publicly available. Additionally, media source files are currently only sorted by file name, where files has more options for date and file size.

Now available in HACS, but follow the below to install manually. For more details, see Thomas Loven's Install Guide

1. Place the gallery-card.js file under your /config/www/ folder of Home Assistant (suggest - create a subdirectory for cards)
2. Add the card within the resources section (Config -> Lovelace Dashboards -> Resources) URL: /local/cards/gallery-card.js Type: Javascript Module
3. Add the gallery card to your Lovelace configuration. The below is an example config:

   type: 'custom:gallery-card'
   entities:
     - camera.front_door
     - sensor.gallery_images
     - 'media-source://media_source/videos/'
   menu_alignment: Responsive
   maximum_files: 10
   file_name_format: YYYYMMDD-HHmmss
   caption_format: M/D h:mm A 
   

I recommend adding the card to a view which is set to Panel Mode for best results.

Whether using the editor or yaml, the following configurations can be used:

To add a media source, specify the path to the media source folder as an entity.
The format of a media source path should be: media-source://media_source/{your folders}/ Only Local Media sources are currently supported (i.e. not DLNA sources)

Additionally, media source entities can have the following additional options:

Examples:

```
entities:
  - path: 'media-source://media_source/surveillance/Carport/'
    recursive: true 
include_images: false
```

```
entities:
  - path: 'media-source://media_source/surveillance/Carport/'
    folder_format: YYYYMMDDA
include_video: false
```

Use caution if your folders are very deep (lots of subfolders) or wide (lots of folders/files) as you could overload the Home Assistant web service. If your UI loops between "Connection Lost" and reloading the page, try removing the recursive option or using a more direct folder path.

Available options for Menu Alignment are below:

The captions under the image/video is formatted using file_name_format and caption_format. If either file_name_format or caption_format is ommitted, the raw filename is used.

The assumption is that the file name contains the date formatted such that it can be parsed and formatted for easier human consumption. As of v3.4, the day.js library is used for parsing and formatting dates.

• Available options for file_name_format
• Available options for caption_format as well as folder_format

Example:

• file_name_format: YYYY_MM_DD__HH_mm_ss
  • Assumes the file name is in the format 2023_03_17__20_00_00
• caption_format: M/D h:mm A
  • Will parse the file name and return a date formatted as 3/17 8:00 PM

Notes:

• You may use a value of "AGO" for caption_format to display the elapsed time since the file date (e.g. "an hour ago"). More information here
• To mix AGO with a date format, ensure AGO is within brackets. E.g. "[AGO on] dddd" will result in "an hour ago on Saturday"
• You may also use a space (caption_format: " ") to leave the captions blank.
• As of v3.4, you no longer need to specify any extranous characters in file_name_format. The day.js library is capable of "finding" the proper date in the file name.

Forked from TarheelGrad1998/gallery-card:master to fix 2024 issues

The files component largely taken from work done by @zsarnett in the slideshow card, from which other inspiration was also taken.