From 71b5cb6633f8b5ab403970aa0c4fbcdf4f830b96 Mon Sep 17 00:00:00 2001
From: Frank <frank.van.den.berg@eleaf.com>
Date: Sun, 6 Sep 2026 16:10:00 +0200
Subject: [PATCH] Show the NPC portrait on the detail page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Npc::getPortraitPath() maps the name to image/npc-pictures/<NameNoSpaces>.png;
the edit page renders it beside the heading (with family · occupation), and
drops the <img> via onerror when a portrait is missing.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/Entity/Npc.php           | 10 ++++++++++
 templates/npc/edit.html.twig | 15 +++++++++++----
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/Entity/Npc.php b/src/Entity/Npc.php
index 4f89eb4..97fecf3 100644
--- a/src/Entity/Npc.php
+++ b/src/Entity/Npc.php
@@ -227,4 +227,14 @@ class Npc
     {
         return $this->updatedAt;
     }
+
+    /**
+     * AssetMapper logical path of this NPC's portrait, e.g.
+     * "image/npc-pictures/GarrickVoss.png". The file may not exist for
+     * NPCs added after the portrait sets were generated.
+     */
+    public function getPortraitPath(): string
+    {
+        return 'image/npc-pictures/'.str_replace(' ', '', $this->name).'.png';
+    }
 }
diff --git a/templates/npc/edit.html.twig b/templates/npc/edit.html.twig
index 9ea6420..b11d82d 100644
--- a/templates/npc/edit.html.twig
+++ b/templates/npc/edit.html.twig
@@ -3,10 +3,17 @@
 {% block title %}{{ npc.name }} · NPC's · dmtools{% endblock %}
 
 {% block body %}
-    <div class="d-flex justify-content-between align-items-center mb-3">
-        <div>
-            <a href="{{ path('app_npcs') }}" class="text-decoration-none small">&larr; All NPC's</a>
-            <h1 class="h3 mb-0">{{ npc.name }}</h1>
+    <div class="d-flex justify-content-between align-items-start mb-3 gap-3">
+        <div class="d-flex gap-3">
+            <img src="{{ asset(npc.portraitPath) }}" alt="Portrait of {{ npc.name }}"
+                 width="96" height="120"
+                 class="rounded border object-fit-cover flex-shrink-0"
+                 onerror="this.remove()">
+            <div>
+                <a href="{{ path('app_npcs') }}" class="text-decoration-none small">&larr; All NPC's</a>
+                <h1 class="h3 mb-0">{{ npc.name }}</h1>
+                <span class="text-body-secondary">{{ npc.family }}{% if npc.occupation %} · {{ npc.occupation }}{% endif %}</span>
+            </div>
         </div>
         {% if npc.updatedAt %}
             <span class="text-body-secondary small">Updated {{ npc.updatedAt|date('Y-m-d H:i') }}</span>