Changeset f79a471 in Klonkt

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

Files:

• middleware/render.js (modified) (1 diff)
• server.js (modified) (2 diffs)
• services/ThumbnailService.js (added)
• views/partials/post-card.ejs (modified) (1 diff)
• views/partials/post-tile.ejs (modified) (1 diff)

src/middleware/render.js

@@ -160 +160 @@
     formatDate,
     formatDateTime,
+    // Rewrite a local /media/<file> cover to its on-demand downscaled thumbnail
+    // (crisp grid/list images). External URLs + already-thumb URLs pass through.
+    thumb: (url, w) => (typeof url === 'string' && url.startsWith('/media/') && !url.startsWith('/media/thumb/'))
+      ? `/media/thumb/${w || 480}/${url.slice(7)}`
+      : url,
     pageTitle: data.pageTitle || (data.site && data.site.title) || 'Klonkt',
     appVersion: APP_VERSION,

src/server.js

@@ -20 +20 @@
 import { SqliteSessionStore } from './services/SqliteSessionStore.js';
 import { ensurePrimarySite } from './services/ensurePrimarySite.js';
+import { getThumbnail, THUMB_SIZES } from './services/ThumbnailService.js';
 import { resolveSite, loadAudioTracks, loadTheme } from './middleware/site.js';
 import { isViewer } from './middleware/auth.js';
@@ -213 +214 @@
 
 app.use('/assets', express.static(path.join(__dirname, 'assets'), { maxAge: isDev ? 0 : '1y' }));
+
+// On-demand cover thumbnails: /media/thumb/<w>/<path> → a small lanczos-downscaled WebP
+// (cached on disk), so the browser doesn't jaggily shrink a high-res cover for the grid/
+// list. Mounted BEFORE the /media static so it catches the thumb path first.
+app.get('/media/thumb/:w/*', async (req, res) => {
+  const w = parseInt(req.params.w, 10);
+  const rel = req.params[0] || '';
+  if (!THUMB_SIZES.has(w)) return res.status(400).end();
+  let file = null;
+  try { file = await getThumbnail(rel, w); } catch { /* fall through to original */ }
+  if (!file) {
+    // Generation unavailable/failed → serve the original instead of 404'ing.
+    return res.redirect(302, '/media/' + rel.split('/').map(encodeURIComponent).join('/'));
+  }
+  res.setHeader('Cross-Origin-Resource-Policy', 'cross-origin');
+  res.setHeader('Cache-Control', isDev ? 'no-cache' : 'public, max-age=31536000, immutable');
+  res.type('webp');
+  res.sendFile(file);
+});
+
 app.use('/media', express.static(process.env.MEDIA_PATH || './storage/media', {
   // Public media (post covers, avatars) must be cross-origin embeddable by other

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) { %>