User Account Pictures

[McFarTech (Craig)]

Hi Team.

So on my HA at the moment there are three user accounts. The HA Admin account and an account for my wife and I.

I have put a picture on each of our user accounts. But how can i get the picture to show here rather than just L or C?. If i tap say C i see my profile picture and location of where i am.

Thanks in advance

[pedolsky]

Go to section „person“ and choose an image (your.ip:8123/config/person)

[McFarTech (Craig)]

Hi. Thanks for the reply. Have i not already done that by the fact i can see the image here? Apologies if i am not following.

[pedolsky]

@McFarTech

I have put a picture on each of our user accounts

Awkward… sorry!
Could you please post the card code?

[McFarTech (Craig)]

Hi mate.

As requested.

type: picture-entity
entity: person.craig
aspect_ratio: '1'
show_name: false
image: >-
  data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50
  50' width='50' height='50' style='background-color:%23b3e5fC'%3E%3Cg%3E%3Ctext
  font-family='roboto' x='50%25' y='50%25' text-anchor='middle'
  stroke='%23212121' font-size='1.3em'
  dy='.3em'%3EC%3C/text%3E%3C/g%3E%3C/svg%3E

[pedolsky]

Use path in that way:

  data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 166 166"><polygon fill="red" points="83 26.8 65.7 61.8 27.1 67.4
  55 94.7 48.5 133.2 83 115 117.5 133.2 111 94.7 138.9 67.4 100.3 61.8 83 26.8
  83 26.8"/></svg>

Or simple:

image: /local/images/your_person_pic.png

[McFarTech (Craig)]

Hi mate.

I have changed the code as per your suggestion. It just gives me a blank now.

type: picture-entity
entity: person.craig
aspect_ratio: '1'
show_name: false
image: >-
  data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 166 166"><polygon fill="red" points="83 26.8 65.7 61.8 27.1 67.4
  55 94.7 48.5 133.2 83 115 117.5 133.2 111 94.7 138.9 67.4 100.3 61.8 83 26.8
  83 26.8"/></svg>

[pedolsky]

Mmmh… with

type: picture-entity
image: >-
  data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 166 166"><polygon fill="red" points="83 26.8 65.7 61.8 27.1 67.4
  55 94.7 48.5 133.2 83 115 117.5 133.2 111 94.7 138.9 67.4 100.3 61.8 83 26.8
  83 26.8"/></svg>
entity: person.pe
show_name: false

I get

[pedolsky]

@McFarTech

aspect_ratio: '1'

Wait - it’s aspect_ratio that causes this.

Kill the ’ ’

[McFarTech (Craig)]

Ah yes that did it. It now shows the same as you. So how do i change that to show the picture assigned to my account?

[pedolsky]

image: /local/images/your_person_pic.png

( where .png format is just an example)

[McFarTech (Craig)]

Thank you so much for your help. This is now sorted and displaying correctly.

Much appreciated

Craig

[pedolsky]

Glad to hear! Gave me inspiration for my person state cards

[DaFlea (Doug Blackmon)]

So I am new to Home Assistant and trying to achieve the same goal of using uploaded profile photos to show up instead of the blue box of text.

Im trying to put two and two together based on everyones responses.

I see references to the path image: /local/images/your_person_pic.png I am assuming this needs to be the same identical name of what was originally uploaded with setting up a user. However this doesn’t work.

I also see a lot of posting where this information is added. This seems to be a way of showing a SVG file and this proceeds the area where it starts with
image: >-
Then continues with this
data:image/svg+xml;charset=UTF-8,
etc…

I have tried a number of ways to get this photo to show up and from what I can gather is you dont use any of the SVG stuff and just modify the

image: >-

to

image: /local/image/name_of_file_uploaded.png

However nothing shows up. Could someone give a bit more detail on what the solution is.

Thank you,

Doug

[davidnestico]

Yup, on 2023.7 right now and this does not work for me either.

Here is what DOES work though:

Simply go to the developer tools page, go to states and enter “person.” to show all person entities, here you will see the entities attributes including “entity_picture”, there you will find the link to the user profile picture you can use.

[Floppus]

Here’s what I did;

• When you go to ‘settings’ - ‘People’, you can upload a picture there.
• After uploading, if you access HomeAssistant via a browser, you can right click the picture and choose ‘copy image path’.
• When you copy the path into the address bar, it looks something like this: http://homeassistant.local:8123/api/image/serve/123ab4c56de7c64ba67a445451e499ad/512x512
• Copy the part starting with /api… till the end
• Paste it in your dashboard configuration for image path

Now, I’m new to HA so I’m not sure if this will break things elsewhere, but at least now the exact same image resource is being served. It’s the same approach as the post above me, but since you’re already in that area when you upload the picture I thought maybe it is easier for some.