Changeset 2eca083 in Klonkt

Timestamp:

06/28/2026 11:05:58 AM (2 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

69a10e7

Parents:

73cffc3

Message:

fix(images): render grid + related covers as <img> (no jagged downscaling)

High-res line-art covers went jagged when shrunk into the small grid tiles / related cards
because they were CSS background-images (lower-quality GPU downscaling, worse on the
transform:scale(0.98) hover layer). Switched both to a real <img object-fit:cover>, which
browsers downsample with the high-quality image pipeline.

• views/partials/post-tile.ejs — grid cover = <img class=grid-tile-img>
• views/pages/post.ejs — related cover = <img class=post-related-img>
• assets/css/style.css — .grid-tile-img (absolute, object-fit:cover)
• views/shell.ejs — style.css cache buster v58

Location:

src

Files:

• assets/css/style.css (modified) (1 diff)
• views/pages/post.ejs (modified) (2 diffs)
• views/partials/post-tile.ejs (modified) (1 diff)
• views/shell.ejs (modified) (1 diff)

src/assets/css/style.css

@@ -2381 +2381 @@
 .post-list-cover img,
 .grid-tile:not(.grid-tile-gradient) { background-color: #fff; }
+/* Cover as a real <img> (not background-image): browsers downsample <img> with the
+   high-quality image pipeline, so high-res line-art covers don't go jagged when shrunk. */
+.grid-tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
 .grid-tile:hover { transform: scale(0.98); }
 .grid-tile-overlay {

src/views/pages/post.ejs

@@ -177 +177 @@
                hx-push-url="/<%= rp.slug %>" hx-indicator="#pcms-loading"<% } %>>
               <% if (rp.cover_image_url) { %>
-                <span class="post-related-cover<%= rp.nsfw ? ' nsfw-media' : '' %>"
-                      style="background-image: url('<%= rp.cover_image_url %>')"
-                      aria-hidden="true"><% if (rp.nsfw) { %><span class="nsfw-veil"><span class="nsfw-veil-label">🔞 <%= rp.content_warning || t('post.nsfw_warning') %></span><span class="nsfw-veil-btn"><%= t('post.nsfw_show') %></span></span><% } %></span>
+                <span class="post-related-cover<%= rp.nsfw ? ' nsfw-media' : '' %>" aria-hidden="true"><img class="post-related-img" src="<%= rp.cover_image_url %>" alt="" loading="lazy" decoding="async"><% if (rp.nsfw) { %><span class="nsfw-veil"><span class="nsfw-veil-label">🔞 <%= rp.content_warning || t('post.nsfw_warning') %></span><span class="nsfw-veil-btn"><%= t('post.nsfw_show') %></span></span><% } %></span>
               <% } else { %>
                 <span class="post-related-cover post-related-cover--empty<%= rp.nsfw ? ' nsfw-media' : '' %>" aria-hidden="true"><% if (rp.nsfw) { %><span class="nsfw-veil"><span class="nsfw-veil-label">🔞 <%= rp.content_warning || t('post.nsfw_warning') %></span><span class="nsfw-veil-btn"><%= t('post.nsfw_show') %></span></span><% } %></span>
@@ -450 +448 @@
 .post-related-cover {
   display: block;
+  position: relative;
+  overflow: hidden;
   aspect-ratio: 16 / 10;
   background: var(--paper-2) center/cover no-repeat;
 }
+.post-related-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
 .post-related-cover--empty {
   background-image: linear-gradient(135deg,

src/views/partials/post-tile.ejs

@@ -16 +16 @@
 <a class="grid-tile<%= _hasCover ? '' : ' grid-tile-gradient' %><%= (_isPinned || _isBoost) ? ' is-pinned' : '' %><%= post.nsfw ? ' nsfw-media' : '' %>"
    href="<%= _href %>"
-   <% if (_hasCover) { %>style="background-image: url('<%= post.cover_image_url %>'); --tile-hue: <%= _tileHue %>;"<% } else { %>style="--tile-hue: <%= _tileHue %>;"<% } %>
+   style="--tile-hue: <%= _tileHue %>;"
    <% 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 (_typeLabel) { %>

src/views/shell.ejs

@@ -198 +198 @@
 
 <!-- v9 stylesheet (full palette system) -->
-<link rel="stylesheet" href="/assets/css/style.css?v=57">
+<link rel="stylesheet" href="/assets/css/style.css?v=58">
 <script>
 /* iOS safe-area, built by hand. env(safe-area-inset-top) resolves to 0 on this iOS in