2.6 KiB
type, title, sidebar_label, description, related
| type | title | sidebar_label | description | related | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| card | Picture card | Picture | The picture card allows you to set an image to use for navigation to various paths in your interface or to perform an action. |
|
The picture card allows you to set an image to use for navigation to various paths in your interface or to perform an action.
Screenshot of the picture card.
{% include dashboard/add_picture_to_card.md %}
YAML configuration
The following YAML options are available when you use YAML mode or just prefer to use YAML in the code editor in the UI.
{% configuration %}
type:
required: true
description: "picture"
type: string
image:
required: true
description: "The URL of an image. When you want to store images in your Home Assistant installation use the hosting files documentation. After storing your files, use the /local path, for example, /local/filename.jpg."
type: string
image_entity:
required: false
description: Image or person entity to display.
type: string
alt_text:
required: false
description: Alternative text for the image. This is necessary for users of assistive technology. The W3C images tutorial provides simple guidance for writing alternative text.
type: string
theme:
required: false
description: Override the used theme for this card with any loaded theme. For more information about themes, see the frontend documentation.
type: string
tap_action:
required: false
description: Action taken on card tap. See action documentation.
type: map
hold_action:
required: false
description: Action taken on card tap and hold. See action documentation.
type: map
double_tap_action:
required: false
description: Action taken on card double tap. See action documentation.
type: map
{% endconfiguration %}
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 an action:
type: picture
image: /local/light.png
tap_action:
action: perform-action
perform_action: light.toggle
data:
entity_id: light.ceiling_lights