add user's profile pic to their profile page

assets/styles/app.css

@@ -450,6 +450,52 @@ footer a {
     width: 100%;
 }
 
+/* Author profile (/p/npub…): NIP-01 uses `picture`; large circular crop */
+.author-profile {
+    max-width: 40rem;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.author-profile__avatar {
+    position: relative;
+    width: 8rem;
+    height: 8rem;
+    margin: 0 auto 1rem;
+    border-radius: 50%;
+    overflow: hidden;
+    box-shadow: 0 0 0 2px var(--color-border);
+}
+
+.author-profile__avatar > img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    max-width: none;
+    object-fit: cover;
+    object-position: center;
+    display: block;
+}
+
+.author-profile__avatar--compact {
+    width: 4rem;
+    height: 4rem;
+    margin-bottom: 0.75rem;
+}
+
+.author-profile__title {
+    margin-top: 0.25em;
+}
+
+.author-profile__about {
+    text-align: left;
+}
+
+.author-profile__divider {
+    margin: 2rem 0;
+}
+
 .badge {
     background-color: var(--color-primary);
     color: var(--color-bg);

templates/event/index.html.twig

@@ -7,8 +7,16 @@
     <div class="event-container">
         <div class="event-header">
             {% if author %}
-                {% if author.image is defined %}
-                    <img src="{{ author.image }}" class="avatar" alt="{{ author.name }}" onerror="this.style.display = 'none'" />
+                {% set author_pic = null %}
+                {% if author.picture is defined and author.picture %}
+                    {% set author_pic = author.picture %}
+                {% elseif author.image is defined and author.image %}
+                    {% set author_pic = author.image %}
+                {% endif %}
+                {% if author_pic %}
+                    <div class="author-profile__avatar author-profile__avatar--compact">
+                        <img src="{{ author_pic }}" alt="" loading="lazy" decoding="async" onerror="this.parentElement.remove()" />
+                    </div>
                 {% endif %}
 
                 <twig:Molecules:UserFromNpub ident="{{ event.pubkey }}" />

templates/pages/author.html.twig

@@ -1,27 +1,32 @@
 {% extends 'base.html.twig' %}
 
 {% block body %}
-
-    {% if author.image is defined %}
-        <img src="{{ author.image }}" class="avatar" alt="{{ author.name }}" onerror="this.style.display = 'none'" />
+    {% set author_pic = null %}
+    {% if author.picture is defined and author.picture %}
+        {% set author_pic = author.picture %}
+    {% elseif author.image is defined and author.image %}
+        {% set author_pic = author.image %}
     {% endif %}
+    {% set author_label = author.display_name|default(author.name|default(npub|shortenNpub)) %}
 
-    <h1><twig:Atoms:NameOrNpub :author="author" :npub="npub"></twig:Atoms:NameOrNpub></h1>
-    <div>
-        {% if author.about is defined %}
-            {{ author.about|markdown_to_html|mentionify|linkify  }}
+    <div class="author-profile">
+        {% if author_pic %}
+            <div class="author-profile__avatar">
+                <img src="{{ author_pic }}" alt="{{ author_label }}" loading="lazy" decoding="async" onerror="this.parentElement.remove()" />
+            </div>
         {% endif %}
-    </div>
 
-    <hr />
+        <h1 class="author-profile__title"><twig:Atoms:NameOrNpub :author="author" :npub="npub"></twig:Atoms:NameOrNpub></h1>
+        <div class="author-profile__about">
+            {% if author.about is defined %}
+                {{ author.about|markdown_to_html|mentionify|linkify  }}
+            {% endif %}
+        </div>
 
-{#    {% if relays|length > 0 %}#}
-{#        {% for rel in relays %}#}
-{#            <p>{{ rel }}</p>#}
-{#        {% endfor %}#}
-{#    {% endif %}#}
+        <hr class="author-profile__divider" />
 
-    <twig:Organisms:CardList :list="articles" class="article-list"></twig:Organisms:CardList>
+        <twig:Organisms:CardList :list="articles" class="article-list"></twig:Organisms:CardList>
+    </div>
 {% endblock %}
 
 {% block aside %}