Changeset 2eca083 in Klonkt for src/views/pages/post.ejs

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

File:

• src/views/pages/post.ejs (modified) (2 diffs)

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,