From 810ef0fa8b16ab68bb0b33821ff965fec4485ef7 Mon Sep 17 00:00:00 2001
From: Alex Bates <alex@bates64.com>
Date: Thu, 15 Oct 2026 15:45:50 +0100
Subject: [PATCH] serve the mod gallery's images scaled down

---
 src/mods.rs                 | 17 ++++++++++++++---
 tests/test_media_gallery.py |  5 ++---
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/mods.rs b/src/mods.rs
index 46ee161..8e102f6 100644
--- a/src/mods.rs
+++ b/src/mods.rs
@@ -21,6 +21,7 @@ use crate::atproto::lexicon::mod_star::Stars;
 use crate::atproto::lexicon::mod_version::external_host;
 use crate::atproto::lexicon::{ActorProfile, Found, ModListing, ModStar, ModVersion, Record};
 use crate::atproto::pds;
+use crate::blobs;
 use crate::credits::{self, Credited, Row};
 use crate::deliverables;
 use crate::error::AppError;
@@ -639,17 +640,27 @@ fn mod_carousel(did: &Did, listing: &ModListing) -> Markup {
     }
     // A video shows the gallery's first image until it's played.
     let poster = media.iter().find_map(|item| item.image_url(did));
+    // How wide the gallery is drawn: the page's full width on a phone, or two
+    // thirds of `.mod-listing`'s.
+    let sizes = "(max-width: 40rem) 100vw, 42rem";
     html! {
         media-carousel {
-            @for item in media {
+            @for (n, item) in media.iter().enumerate() {
+                // Only the first slide is seen when the page loads.
+                @let first = n == 0;
+                @let loading = (!first).then_some("lazy");
+                @let fetchpriority = first.then_some("high");
                 @if let Some(id) = item.youtube_id() {
                     div data-youtube=(id) role="group" aria-label=(item.alt().unwrap_or("Video")) {
                         @if let Some(url) = &poster {
-                            img src=(url) alt="";
+                            img src=(url) srcset=(blobs::srcset(url)) sizes=(sizes)
+                                loading=[loading] fetchpriority=[fetchpriority] alt="";
                         }
                     }
                 } @else if let Some(url) = item.image_url(did) {
-                    img src=(url) alt=(item.alt().unwrap_or_default());
+                    img src=(url) srcset=(blobs::srcset(&url)) sizes=(sizes)
+                        loading=[loading] fetchpriority=[fetchpriority]
+                        alt=(item.alt().unwrap_or_default());
                 }
             }
         }
diff --git a/tests/test_media_gallery.py b/tests/test_media_gallery.py
index 37ca2e3..bdcc1d1 100644
--- a/tests/test_media_gallery.py
+++ b/tests/test_media_gallery.py
@@ -51,9 +51,8 @@ def test_the_gallerys_first_image_is_the_carousel_and_search_thumbnail(actor: Ac
     expect(carousel).to_be_visible()
     slide = carousel.locator("img").first
     expect(slide).to_be_visible()
-    actor.page.wait_for_function(
-        "el => el.complete && el.naturalWidth > 0", arg=slide.element_handle(), timeout=10000
-    )
+    # Throws if the image can't be loaded and decoded.
+    slide.evaluate("el => el.decode()")
 
     actor.page.goto(f"{actor.app_url}/search?q=master")
     expect(actor.page.locator(".mod-card-image img")).to_be_visible()
-- 
knotmirror 0.0.1