Changeset 99989f9 in Klonkt

Timestamp:

06/28/2026 04:57:19 PM (2 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

201ec06

Parents:

74c5abc

Message:

feat(images): route all remaining avatars through avatar() (downscaled)

Wrap every avatar/profile-photo <img> src in avatar(): feed/comment/follow + nav, profile
header/sheet/bottom-tab, account, EPK hero, admin user list, site-edit preview. Local avatars
go through the thumb route, remote ones through the signed proxy. Covers (thumb()) untouched.

Location:

src/views

Files:

• pages/account.ejs (modified) (1 diff)
• pages/admin-site-edit.ejs (modified) (1 diff)
• pages/admin-users.ejs (modified) (1 diff)
• pages/epk.ejs (modified) (1 diff)
• pages/user.ejs (modified) (1 diff)
• partials/bottom-tab.ejs (modified) (1 diff)
• partials/profile-header.ejs (modified) (2 diffs)
• partials/profile-sheet.ejs (modified) (1 diff)
• partials/topnav.ejs (modified) (2 diffs)

src/views/pages/account.ejs

@@ -30 +30 @@
         <% var _av = (typeof siteAvatar !== 'undefined' ? siteAvatar : null); %>
         <% if (_av) { %>
-          <img src="<%= _av %>" alt="">
+          <img src="<%= avatar(_av, 128) %>" alt="">
         <% } else { %>
           <span><%= account.username.charAt(0).toUpperCase() %></span>

src/views/pages/admin-site-edit.ejs

@@ -50 +50 @@
         <div class="photo-picker" id="photo-picker">
           <div class="photo-thumb" id="photo-thumb" <%= site.profile_photo ? '' : 'data-empty' %>>
-            <img id="photo-preview" src="<%= site.profile_photo || '' %>" alt="" <%= site.profile_photo ? '' : 'hidden' %>>
+            <img id="photo-preview" src="<%= avatar(site.profile_photo || '', 128) %>" alt="" <%= site.profile_photo ? '' : 'hidden' %>>
             <span class="photo-empty" aria-hidden="true">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>

src/views/pages/admin-users.ejs

@@ -42 +42 @@
           <div class="ax-user-id">
             <% if (u.avatar_url) { %>
-              <img class="ax-avatar" src="<%= u.avatar_url %>" alt="">
+              <img class="ax-avatar" src="<%= avatar(u.avatar_url, 128) %>" alt="">
             <% } else { %>
               <span class="ax-avatar ax-avatar-empty"><%= u.username.charAt(0).toUpperCase() %></span>

src/views/pages/epk.ejs

@@ -9 +9 @@
 <section class="epk" <%= _accent ? ('style="--epk-accent:' + _accent + '"') : '' %>>
   <header class="epk-hero">
-    <% if (_photo) { %><div class="epk-photo"><img src="<%= _photo %>" alt="<%= site.title %>"></div><% } %>
+    <% if (_photo) { %><div class="epk-photo"><img src="<%= avatar(_photo, 320) %>" alt="<%= site.title %>"></div><% } %>
     <div class="epk-hero-text">
       <div class="epk-kicker"><%= t('epk.kicker') %><% if (typeof user !== 'undefined' && user && user.role === 'god') { %> <a class="epk-edit-link" href="/admin/epk">✎ <%= t('epk.edit') %></a><% } %></div>

src/views/pages/user.ejs

@@ -3 +3 @@
     <div class="user-avatar-large">
       <% if (author.avatar_url) { %>
-        <img src="<%= author.avatar_url %>" alt="">
+        <img src="<%= avatar(author.avatar_url, 320) %>" alt="">
       <% } else { %>
         <span><%= author.username.charAt(0).toUpperCase() %></span>

src/views/partials/bottom-tab.ejs

@@ -85 +85 @@
             aria-label="Profiel menu" aria-haspopup="dialog">
       <% if (user.avatar_url) { %>
-        <img class="bottom-tab-avatar bottom-tab-avatar-img" src="<%= user.avatar_url %>" alt="">
+        <img class="bottom-tab-avatar bottom-tab-avatar-img" src="<%= avatar(user.avatar_url, 128) %>" alt="">
       <% } else { %>
         <span class="bottom-tab-avatar"><%= user.username.charAt(0).toUpperCase() %></span>

src/views/partials/profile-header.ejs

@@ -44 +44 @@
     <button type="button" class="profile-photo" data-pf-summary aria-label="<%= _displayName || 'Profile' %>">
       <% if (_avatarUrl) { %>
-        <img src="<%= _avatarUrl %>" alt="">
+        <img src="<%= avatar(_avatarUrl, 320) %>" alt="">
       <% } else if (site.enable_audio_player && (typeof audioEnabled === 'undefined' || audioEnabled)) { %>
         <span class="profile-photo-fallback profile-photo-fallback--music" aria-hidden="true">
@@ -112 +112 @@
     <button type="button" class="pf-summary-close" aria-label="Sluiten">&times;</button>
     <% if (_avatarUrl) { %>
-      <img class="pf-summary-photo" src="<%= _avatarUrl %>" alt="">
+      <img class="pf-summary-photo" src="<%= avatar(_avatarUrl, 128) %>" alt="">
     <% } else { %>
       <div class="pf-summary-photo pf-summary-photo--ph" aria-hidden="true">

src/views/partials/profile-sheet.ejs

@@ -37 +37 @@
     <div class="profile-sheet-header">
       <% if (user.avatar_url) { %>
-        <img class="profile-sheet-avatar profile-sheet-avatar-img" src="<%= user.avatar_url %>" alt="" aria-hidden="true">
+        <img class="profile-sheet-avatar profile-sheet-avatar-img" src="<%= avatar(user.avatar_url, 128) %>" alt="" aria-hidden="true">
       <% } else { %>
         <div class="profile-sheet-avatar" aria-hidden="true"><%= user.username.charAt(0).toUpperCase() %></div>

src/views/partials/topnav.ejs

@@ -113 +113 @@
           <summary class="nav-btn user-toggle" aria-label="Gebruikersmenu">
             <% if (user.avatar_url) { %>
-              <img class="user-avatar user-avatar-img" src="<%= user.avatar_url %>" alt="">
+              <img class="user-avatar user-avatar-img" src="<%= avatar(user.avatar_url, 128) %>" alt="">
             <% } else { %>
               <span class="user-avatar"><%= user.username.charAt(0).toUpperCase() %></span>
@@ -121 +121 @@
             <div class="user-dropdown-header">
               <% if (user.avatar_url) { %>
-                <img class="udh-avatar" src="<%= user.avatar_url %>" alt="">
+                <img class="udh-avatar" src="<%= avatar(user.avatar_url, 128) %>" alt="">
               <% } else { %>
                 <span class="udh-avatar udh-avatar-fallback"><%= user.username.charAt(0).toUpperCase() %></span>