Changeset f79a471 in Klonkt for src/views/partials

Timestamp:

06/28/2026 04:32:37 PM (2 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

74c5abc

Parents:

1ff0043

git-author:

Robin Genis <roboburr@…> (06/28/2026 04:31:09 PM)

git-committer:

Robin Genis <roboburr@…> (06/28/2026 04:32:37 PM)

Message:

feat(images): on-demand lanczos cover thumbnails for crisp grid/list

High-res covers (esp. line-art) looked jagged because the browser downscaled them to
the grid/list size. Downscale server-side with ffmpeg lanczos to a small cached WebP
instead. No re-upload/backfill: reads the existing original lazily on first request.

• services/ThumbnailService.js — ffmpeg lanczos downscale -> WebP, disk-cached
• server.js — GET /media/thumb/:w/* route (whitelist 320/480/640) before the /media static
• middleware/render.js — thumb(url,w) helper (rewrites local /media covers)
• views/partials/post-tile.ejs (grid 480) + post-card.ejs (list 320)

Location:

src/views/partials

Files:

• post-card.ejs (modified) (1 diff)
• post-tile.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="<%= post.cover_image_url %>" alt="" loading="lazy" decoding="async">
+      <img src="<%= thumb(post.cover_image_url, 320) %>" 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>

src/views/partials/post-tile.ejs

@@ -19 +19 @@
    <% 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"<% } %>>
 
-  <% if (_hasCover) { %><img class="grid-tile-img" src="<%= post.cover_image_url %>" alt="" loading="lazy" decoding="async"><% } %>
+  <% if (_hasCover) { %><img class="grid-tile-img" src="<%= thumb(post.cover_image_url, 480) %>" alt="" loading="lazy" decoding="async"><% } %>
 
   <% if (_typeLabel) { %>