This Panel has been depricated and will not be supported in some future version of Home Assistant.

Please use the Gallery Card instead, which provides the same functionality with more flexibility.

Gallery Panel

Custom panel for Home Assistant's UI LoveLace which will display images and videos in the style of a gallery.

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

Installation - Files Component

Files that will appear in the gallery must be in the WWW folder, ideally in a subfolder. This component will periodically scan the folder for changes to the files, and is based on the built-in Folder component.

Create a folder in your config directory named custom_components
Create a folder in your custom_components named files
Copy the 3 files (init.py, manifest.json, and sensor.py) into the files folder
Create a folder in your WWW folder named images (or any other name, but be sure to use the proper name below)
Add your images/videos to this folder

Add the files sensor to your configuration.yaml file

- sensor
    - platform: files
      folder: /config/www/images
      name: gallery_images
      sort: date

Restart Home Assistant
Check the sensor.gallery_images entity to see if the fileList attribute lists your files

Configuration Variables - Files Component

Name	Type	Default	Description
platform	string	Required	`files`
folder	string	Required	Folder to scan, must be /config/www/***
name	string	Required	The entity ID for the sensor
sort	string	Optional	One of 'name', 'date', or 'size'; Determines how files are sorted in the Gallery, `Default: date`

Installation - Gallery Panel

Create a folder in your config directory named panels
Copy the gallery.html file into the panels folder

Add the gallery panel to your configuration.yaml file

panel_custom:
  - name: gallery
    sidebar_title: Front Door (Kuna)
    sidebar_icon: mdi:cctv
    config:
      title: Front Door
      tabs:
        - name: Videos
          entity_id: sensor.gallery_images
          file_name_format: "%YYY_%m_%d__%H_%M_%S-0400"
          caption_format: "%m/%d %H:%M %p"
          maximum_files: 10

Restart Home Assistant
Check the Panel appears in the sidebar

Configuration Variables - Gallery Panel

A config entry of one or more tabs is required. Each tab can be configured as follows

Name	Type	Default	Description
name	string	Required	The name of the tab at the top of the screen. Only displayed if more than one tab is defined.
entity_id	string	Required	The entity_id of the files sensor added above
maximum_files	string	Optional	The number of files to show in the gallery list. You may want to limit videos to make it perform better and to conserve bandwith. Used in combination with sort (using the config as above, the latest 10 by date will be shown)
file_name_format	string	Optional	The format of the file names (see below). Used in combination with caption_format for the captions below the image/video.
caption_format	string	Optional	The format of the caption (see below). Used in combination with file_name_format.

The captions under the image/video is formatted using file_name_format and caption_format. If either 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.
Use the following placeholders for the date components:

Placeholder	Description
%YYY	A 4 digit year, e.g. 2019
%m	The 2 digit month
%d	The 2 digit day
%H	The 2 digit hour
%M	The 2 digit minute
%S	The 2 digit seconds
%p	2 digits AM or PM (if included in caption_format, the output will be converted to 12 hour, if not the value will remain as the %H placeholder)

Example:

file_name_format: "%YYY_%m_%d__%H_%M_%S-0400"
- Assumes the file name is in the format 2019_06_19__20_00_00-0400
caption_format: "%m/%d %H:%M %p"
- Will parse the file name and return a date formatted as 06/19 08:00 PM

Credits

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

TarheelGrad1998/GalleryPanel