Show a person's age with their name

ImmichFrame.Core/Interfaces/IClientSettings.cs

@@ -14,6 +14,7 @@ public interface IClientSettings
         public string? PhotoDateFormat { get; }
         public bool ShowImageDesc { get; }
         public bool ShowPeopleDesc { get; }
+        public bool ShowPeopleAge { get; }
         public bool ShowTagsDesc { get; }
         public bool ShowAlbumName { get; }
         public bool ShowImageLocation { get; }

ImmichFrame.WebApi.Tests/Resources/TestV1.json

@@ -43,6 +43,7 @@
     "PhotoDateFormat": "PhotoDateFormat_TEST",
     "ShowImageDesc": true,
     "ShowPeopleDesc": true,
+    "ShowPeopleAge": true,
     "ShowImageLocation": true,
     "ImageLocationFormat": "ImageLocationFormat_TEST",
     "PrimaryColor": "PrimaryColor_TEST",

ImmichFrame.WebApi.Tests/Resources/TestV2.json

@@ -23,6 +23,7 @@
     "ShowPhotoDate": true,
     "ShowImageDesc": true,
     "ShowPeopleDesc": true,
+    "ShowPeopleAge": true,
     "ShowAlbumName": true,
     "ShowImageLocation": true,
     "PrimaryColor": "PrimaryColor_TEST",

ImmichFrame.WebApi.Tests/Resources/TestV2.yml

@@ -22,6 +22,7 @@ General:
   ShowPhotoDate: true
   ShowImageDesc: true
   ShowPeopleDesc: true
+  ShowPeopleAge: true
   ShowAlbumName: true
   ShowImageLocation: true
   PrimaryColor: PrimaryColor_TEST

ImmichFrame.WebApi/Helpers/Config/ServerSettingsV1.cs

@@ -41,6 +41,7 @@ public class ServerSettingsV1 : IConfigSettable
     public string? PhotoDateFormat { get; set; } = "MM/dd/yyyy";
     public bool ShowImageDesc { get; set; } = true;
     public bool ShowPeopleDesc { get; set; } = true;
+    public bool ShowPeopleAge { get; set; } = false;
     public bool ShowTagsDesc { get; set; } = true;
     public bool ShowAlbumName { get; set; } = true;
     public bool ShowImageLocation { get; set; } = true;
@@ -119,6 +120,7 @@ class GeneralSettingsV1Adapter(ServerSettingsV1 _delegate) : IGeneralSettings
         public string? PhotoDateFormat => _delegate.PhotoDateFormat;
         public bool ShowImageDesc => _delegate.ShowImageDesc;
         public bool ShowPeopleDesc => _delegate.ShowPeopleDesc;
+        public bool ShowPeopleAge => _delegate.ShowPeopleAge;
         public bool ShowTagsDesc => _delegate.ShowTagsDesc;
         public bool ShowAlbumName => _delegate.ShowAlbumName;
         public bool ShowImageLocation => _delegate.ShowImageLocation;

ImmichFrame.WebApi/Models/ClientSettingsDto.cs

@@ -16,6 +16,7 @@ public class ClientSettingsDto(IClientSettings settings) : IClientSettings
     public string? PhotoDateFormat => settings.PhotoDateFormat;
     public bool ShowImageDesc => settings.ShowImageDesc;
     public bool ShowPeopleDesc => settings.ShowPeopleDesc;
+    public bool ShowPeopleAge => settings.ShowPeopleAge;
     public bool ShowTagsDesc => settings.ShowTagsDesc;
     public bool ShowAlbumName => settings.ShowAlbumName;
     public bool ShowImageLocation => settings.ShowImageLocation;

ImmichFrame.WebApi/Models/ServerSettings.cs

@@ -50,6 +50,7 @@ public class GeneralSettings : IGeneralSettings, IConfigSettable
     public bool ShowPhotoDate { get; set; } = true;
     public bool ShowImageDesc { get; set; } = true;
     public bool ShowPeopleDesc { get; set; } = true;
+    public bool ShowPeopleAge { get; set; } = false;
     public bool ShowTagsDesc { get; set; } = true;
     public bool ShowAlbumName { get; set; } = true;
     public bool ShowImageLocation { get; set; } = true;

Install_Web.md

@@ -67,6 +67,7 @@ services:
       # PhotoDateFormat: "yyyy-MM-dd"
       # ShowImageDesc: "true"
       # ShowPeopleDesc: "true"
