Images grid in justified rows too: tiles in each picture's own shape (the tile thumbnail is no longer a square crop: 360px tall, its middle cut to 1:2–2:1; vmedia pic.webp?s=row for hosts without CORS; tile cache v2)

Co-Authored-By: Claude Opus 5.5 <[email protected]>

1 files changed, 12 insertions, 7 deletions

diff --git a/src/image-thumbnails.js b/src/image-thumbnails.js
index ffac4b9..2686dac 100644
--- a/src/image-thumbnails.js
+++ b/src/image-thumbnails.js
@@ -14,16 +14,21 @@ function thumbnailWorker() {
       const result = { width: bitmap.width, height: bitmap.height, media: null, tile: null };
       // GIFs must keep animating; a canvas copy would freeze their first frame.
       if (!/gif/i.test(blob.type)) {
+        // The grid's tile: the picture in its own shape (justified rows),
+        // tileSize tall, its middle cut to between 1:2 and 2:1 — the most a
+        // tile stretches either way.
         if (tileSize) {
-          const side = Math.min(bitmap.width, bitmap.height), px = Math.min(tileSize, side);
-          let square;
+          const W = bitmap.width, H = bitmap.height;
+          const cw = Math.min(W, H * 2), ch = Math.min(H, W * 2);
+          const th = Math.min(tileSize, ch), tw = Math.max(1, Math.round(th * cw / ch));
+          let cut;
           try {
-            square = await createImageBitmap(bitmap, (bitmap.width - side) / 2, (bitmap.height - side) / 2, side, side,
-              { resizeWidth: px, resizeHeight: px, resizeQuality: 'high' });
-            const canvas = new OffscreenCanvas(px, px);
-            canvas.getContext('2d').drawImage(square, 0, 0);
+            cut = await createImageBitmap(bitmap, (W - cw) / 2, (H - ch) / 2, cw, ch,
+              { resizeWidth: tw, resizeHeight: th, resizeQuality: 'high' });
+            const canvas = new OffscreenCanvas(tw, th);
+            canvas.getContext('2d').drawImage(cut, 0, 0);
             result.tile = await encode(canvas, 0.8);
-          } catch {} finally { square?.close(); }
+          } catch {} finally { cut?.close(); }
         }
         if (width && bitmap.width > width * 1.25) {
           try {