Changeset 93b147d in Klonkt

Timestamp:

06/29/2026 11:12:32 PM (2 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

328d837

Parents:

b607d4d

Message:

fix(feed): serve full-resolution covers on mobile (responsive srcset)

The timeline card cover used a fixed 256px thumbnail — right for the 120px desktop
thumb, but the cover is full-width (100vw) on mobile, so a ~430px phone at 3x DPR
upscaled the 256px image ~5x → blurry (most visible in the PWA).

• src/views/partials/post-card.ejs — cover <img> now uses srcset (320/640/1280w) + sizes "(min-width:768px) 120px, 100vw", so the browser picks ~1280 for the full-width mobile cover and ~320 for the small desktop thumb (no over-fetch)

Co-Authored-By: Claude <noreply@…>

File:

• src/views/partials/post-card.ejs (modified) (1 diff)

src/views/partials/post-card.ejs

@@ -49 +49 @@
        <% if (_ext) { %>target="_blank" rel="noopener"<% } else { %>hx-get="<%= _href %>?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="<%= _href %>" hx-indicator="#pcms-loading"<% } %>
        aria-label="<%= post.title || '(zonder titel)' %>" tabindex="-1">
-      <img src="<%= thumb(post.cover_image_url, 256) %>" alt="" loading="lazy" decoding="async">
+      <img src="<%= thumb(post.cover_image_url, 480) %>"
+           srcset="<%= thumb(post.cover_image_url, 320) %> 320w, <%= thumb(post.cover_image_url, 640) %> 640w, <%= thumb(post.cover_image_url, 1280) %> 1280w"
+           sizes="(min-width: 768px) 120px, 100vw"
+           alt="" loading="lazy" decoding="async">
       <% if (post.nsfw) { %><span class="nsfw-veil"><span class="nsfw-veil-label">🔞 <%= post.content_warning || t('post.nsfw_warning') %></span><span class="nsfw-veil-btn"><%= t('post.nsfw_show') %></span></span><% } %>
     </a>