Page MenuHomePhabricator

Bug bash 3
Closed, ResolvedPublic5 Estimated Story Points

Description

Background

Once Bug bash 1 is completed, Justin will do signoff and note any remaining bugs & to-do's in this ticket.

Once we have begun production deployment, this feature can be tested there. In the meantime it should be tested on Beta (except for "Images from other wikis", which won't work on Beta).

Let's pay particular attention to the behavior of the UI on languages other than English.

Issues

  • Update the VTOC image layout to better use the space while accounting for extreme aspect ratios (details) - merged, see T406991#11290484
  • Navbox images getting pulled into Carousel / VTOC (details) (merged)

QA

Refer to https://phabricator.wikimedia.org/T406991#11308408

Event Timeline

Image layout for VTOC (pulled from Bug Bash 1 ticket in previous sprint - T405992)

Ok, if we can fit it in, I'd love to add some basic cropping behaviour to images in the vtoc. We want the images to fill an area that is 300 px tall and as wide as the vtoc caption frame as much as possible.

What happens if an image is really wide?

  • maintain aspect ratio
  • height 300px
  • width = width of the vtoc content at that viewport resolution (roughly 350px max I think. I want to check this but the patchdemo isn't working)
  • center align and crop the sides

Examples:

Screenshot 2025-10-11 at 4.45.44 PM.png (714×1 px, 1 MB)

Blue box is the crop area, and anything outside it will not be shown.

Screenshot 2025-10-11 at 4.52.05 PM.png (806×1 px, 800 KB)

This is how it would actually appear

What happens when images are really tall and skinny?

  • Maintain aspect ratio
  • height 300px
  • image width is whatever is appropriate for the aspect ratio. Without some kind of smart cropping, tall skinny images will look very small and skinny, and I'm ok with that for now because those images are relatively rare copmared to panos and landscape photos.

Example:

Screenshot 2025-10-11 at 4.58.03 PM.png (892×1 px, 222 KB)

Much more common are portrait images which still look fine with their aspect ratio maintained:

Screenshot 2025-10-11 at 4.59.04 PM.png (912×998 px, 495 KB)

@matthiasmullie if you have time to look at this on Monday while everyone else is out, that's great. If not, no worries. We can discuss when we're all back in the office on Tuesday.

egardner set the point value for this task to 5.
  • Update the VTOC image layout to better use the space while accounting for extreme aspect ratios

This was split off from T405992 and the patch (https://gerrit.wikimedia.org/r/c/mediawiki/extensions/ReaderExperiments/+/1195695) was associated with the original ticket, so there were no updates here.
Anyway - that patch already got merged, this point should be resolved.

Change #1198091 had a related patch set uploaded (by Matthias Mullie; author: Matthias Mullie):

[mediawiki/extensions/ReaderExperiments@master] Exclude navbox, noprint, icons & placeholder images

https://gerrit.wikimedia.org/r/1198091

Change #1198092 had a related patch set uploaded (by Matthias Mullie; author: Matthias Mullie):

[mediawiki/extensions/ReaderExperiments@master] Keep infobox svgs

https://gerrit.wikimedia.org/r/1198092

Change #1198093 had a related patch set uploaded (by Matthias Mullie; author: Matthias Mullie):

[mediawiki/extensions/ReaderExperiments@master] Exclude duplicate images from carousel

https://gerrit.wikimedia.org/r/1198093

Test wiki created on Patch demo by Mmullie (WMF) using patch(es) linked to this task:
https://dbb3b4a52a.catalyst.wmcloud.org/w/

Change #1198091 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] Exclude navbox, noprint, icons & placeholder images

https://gerrit.wikimedia.org/r/1198091

Change #1198092 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] Keep infobox svgs

https://gerrit.wikimedia.org/r/1198092

Change #1198093 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] Exclude duplicate images

https://gerrit.wikimedia.org/r/1198093

Issue: Navbox Image
Problem

Images from Wikipedia navbox templates appear in image results on the Minerva desktop site. When users click "view in article" for these images, they're taken to the top of the page rather than to where the image actually appears within the article.

The navboxes are collapsible templates typically located at the bottom of Wikipedia articles. They're collapsed by default, so the images inside them aren't immediately visible. The template must be manually expanded.

It's a desktop issue that affects the Minerva desktop experience, not the mobile site. On the desktop version, users receive all images from navboxes appearing in results, which creates a navigation problem. On the actual mobile site, this isn't an issue because navboxes don't exist there.

Examples
bug_navboxes_Cleopatra.png (717×874 px, 197 KB)
bug_navboxes_Neferukayet.png (895×885 px, 313 KB)
Solution

Add navbox template images to the exclusion list of classes or templates that shouldn't be included in image results. This will prevent navbox images from appearing in the desktop image results and eliminate the navigation issue. It also maintains consistency with how the mobile site handles navboxes (by not showing them at all).

Notes
  • Minerva desktop versus Minerva mobile:
    • Minerva desktop site is accessed via useskin=minerva URL parameter. Navboxes are present and there is no section collapsing on desktop.
    • Minerva mobile site accessed via "mobile view" link in article's footer or via URL params (useskin=minerva&useformat=mobile). Navboxes are scrubbed because they are not mobile-friendly. Sections are collapsible and the layout is optimized for mobile devices.
  • Recommended to test the Minerva mobile site by clicking the "mobile view" link in the article footer. The useskin=minerva URL parameter alone enables the Minerva desktop site.

Some more cases that should have been fixed here:

Some more cases that should have been fixed here:

These are fixed on master, but not on 1.45.0-wmf.23 or 24, and should land with next week's train if we don't push a backport sooner.

Navbox image fixed locally

As mentioned, fixes are merged to master, but the Cleopatra and Neferukayut articles don't exist on beta. Here are screenshots of Minerva desktop, localhost:

bug_fix_Cleopatra_local.png (1×1 px, 1 MB)
bug_fix_Neferukayet_local.png (1×1 px, 798 KB)

Cleopatra article

  • Navbox images are no longer present in Carousel and VTOC. Screenshot displays the end of the horizontal scroll

Neferukayut article

  • Navbox images are no longer present in the results
  • Image carousel is no longer present because the article does not reach the image threshold

QA Test Plan

1. VTOC image display (300px height requirement)

Example
Test
  • Test on different viewport sizes (mobile, tablet, desktop)
  • Verify image height is 300px and center aligned

Wide images

  • Test with various aspect ratios (2:1, 3:1, 4:1, panoramic)
  • Verify image height is 300px
  • Verify image is center aligned
  • Verify sides are cropped
  • Verify image takes up the full width

Tall images

  • Test with various tall aspect ratios (1:2, 1:3, 1:4, portrait)
  • Verify image height is 300px
  • Verify aspect ratio is maintained (no cropping on top/bottom)
  • Verify no horizontal cropping occurs
  • Verify image is centered

2. Navbox image exclusion on Minerva desktop

Steps:

  • Navigate to Wikipedia articles with navbox images (check the footer navigation boxes) on the Minerva desktop site.
  • Enable the Minerva desktop site via URL params. Navboxes only appear on the Minerva desktop. For more information about the Minerva desktop versus mobile site, refer to https://phabricator.wikimedia.org/T406991#11300924.
Examples (Minerva desktop only)
Test
  • Test articles with navboxes
  • Verify navbox images do not appear in Minerva desktop site image browsing results
  • Verify navbox images do not appear in Minerva mobile site image browsing results

3. Duplicate image exclusion

Navigate to Wikipedia articles where the same image appears multiple times

Examples
Test
  • Verify that only one instance of a duplicate image appears in image results

4. Small image exclusion (<30px)

Examples
Test
  • Test common small images like icons, flags in infoboxes
  • Verify images with width <30px are excluded
  • Verify images with height <30px are excluded

5. Infobox SVG images inclusion

SVG images in infoboxes are now included in image results.

Examples
Test
  • Test with country flag, coat of arms, and logo SVG images
  • Verify SVG images in infoboxes are now included in results
  • Verify SVG images meet the 30x30px minimum dimension requirement
  • Verify other infobox image formats (PNG, JPG) still work correctly