Recommendation

Port the carousel code to Minerva using a hook-based approach.

• Cleaner separation of concerns: MultimediaViewer (MMV) handles thumbnail discovery, exclusion logic, and detail view, while the skin maintains control over the presentation. Narrowing the scope to Minerva skin ensures the carousel only loads when Minerva loads. This reduces the risks of regressions and bugs in other skins and for desktop users.
• Hook-based approach: MMV fires mmv.thumbnail.discovered hook and then the skin listens for it. The carousel appears once the skin receives the discovered thumbnails. This provides the flexibility to add a carousel to Minerva and Vector, and allows skins to manage their own presentation.

Summary

Thumbnails flow from MMV bootstrap via a new mmv.thumbnail.discovered hook. The server injects a placeholder unconditionally for Main namespace (NS_MAIN), Minerva, and the feature flag, with graceful client-side collapse. Feature gating uses a single $wgMinervaCarousel config variable. Carousel taps navigate to MMV's existing #/media/File:Filename hash route.

Technical implementation

• In Minerva skin:
  • Add a new carousel module called skins.minerva.imageCarousel
  • Register the new carousel module and config variable ($wgMinervaCarousel) in skin.json
  • Inject placeholder/skeleton UI in SkinMinerva.php
  • Add carousel container in skin.mustache.
• Port Carousel.vue and CarouselItem.vue from ReaderExperiments to Minerva.
• Add and document the new mmv.thumbnail.discovered hook in MMV (patch)
• Port excludedImageSelectors.js (additional exclusions beyond isAllowedThumb()) from ReaderExperiments to MMV. This extends MMV's exclusion logic.
• Set up Vue 3 dependency in Minerva.

Delivery estimation

• 2 sprints for code review, design review, accessibility audit, and QA

Other

• Further details found in spike document: https://docs.google.com/document/d/1z5-BXNUXZu3AZ1sNErziFvefJPSjrXfe40kxYpxxTfA/edit?tab=t.0#heading=h.glznqc2yzi79
• Server-side injection: T407850: Image Browsing: Ensure carousel displays without FOUC or layout shift
• Potentially run a carousel experiment in the Vector skin.

Next steps

• Coordinate with Reader Experience Team
• Record final decision

Revised Recommendation

Port the carousel code to MultimediaViewer, considering that we are blocked on other potential options.

Other options:

• Reader Experience addressed concerns about this feature in Minerva, including: maintenance concerns; risk of impacting other wiki projects like WikiVoyage that deploy Minerva.
• Reader Growth does not want this feature in MobileFrontend, and is planning to retire the mobile media viewer in MobileFrontend.
• Setting up a new repository is a lengthy process.

Implementation

With the beta viewer (T417675) establishing mobile-only patterns in MMV, the carousel fits naturally as a second mobile module alongside mmv.ui.beta. All image-related code lives in one extension: discovery (mmv.bootstrap), carousel (new mmv.carousel), and detail view (mmv.ui.beta).

Server-side rendered: PHP renders the carousel in HTML (markup generated by PHP or mustache template). This way we minimize layout shifts and improve user experience, especially on slow connections. Note: Client side (mmv.bootstrap) serves the thumbnails, but we need them sooner (before JavaScript runs).

Extend the beta viewer pattern to load the bootstrap on mobile when the beta viewer or carousel is enabled.

A JavaScript click interceptor handles clicks on carousel images and navigates them to the MMV hash route.

Delivery estimation

2 sprints for code review, design review, accessibility audit, and QA

Other

• Further details found in spike document: https://docs.google.com/document/d/1z5-BXNUXZu3AZ1sNErziFvefJPSjrXfe40kxYpxxTfA/edit?tab=t.0#heading=h.glznqc2yzi79
• Server-side injection: T407850: Image Browsing: Ensure carousel displays without FOUC or layout shift
• Potentially run a carousel experiment in the Vector skin.

Next steps

• Create follow-up tasks T419740