Add use_entity_picture option to picture-entity card

Allow picture-entity cards to display the entity's entity_picture attribute instead of requiring a manually configured image URL. This is particularly useful for entities that dynamically set their entity_picture (e.g., custom integrations, person entities, etc.).

Changes:
- Add use_entity_picture boolean option to PictureEntityCardConfig
- Implement logic to check entity_picture attribute when enabled
- Add editor toggle with helper text
- Add translation strings for the new option

Author: DTekNOdev

src/panels/lovelace/cards/hui-picture-entity-card.ts

@@ -72,7 +72,8 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
       !["camera", "image", "person"].includes(computeDomain(config.entity)) &&
       !config.image &&
       !config.state_image &&
-      !config.camera_image
+      !config.camera_image &&
+      !config.use_entity_picture
     ) {
       throw new Error("No image source configured");
     }
@@ -143,10 +144,19 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
     }
 
     const domain: string = computeDomain(this._config.entity);
-    let image: string | undefined =
-      (typeof this._config?.image === "object" &&
-        this._config.image.media_content_id) ||
-      (this._config.image as string | undefined);
+    let image: string | undefined;
+
+    // Check if we should use entity_picture from the entity
+    if (this._config.use_entity_picture && stateObj.attributes.entity_picture) {
+      image = stateObj.attributes.entity_picture;
+    } else {
+      // Use configured image
+      image =
+        (typeof this._config?.image === "object" &&
+          this._config.image.media_content_id) ||
+        (this._config.image as string | undefined);
+    }
+
     if (!image) {
       switch (domain) {
         case "image":

src/panels/lovelace/cards/types.ts

@@ -531,6 +531,7 @@ export interface PictureElementsCardConfig extends LovelaceCardConfig {
 
 export interface PictureEntityCardConfig extends LovelaceCardConfig {
   entity: string;
+  use_entity_picture?: boolean;
   name?: string | EntityNameItem | EntityNameItem[];
   image?: string | MediaSelectorValue;
   camera_image?: string;

src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts

@@ -35,6 +35,7 @@ const cardConfigStruct = assign(
   baseLovelaceCardConfig,
   object({
     entity: optional(string()),
+    use_entity_picture: optional(boolean()),
     image: optional(union([string(), object()])),
     name: optional(entityNameStruct),
     camera_image: optional(string()),
@@ -68,6 +69,7 @@ export class HuiPictureEntityCardEditor
     (localize: LocalizeFunc) =>
       [
         { name: "entity", required: true, selector: { entity: {} } },
+        { name: "use_entity_picture", selector: { boolean: {} } },
         {
           name: "name",
           selector: {
@@ -209,17 +211,32 @@ export class HuiPictureEntityCardEditor
 
   private _valueChanged(ev: CustomEvent): void {
     const config = ev.detail.value;
+    
+    // Remove stub image when entity changes to one with entity_picture
     if (
       config.entity &&
       config.entity !== this._config?.entity &&
       (computeDomain(config.entity) === "image" ||
         (computeDomain(config.entity) === "person" &&
+          this.hass?.states[config.entity]?.attributes.entity_picture) ||
+        (config.use_entity_picture &&
           this.hass?.states[config.entity]?.attributes.entity_picture)) &&
       config.image === STUB_IMAGE
     ) {
       delete config.image;
     }
 
+    // Remove stub image when use_entity_picture is enabled on an entity with entity_picture
+    if (
+      config.use_entity_picture &&
+      !this._config?.use_entity_picture &&
+      config.entity &&
+      this.hass?.states[config.entity]?.attributes.entity_picture &&
+      config.image === STUB_IMAGE
+    ) {
+      delete config.image;
+    }
+
     fireEvent(this, "config-changed", { config });
   }
 
@@ -247,6 +264,10 @@ export class HuiPictureEntityCardEditor
     schema: SchemaUnion<ReturnType<typeof this._schema>>
   ) => {
     switch (schema.name) {
+      case "use_entity_picture":
+        return this.hass!.localize(
+          `ui.panel.lovelace.editor.card.generic.use_entity_picture_helper`
+        );
       case "aspect_ratio":
         return typeof this._config?.grid_options?.rows === "number"
           ? this.hass!.localize(

src/translations/en.json

@@ -9325,6 +9325,8 @@
               "attribute": "Attribute",
               "camera_image": "Camera entity",
               "image_entity": "Image entity",
+              "use_entity_picture": "Use entity picture",
+              "use_entity_picture_helper": "Use the entity's entity-picture attribute instead of a manually configured image",
               "camera_view": "Camera view",
               "camera_view_options": {
                 "auto": "Auto",