Build a production-ready horizontal image carousel component that displays at the top of mobile article pages, giving readers a visual entry point to browse article images. Tapping a carousel image opens the MMV beta viewer detail view (T417678).
Context
The Image Browsing experiment tested a carousel at the top of article pages and saw strong engagement (7-8% CTR). The prototype implementation lived in ReaderExperiments. For production, the carousel needs to be rebuilt in a permanent codebase.
Architecture (proposed)
The carousel is a page-level, mobile-only presentation element. It connects to the MMV detail view via hash navigation (#/media/File:...) when a user taps an image. This feature should probably live in Minerva (since it is presentational and only intended for mobile users right now); alternatively it could potentially be its own module in MMV. We should resist the temptation to put this into MobileFrontend (we want to shrink that codebase, not grow it).
An initial architectural proposal (to be validated in a spike) might look like this:
- Server-side: Minerva injects a placeholder container of the correct dimensions, based on a lightweight check of the page content. This avoids layout shift without requiring thumbnail discovery logic to move to PHP.
- Client-side: MMV's bootstrap runs its existing thumbnail discovery and exposes the results (e.g. via a client-side hook). Minerva's carousel component listens, receives the thumbnails, and renders them into the placeholder.
This keeps all thumbnail guessing logic in JS — consistent with how both legacy and beta MMV already work — while avoiding layout shift and (hopefully) minimizing FOUC. The spike (below) should evaluate this approach and confirm it's viable.
Subtasks
- [Spike] Determine carousel architecture — Evaluate where the carousel code should live and how data flows between components.
- Port carousel component — Rebuild the horizontal thumbnail carousel from the prototype in the chosen codebase. Port image extraction and filtering logic from ReaderExperiments' thumbExtractor.js and excludedImageSelectors.js.
- Potential opt-out mechanisms
- Logged-in reader opt-out — Add a preference in Settings to disable the carousel for logged-in users.
- Page-level opt-out — Provide a mechanism for communities/editors to opt specific articles out of the carousel. (Open question: Community Configuration vs. magic word vs. body class — see T410786.)
Out of scope
- Detail view functionality (T417678)
- Desktop