home-assistant.io/source/_dashboards/picture-entity.markdown

type, title, sidebar_label, description

type	title	sidebar_label	description
card	Picture entity card	Picture entity	The picture entity card displays an entity in the form of an image. Instead of images from URL, it can also show the picture of camera entities.

The picture entity card displays an entity in the form of an image. Instead of images from URL, it can also show the picture of camera entities.

Background changes according to the entity state.

{% include dashboard/edit_dashboard.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-entity" type: string entity: required: true description: "An entity_id used for the picture." type: string camera_image: required: false description: "Camera entity_id to use. (not required if entity is already a camera-entity)." type: string camera_view: required: false description: '"live" will show the live view if stream is enabled.' default: auto type: string image: required: false description: URL of an image. To use a locally hosted image, see Hosting. type: string state_image: required: false description: "Map entity states to images (state: image URL, check the example below)." type: map state_filter: required: false description: 'State-based CSS filters' type: map aspect_ratio: required: false description: 'Forces the height of the image to be a ratio of the width. Valid formats: Height percentage value (23%) or ratio expressed with colon or "x" separator (16:9 or 16x9). For a ratio, the second element can be omitted and will default to "1" (1.78 equals 1.78:1).' type: string fit_mode: required: false description: 'Defines the manner in which the image is stretched/clipped to fit the card area. cover: The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit. contain: The image keeps its aspect ratio, but is resized to fit within the given dimension. fill: The image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit.' type: string default: cover name: required: false description: Overwrite entity name. type: string show_name: required: false description: Shows name in footer. type: boolean default: true show_state: required: false description: Shows state in footer. type: boolean default: true 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 %}

How to use state_filter

Specify different CSS filters

state_filter:
  "on": brightness(110%) saturate(1.2)
  "off": brightness(50%) hue-rotate(45deg)

Examples

Basic example:

type: picture-entity
entity: light.bed_light
image: /local/bed_light.png

Different images for each state:

type: picture-entity
entity: light.bed_light
state_image:
  "on": /local/bed_light_on.png
  "off": /local/bed_light_off.png

Displaying a live feed from an FFmpeg camera:

{% raw %}

type: picture-entity
entity: camera.backdoor
camera_view: live
tap_action:
  action: call-service
  service: camera.snapshot
  data:
    entity_id: camera.backdoor
    filename: '/shared/backdoor-{{ now().strftime("%Y-%m-%d-%H%M%S") }}.jpg'

{% endraw %}

The filename needs to be a path that is writable by Home Assistant in your system. You may need to configure allowlist_external_dirs (documentation).