Picture Card


A very simple card that allows you to set an image to use for navigation to various paths in your interface or to call a service.

Screenshot of the picture card Screenshot of the picture card.

Configuration Variables

type

(string)(Required)

picture

image

(string)(Required)

The URL of an image.

theme

(string)(Optional)

Set to any theme within themes.yaml

tap_action

(map)(Optional)

Action to take on tap

action

(string)(Required)

Action to perform (call-service, navigate, url, none)

Default value:

none

navigation_path

(string)(Optional)

Path to navigate to (e.g. /lovelace/0/) when action defined as navigate

Default value:

none

url_path

(string)(Optional)

Path to navigate to (e.g. https://www.home-assistant.io) when action defined as url

Default value:

none

service

(string)(Optional)

Service to call (e.g. media_player.media_play_pause) when action defined as call-service

Default value:

none

service_data

(string)(Optional)

Service data to include (e.g. entity_id: media_player.bedroom) when action defined as call-service

Default value:

none

confirmation

(boolean | map)(Optional)

Present a confirmation dialog to confirm the action. See confirmation object below

Default value:

false

hold_action

(map)(Optional)

Action to take on tap-and-hold

action

(string)(Required)

Action to perform (call-service, navigate, url, none)

Default value:

none

navigation_path

(string)(Optional)

Path to navigate to (e.g. /lovelace/0/) when action defined as navigate

Default value:

none

url_path

(string)(Optional)

Path to navigate to (e.g. https://www.home-assistant.io) when action defined as url

Default value:

none

service

(string)(Optional)

Service to call (e.g. media_player.media_play_pause) when action defined as call-service

Default value:

none

service_data

(string)(Optional)

Service data to include (e.g. entity_id: media_player.bedroom) when action defined as call-service

Default value:

none

confirmation

(boolean | map)(Optional)

Present a confirmation dialog to confirm the action. See confirmation object below

Default value:

false

double_tap_action

(map)(Optional)

Action to take on double tap

action

(string)(Required)

Action to perform (more-info, toggle, call-service, navigate, url, none)

Default value:

more-info

navigation_path

(string)(Optional)

Path to navigate to (e.g. /lovelace/0/) when action defined as navigate

Default value:

none

url_path

(string)(Optional)

Path to navigate to (e.g. https://www.home-assistant.io) when action defined as url

Default value:

none

service

(string)(Optional)

Service to call (e.g. media_player.media_play_pause) when action defined as call-service

Default value:

none

service_data

(string)(Optional)

Service data to include (e.g. entity_id: media_player.bedroom) when action defined as call-service

Default value:

none

confirmation

(boolean | map)(Optional)

Present a confirmation dialog to confirm the action. See confirmation object below

Default value:

false

Options For Confirmation

If you define confirmation as an object instead of boolean, you can add more customization and configurations:

Configuration Variables

text

(string)(Optional)

Text to present in the confirmation dialog.

exemptions

(list)(Optional)

List of exemption objects. See below

Options For Exemptions

Configuration Variables

user

(string)(Required)

User id that can see the view tab.

Examples

Navigate to another view:

type: picture
image: /local/home.jpg
tap_action:
  action: navigate
  navigation_path: /lovelace/home

Check the views setup on how to setup custom IDs.

Toggle entity using a service:

type: picture
image: /local/light.png
service: light.toggle
service_data:
  entity_id: light.ceiling_lights