+      # ShowPeopleAge: "false"
       # ShowAlbumName: "true"
       # ShowImageLocation: "true"
       # ImageLocationFormat: "City,State,Country"

docker/Settings.example.json

@@ -23,6 +23,7 @@
     "ShowPhotoDate": true,
     "ShowImageDesc": true,
     "ShowPeopleDesc": true,
+    "ShowPeopleAge": false,
     "ShowAlbumName": true,
     "ShowImageLocation": true,
     "PrimaryColor": "#f5deb3",

docker/Settings.example.yml

@@ -21,6 +21,7 @@ General:
   ShowPhotoDate: true
   ShowImageDesc: true
   ShowPeopleDesc: true
+  ShowPeopleAge: false
   ShowAlbumName: true
   ShowImageLocation: true
   PrimaryColor: '#f5deb3'

docker/example.env

@@ -34,6 +34,7 @@ ApiKey=KEY
 # PhotoDateFormat=yyyy-MM-dd
 # ShowImageDesc=true
 # ShowPeopleDesc=true
+# ShowPeopleAge=false
 # ShowAlbumName=true
 # ShowImageLocation=true
 # ImageLocationFormat=City,State,Country

docs/docs/getting-started/configuration.md

@@ -76,6 +76,8 @@ General:
   ShowImageDesc: true  # boolean
   # Displays a comma separated list of names of all the people that are assigned in immich.
   ShowPeopleDesc: true  # boolean
+  # Appends each person's age at the time the photo was taken in brackets, e.g. "John (7)". Requires ShowPeopleDesc and a birthday set in immich.
+  ShowPeopleAge: false  # boolean
   # Displays a comma separated list of names of all the tags that are assigned in immich.
   ShowTagsDesc: true  # boolean
   # Displays a comma separated list of names of all the albums for an image.

docs/docs/getting-started/configurationV1.md

