When the image carousel is present on an article page, it should display without a Flash of Unstyled Content (FOUC) or layout shift. When the carousel is not present (e.g., articles with fewer than 3 images), no space should be reserved for it.
Context
The Image Browsing prototype addressed this partially (see T405382), but the fix displaced the problem: pages loaded with space reserved for a carousel, and JS would collapse that space if no carousel was needed. This resulted in layout shift on pages without a carousel.
As we scale this feature to production (T410786), we need to solve this properly in the new codebase.
Requirements
- Pages that will show a carousel should reserve space for it before JS runs
- Pages that will not show a carousel should never reserve space for it
- The determination of whether an article has enough qualifying images for a carousel should happen server-side
Open questions
- Where will the carousel code live? (Minerva, MMV, or some combination — to be determined in a separate spike)
- How much of the image extraction and filtering logic needs to move to PHP to support server-side decisions?
- Is it acceptable to simply hold a space for the carousel when we know it's going to show up (allowing it render on the client), or do we need a complete server-side solution (all carousel thumbnails properly displayed before JS loads)? Going that route may entail significantly more work.