Show the NPC portrait on the detail page

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

@@ -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';
+    }
 }

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 class="d-flex justify-content-between align-items-start mb-3 gap-3">
-        <div>
+        <div class="d-flex gap-3">
-            <a href="{{ path('app_npcs') }}" class="text-decoration-none small">&larr; All NPC's</a>
+            <img src="{{ asset(npc.portraitPath) }}" alt="Portrait of {{ npc.name }}"
-            <h1 class="h3 mb-0">{{ npc.name }}</h1>
+                 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>