@@ -41,6 +41,7 @@ sidebar_position: 4
 | [Calendar](#calendar)   | Webcalendars               | string[]                            | []                                             | A list of webcalendar URIs in the .ics format. e.g. https://calendar.google.com/calendar/ical/XXXXXX/public/basic.ics                 |
 | [Metadata](#metadata)   | ShowImageDesc              | boolean                             | true                                           | Displays the description of the current image.                                                                                        |
 | [Metadata](#metadata)   | ShowPeopleDesc             | boolean                             | true                                           | Displays a comma separated list of names of all the people that are assigned in immich.                                               |
+| [Metadata](#metadata)   | ShowPeopleAge              | boolean                             | false                                          | Appends each person's age at the time the photo was taken in brackets, e.g. "John (7)". Requires ShowPeopleDesc and a birthday in immich. |
 | [Metadata](#metadata)   | ShowAlbumName              | boolean                             | true                                           | Displays a comma separated list of names of all the albums for an image.                                                              |
 | [Metadata](#metadata)   | ShowImageLocation          | boolean                             | true                                           | Displays the location of the current image.                                                                                           |
 | [Metadata](#metadata)   | ImageLocationFormat        | string                              | City,State,Country                             |                                                                                                                                       |

immichFrame.Web/src/lib/components/elements/asset-component.svelte

@@ -23,6 +23,7 @@
 		showPhotoDate?: boolean;
 		showImageDesc?: boolean;
 		showPeopleDesc?: boolean;
+		showPeopleAge?: boolean;
 		showTagsDesc?: boolean;
 		showAlbumName?: boolean;
 		imageFill?: boolean;
@@ -46,6 +47,7 @@
 		showPhotoDate = true,
 		showImageDesc = true,
 		showPeopleDesc = true,
+		showPeopleAge = false,
 		showTagsDesc = true,
 		showAlbumName = true,
 		imageFill = false,
@@ -112,6 +114,7 @@
 							{showPhotoDate}
 							{showImageDesc}
 							{showPeopleDesc}
+							{showPeopleAge}
 							{showTagsDesc}
 							{showAlbumName}
 							{imageFill}
@@ -134,6 +137,7 @@
 							{showPhotoDate}
 							{showImageDesc}
 							{showPeopleDesc}
+							{showPeopleAge}
 							{showTagsDesc}
 							{showAlbumName}
 							{imageFill}
@@ -158,6 +162,7 @@
 						{showPhotoDate}
 						{showImageDesc}
 						{showPeopleDesc}
+						{showPeopleAge}
 						{showTagsDesc}
 						{showAlbumName}
 						{imageFill}

immichFrame.Web/src/lib/components/elements/asset-info.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { type AlbumResponseDto, type AssetResponseDto } from '$lib/immichFrameApi';
-	import { format } from 'date-fns';
+	import { type AlbumResponseDto, type AssetResponseDto, type PersonResponseDto } from '$lib/immichFrameApi';
+	import { differenceInYears, format } from 'date-fns';
 	import * as locale from 'date-fns/locale';
 	import { configStore } from '$lib/stores/config.store';
 	import Icon from './icon.svelte';
@@ -13,6 +13,7 @@
 		showPhotoDate: boolean;
 		showImageDesc: boolean;
 		showPeopleDesc: boolean;
+		showPeopleAge: boolean;
 		showTagsDesc: boolean;
 		showAlbumName: boolean;
 		split: boolean;
@@ -25,6 +26,7 @@
 		showPhotoDate,
 		showImageDesc,
 		showPeopleDesc,
+		showPeopleAge,
 		showTagsDesc,
 		showAlbumName,
 		split,
@@ -68,6 +70,17 @@
 	);
 	let availablePeople = $derived(asset.people?.filter((x) => x.name));
 	let availableTags = $derived(asset.tags?.filter((x) => x.name));
+
+	// Person's name, with their age at the time the photo was taken in brackets when ShowPeopleAge is on and a birthday is set, e.g. "John (7)"
+	function formatPerson(person: PersonResponseDto): string {
+		if (showPeopleAge && person.birthDate && assetDate) {
+			const age = differenceInYears(new Date(assetDate), new Date(person.birthDate));
+			if (age >= 0) {
+				return `${person.name} (${age})`;
+			}
+		}
+		return person.name;
+	}
 </script>
 
 {#if showPhotoDate || showLocation || showImageDesc || showPeopleDesc || showTagsDesc || showAlbumName}
@@ -99,7 +112,7 @@
 		{#if showPeopleDesc && availablePeople && availablePeople.length > 0}
 			<p id="peopledescription" class="info-item">
 				<Icon path={mdiAccount} />
-				<span class="info-text" class:short-text={split}>{availablePeople.map((x) => x.name).join(', ')}</span>
+				<span class="info-text" class:short-text={split}>{availablePeople.map(formatPerson).join(', ')}</span>
 			</p>
 		{/if}
 		{#if showTagsDesc && availableTags && availableTags.length > 0}

immichFrame.Web/src/lib/components/elements/asset.svelte

@@ -22,6 +22,7 @@
 		showPhotoDate: boolean;
 		showImageDesc: boolean;
 		showPeopleDesc: boolean;
+		showPeopleAge: boolean;
 		showTagsDesc: boolean;
 		showAlbumName: boolean;
 		imageFill: boolean;
@@ -42,6 +43,7 @@
 		showPhotoDate,
 		showImageDesc,
 		showPeopleDesc,
+		showPeopleAge,
 		showTagsDesc,
 		showAlbumName,
 		imageFill,
@@ -289,6 +291,7 @@
 	{showPhotoDate}
 	{showImageDesc}
 	{showPeopleDesc}
+	{showPeopleAge}
 	{showTagsDesc}
 	{showAlbumName}
 	{split}

immichFrame.Web/src/lib/components/home-page/home-page.svelte

@@ -505,6 +505,7 @@
 				showPhotoDate={$configStore.showPhotoDate}
 				showImageDesc={$configStore.showImageDesc}
 				showPeopleDesc={$configStore.showPeopleDesc}
+				showPeopleAge={$configStore.showPeopleAge}
 				showTagsDesc={$configStore.showTagsDesc}
 				showAlbumName={$configStore.showAlbumName}
 				{...assetsState}

immichFrame.Web/src/lib/immichFrameApi.ts

@@ -212,6 +212,7 @@ export type ClientSettingsDto = {
     photoDateFormat?: string | null;
     showImageDesc?: boolean;
     showPeopleDesc?: boolean;
+    showPeopleAge?: boolean;
     showTagsDesc?: boolean;
     showAlbumName?: boolean;
     showImageLocation?: boolean;

openApi/swagger.json

@@ -1037,6 +1037,9 @@
           "showPeopleDesc": {
             "type": "boolean"
           },
+          "showPeopleAge": {
+            "type": "boolean"
+          },
           "showTagsDesc": {
             "type": "boolean"
           },