Custom Home Assistant Lovelace card for browsing camera media in a clean timeline-style gallery with preview player, object filters, optional live view, and a built-in visual editor.
Current version: v2.5.0
Before installing, you need to decide how the card will read your media files. The card supports two different modes depending on your setup:
Uses Home Assistant's native Media Source integration.
- Ideal for most users, Frigate setups, and standard local media folders.
- Works directly with anything available in your Home Assistant Media Browser without extra integrations or YAML configuration.
- Limited to the folders and integrations explicitly exposed to the HA Media Source.
Reads a fileList attribute from a custom sensor (using FileTrack or YAML).
- Ideal for custom folder structures, external NAS mounts, or users who want strict control over which files are scanned.
- Highly flexible, as it can scan any folder path accessible to your Home Assistant instance.
- Requires installing an additional custom integration (FileTrack) or configuring sensors manually in your
configuration.yaml.
- Click the button above
- Click Download
- Restart Home Assistant
Using sensor mode? Follow the steps below to set up your file sensors.
The FileTrack integration creates a sensor that scans a folder and exposes its contents as a fileList attribute — this is what the Camera Gallery Card reads in sensor mode.
FileTrack is a fork of the archived files integration by TarheelGrad1998.
- Open HACS
- Go to Integrations
- Click the three-dot menu and choose Custom repositories
- Add
https://github.com/TheScubadiver/FileTrackas an Integration - Search for FileTrack and install it
- Restart Home Assistant
- Go to Settings → Devices & Services and add FileTrack
Note
Once you have installed FileTrack, you can leave it alone. No need to configure anything in FileTrack — everything is configured in the card editor UI.
Add sensors directly to your configuration.yaml file:
filetrack:
sensors:
- name: Recordings
folder: /config/www/testNote: Restart Home Assistant after adding YAML entries.
- Image & video preview
- Timeline thumbnails with lazy loading
- Day grouping
- Automatic timestamp parsing from filename and folder path — no configuration needed for most setups
- Object filter buttons with custom icon support
- Object detection pill in timestamp bar
- Horizontal or vertical thumbnail layout
- Mobile friendly
- Media type icon (image / video)
- Cover / Contain option for media display
- Sensor entities with
fileList - Home Assistant
media_source - Multiple sensors or media folders
-
Native Home Assistant WebRTC live preview
-
Redesigned live view layout: camera name on the left, controls on the right
-
Native fullscreen button (iOS + Android/desktop)
-
Pinch to zoom in fullscreen — touch, trackpad, and Ctrl + scroll wheel
-
Aspect ratio toggle — quickly switch between 16:9, 4:3 and 1:1, remembered per camera
-
Live badge
-
Camera switching with configurable picker
-
Default live camera
-
Camera friendly names and entity IDs in selector
- Automatic frame capture for all video sources in media source mode
- Frigate cameras: Frigate snapshot
- All other sources (NAS, Reolink, Blue Iris, etc.): first-frame capture
- Sensor mode: first-frame capture
- Video autoplay toggle (gallery)
- Separate auto-mute toggle for gallery and live view
- Per-object filter color customization
- Delete
- Multiple delete
- Download
- Long-press action menu
- Write selected filename to
input_texthelper — use{{ states('input_text.your_helper') }}anywhere in HA
Built-in Lovelace editor with tabs:
- General
- Viewer
- Live
- Thumbnails
- Styling
Features:
- Entity suggestions
- Media folder browser (starts at root)
- Field validation
- Object filter picker
- Cleanup of legacy config keys
- Live preview in the HA card picker
- Create new FileTrack sensor from the General tab
The Styling tab provides a visual editor for colors and border radius.
Show styling sections
| Section | Options |
|---|---|
| Card | Background, Border color, Border radius |
| Preview bar | Bar text color, Pill color |
| Thumbnails | Bar background, Bar text color, Border radius |
| Filter buttons | Background, Icon color, Active background, Active icon color, Border radius |
| Today / Date / Live | Text color, Chevron color, Live active color, Border radius |
Add this to your configuration.yaml and restart Home Assistant:
shell_command:
gallery_delete: 'rm -f "{{ path }}"'*(Note: The {{ path }} represents the absolute path to the file inside your Home Assistant container, for example: /config/www/doorbell/visitor/{{ file }}
Then configure the card to use it:
type: custom:camera-gallery-card
camera_entity: camera.my_camera
delete_service: shell_command.gallery_delete
allow_delete: trueThe card will show a delete option in the thumbnail context menu (e.g. /config/www/doorbell/visitor/snapshot1.jpg). A confirmation dialog is shown by default — you can disable it with delete_confirm: false.
⚠️ Warning: This permanently deletes the file from disk. There is no undo.
Tip
To enable delete actions, configure a shell command in Home Assistant and provide the service name in the card editor under General → Delete service.
Optional delete options are also available in the editor:
- Confirm before deleting
- Allow bulk delete
Note
Delete is intended for files inside /config/www/. Frigate media sources do not support delete actions.
The card can write the filename of the currently selected image or video to a Home Assistant input_text helper. You can then use it anywhere in HA — other cards, template sensors, automations, etc.
1. Create a helper
Go to Settings → Helpers → Create helper → Text and give it a name (e.g. camera_selected_file).
2. Add to your card config
sync_entity: input_text.camera_selected_file3. Use it anywhere in HA
{{ states('input_text.camera_selected_file') }}Show all configuration options
| Option | Description |
|---|---|
source_mode |
sensor or media |
entity / entities |
Sensor source |
media_source / media_sources |
Media browser source |
start_mode |
Default view: gallery or live |
aspect_ratio |
Preview aspect ratio: 16:9, 4:3, or 1:1 |
preview_position |
top or bottom |
preview_click_to_open |
Click to open preview |
bar_position |
Timestamp bar position |
bar_opacity |
Timestamp bar opacity |
thumb_layout |
horizontal or vertical |
thumb_size |
Thumbnail size |
thumb_bar_position |
Thumb timestamp bar |
max_media |
Max media items |
object_filters |
Filter buttons (built-in and custom) |
object_colors |
Color per object filter |
entity_filter_map |
Map entity to object type |
live_enabled |
Enable live mode |
live_camera_entity |
Default camera entity for live view |
live_camera_entities |
Camera entities visible in the live picker |
live_auto_muted |
Auto-mute audio in live view |
autoplay |
Auto-play videos in gallery |
auto_muted |
Auto-mute videos in gallery |
object_fit |
Media display mode: cover or contain |
sync_entity |
input_text.* entity to write the selected filename to |
folder_datetime_format |
Custom folder date format (e.g. YYYY-MM-DD) |
filename_datetime_format |
Custom filename date/time format (e.g. YYYY{MM}{DD}_{HH}{mm}{ss}) |
allow_delete |
Enable delete action |
allow_bulk_delete |
Enable bulk delete |
delete_confirm |
Show confirmation before deleting |
delete_service |
Delete file service |
style_variables |
Custom CSS variable overrides |
All visual styling can be customized via the Styling tab in the editor.
Show all CSS variables
| Variable | Element | Default |
|---|---|---|
--cgc-card-bg |
Card background | theme card color |
--cgc-card-border-color |
Card border | theme divider color |
--r |
Card border radius | 10px |
--cgc-tsbar-txt |
Preview bar text color | #fff |
--cgc-pill-bg |
Preview pill background | theme secondary bg |
--cgc-tbar-bg |
Thumbnail bar background | theme secondary bg |
--cgc-tbar-txt |
Thumbnail bar text color | theme text color |
--cgc-thumb-radius |
Thumbnail border radius | 10px |
--cgc-obj-btn-bg |
Filter button background | theme secondary bg |
--cgc-obj-icon-color |
Filter icon color | theme text color |
--cgc-obj-btn-active-bg |
Active filter background | primary color |
--cgc-obj-icon-active-color |
Active filter icon color | #fff |
--cgc-obj-btn-radius |
Filter button border radius | 10px |
--cgc-ctrl-txt |
Today/date/live text color | theme secondary text |
--cgc-ctrl-chevron |
Date navigation chevron color | theme text color |
--cgc-live-active-bg |
Live button active background | error color |
--cgc-ctrl-radius |
Controls bar border radius | 10px |
Supported built-in filters:
bicycle · bird · bus · car · cat · dog · motorcycle · person · truck · visitor
Custom filters with a custom icon can be added via the editor.
Object filter colors can be assigned per filter type in the editor.
Tip
Recommended filename format for object detection:
2026-03-09_12-31-10_person.jpg
2026-03-09_12-31-10_car.mp4
The card extracts timestamps from filenames and folder paths for sorting, day grouping, preview timestamps, and thumbnail labels. Most common NVR and camera setups are recognised automatically — no configuration needed.
Folder = date, filename = time
Many NVR systems store recordings in dated folders. The card detects the date from the folder name and the time from the filename:
/media/recordings/2026-03-14/14_30_00.mp4
/media/recordings/20260314/143000.mp4
/media/recordings/14-03-2026/cam_14:30:00.mp4
Recognised folder formats:
| Format | Example |
|---|---|
YYYY-MM-DD / YYYY.MM.DD / YYYY_MM_DD |
2026-03-14 |
DD-MM-YYYY / DD.MM.YYYY / DD_MM_YYYY |
14-03-2026 |
YYYYMMDD |
20260314 |
DDMM (4 digits, European first) |
1403 |
MMDD (4 digits, fallback) |
0314 |
Recognised time formats in filename (prefix/suffix allowed):
| Format | Example |
|---|---|
HH:MM:SS |
cam_14:30:00.mp4 |
HH-MM-SS |
cam_14-30-00.mp4 |
HH_MM_SS |
cam_14_30_00.mp4 |
HHMMSS (exact 6 digits only) |
143000.mp4 |
All date/time in the filename
| Format | Example |
|---|---|
YYYY-MM-DD + separator + HH:MM:SS / HH-MM-SS / HH.MM.SS |
2026-03-14_14-30-00.jpg |
YYYYMMDD_HHMMSS or YYYYMMDD-HHMMSS |
20260314_143000.jpg |
/YYYYMMDD/HHMMSS. (path structure) |
.../20260314/143000.jpg |
| Unix timestamp (9–11 digits) | 1741512345.jpg |
| Reolink media source | detected automatically |
If your folder or filename uses a different pattern, set folder_datetime_format and/or filename_datetime_format in the editor.
Available tokens:
| Token | Meaning |
|---|---|
YYYY |
4-digit year |
YY |
2-digit year (2000+) |
MM |
Month |
DD |
Day |
HH |
Hour |
mm |
Minutes |
ss |
Seconds |
Everything outside the tokens is matched literally. Example: cam_{YYYY}{MM}{DD} matches cam_20260314.
Tip
folder_datetime_format and filename_datetime_format take priority over auto-detection. Use them only when auto-detection does not cover your setup.
MIT License