Every time someone rings my doorbell, a picture is taken and send to my app.
That works like a charm, but only the picture does not show if my vpn lost connection. I now have to go to the folder where the images are stored to see who was at my door.
For me that is not a big problem, but for my wife that is a different story and I would like to see it in one view with the live feed from the camera.
I’ve spend 4 days finding out and testing all kinds of solutions that do not show the photo’s. There are quite some plugins whom are depricated or not working at all, so i turned to ChatGPT and that came with the same answers I already tested.
I am not the only one who is looking for a solution, but I cannot find one that works.
Even HTML I tried and that came the closest (no errors, but no photos either)
in the sensors.yaml I have:
folder: /config/www/voordeurbelfotos
filter: "*.jpg"
scan_interval: 60
This creates a sensor with the content:
- /config/www/voordeurbelfotos/deurbel_20250922-212303.jpg
- /config/www/voordeurbelfotos/deurbel_20250927-141432.jpg
In a markdown-card I put:
{% set files = state_attr('sensor.voordeurbelfotos', 'file_list') %}
{% if files %}
{% for f in files %}
\<img src="/local/voordeurbelfotos/{{ f.split('/')[-1] }}" width="150" style="margin:5px; border-radius:10px; box-shadow:2px 2px 6px #00000055;">
{% endfor %}
{% else %}
_Geen foto's gevonden_
{% endif %}
This results in a card with the text:
<img src="/local/voordeurbelfotos/deurbel_20250922-212303.jpg">
<img src="/local/voordeurbelfotos/deurbel_20250927-141432.jpg"">
etc.
There is no way I can make this into HTML to show the photos.
The only way this can work is by renaming all (or a selection of the) photos to eg. photo_01.jpg to photo_10.jpg and add them to a picture-card. Every time the doorbel rings, I have to delete the last and rename all of them, so the latest photo is on top of the list.
That’s ugly and I bet there is a more elegant and faster way to do this.
Has anybody solved this problem?