From c757af770bf6783bbc73d74173588bdd5c8eebc0 Mon Sep 17 00:00:00 2001 From: c0ffeeca7 Date: Wed, 5 Jun 2024 17:25:13 +0200 Subject: [PATCH] Picture cards: add image from UI --- source/_dashboards/picture-entity.markdown | 2 +- source/_dashboards/picture-glance.markdown | 2 +- source/_dashboards/picture.markdown | 2 +- .../dashboard/add_picture_to_card.md | 20 +++++++++++++++++++ 4 files changed, 23 insertions(+), 3 deletions(-) create mode 100644 source/_includes/dashboard/add_picture_to_card.md diff --git a/source/_dashboards/picture-entity.markdown b/source/_dashboards/picture-entity.markdown index f17191e174b5..aee7b6513908 100644 --- a/source/_dashboards/picture-entity.markdown +++ b/source/_dashboards/picture-entity.markdown @@ -19,7 +19,7 @@ The picture entity card displays an entity in the form of an image. Instead of i Background changes according to the entity state.

-{% include dashboard/edit_dashboard.md %} +{% include dashboard/add_picture_to_card.md %} ## YAML configuration diff --git a/source/_dashboards/picture-glance.markdown b/source/_dashboards/picture-glance.markdown index 5f591567008a..5afbb59fb3a0 100644 --- a/source/_dashboards/picture-glance.markdown +++ b/source/_dashboards/picture-glance.markdown @@ -19,7 +19,7 @@ The picture glance card shows an image and lets you place small icons of entity Picture glance card for a living room.

-{% include dashboard/edit_dashboard.md %} +{% include dashboard/add_picture_to_card.md %} ## YAML configuration diff --git a/source/_dashboards/picture.markdown b/source/_dashboards/picture.markdown index bc9827e14f9d..7fade859a728 100644 --- a/source/_dashboards/picture.markdown +++ b/source/_dashboards/picture.markdown @@ -19,7 +19,7 @@ The picture card allows you to set an image to use for navigation to various pat Screenshot of the picture card.

-{% include dashboard/edit_dashboard.md %} +{% include dashboard/add_picture_to_card.md %} ## YAML configuration diff --git a/source/_includes/dashboard/add_picture_to_card.md b/source/_includes/dashboard/add_picture_to_card.md new file mode 100644 index 000000000000..81f5c0c40613 --- /dev/null +++ b/source/_includes/dashboard/add_picture_to_card.md @@ -0,0 +1,20 @@ +{% capture name %}{{ include.name | default: page.title }}{% endcapture %} +{% capture domain %}{{ include.domain | default: page.ha_domain }}{% endcapture %} +{% capture title %}{{ include.title | default: page.title }}{% endcapture %} + +## Adding a {{ title | downcase }} to your dashboard + +1. To add a card, follow steps 1-4 on [adding a card from a view](/dashboards/cards/#to-add-a-card-from-a-view). + - In step 2, on the **By card** tab, select {{ title | downcase }}. + +2. Add a picture: + + - **Upload picture** lets you pick an image from the system used to show your Home Assistant UI. + - **Local path** lets you pick an image stored on Home Assistant. For example: `/homeassistant/images/lights_view_background_image.jpg`. + - To store an image on Home Assistant, you need to [configure access to files](/common-tasks/os/#configuring-access-to-files), for example via [Samba](/common-tasks/os/#installing-and-using-the-samba-add-on) or the [Studio Code Server](/common-tasks/os/#installing-and-using-the-visual-studio-code-vsc-add-on) add-on. + - **web URL** let you use an image from the web. For example `https://www.home-assistant.io/images/frontpage/assist_wake_word.png`. + +3. Define the parameters that are specific to the {{ title | downcase }}. + - For a description of the specific settings, refer to the description under YAML configuration. + - They also apply to the UI. +4. Save your changes.