Changeset 2eca083 in Klonkt for src/views/partials

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/partials/post-tile.ejs (modified) (1 diff)

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