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

In T405992#11266759, @JScherer-WMF wrote:

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:

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

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:

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

@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.

• 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

• Cleopatra
• Neferukayet

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:

• https://fr.wikipedia.org/w/index.php?title=NGC_6805&imageBrowsing=1&useformat=mobile&useskin=minerva
  • The small icon in the blue-ish box listing the galaxies should not show up in carousel (nit: excluding it will even get rid of the carousel, as it drop below the 3-image minimum)
  • Current:
    
• https://fr.wikipedia.org/w/index.php?title=Gouvernement_B%C3%A9avogui/Goumou&imageBrowsing=1&useformat=mobile&useskin=minerva
  • Placeholder images (the gray questionmarks) should be removed from carousel/vtoc
  • Duplicate images should be removed from carousel/vtoc
  • Current:
    
• https://fr.wikipedia.org/w/index.php?title=Doudleby_nad_Orlic%C3%AD&imageBrowsing=1&useformat=mobile&useskin=minerva
  • Both flags (including the SVG one) from the infobox should be present in carousel/vtoc
  • Current:
    

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:

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

• Visual confirmation of VTOC images was provided in this screen recording https://phabricator.wikimedia.org/T405992#11283383
• Canada article https://en.wikipedia.org/w/index.php?title=Canada&imageBrowsing=1&useformat=mobile&useskin=minerva
  

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)

• Cleopatra https://en.wikipedia.org/wiki/Cleopatra?imageBrowsing=true&useformat=desktop&useskin=minerva
• Neferukayet https://en.wikipedia.org/wiki/Neferukayet?imageBrowsing=true&useformat=desktop&useskin=minerva
• Paris https://en.wikipedia.org/w/index.php?title=Paris&imageBrowsing=1&useformat=desktop&useskin=minerva
  • Before with small navbox image:
    
• Barbados https://en.wikipedia.org/w/index.php?title=Barbados&imageBrowsing=1&useformat=desktop&useskin=minerva
  • Before with small navbox image:
    

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

• Gouvernement Béavogui/Goumou article on French Wikipedia now excludes a duplicate image. This article was mentioned here https://phabricator.wikimedia.org/T406991#11301919
• The Beatles (on Minerva desktop site) now excludes a duplicate logo image https://en.wikipedia.org/w/index.php?title=The_Beatles&imageBrowsing=1&useformat=desktop&useskin=minerva
  • The duplicate logo is in a table template present on the desktop site only. The table's CSS selector is sidebar nomobile nowraplinks hlist.
    
    
    
    

Test

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

4. Small image exclusion (<30px)

Examples

• NGC 6805 article on French Wikipedia excludes a small image. The article was mentioned here https://phabricator.wikimedia.org/T406991#11301919.
• Berlin article now excludes two small images https://en.wikipedia.org/w/index.php?title=Berlin&imageBrowsing=1&useformat=mobile&useskin=minerva
  
  
• Paris article on Minerva desktop excludes small navbox image https://en.wikipedia.org/w/index.php?title=Paris&imageBrowsing=1&useformat=desktop&useskin=minerva
• Barbados article on Minerva desktop excludes small navbox image https://en.wikipedia.org/w/index.php?title=Barbados&imageBrowsing=1&useformat=desktop&useskin=minerva

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

• Edgar Allen Poe's signature photo is now included https://en.wikipedia.org/w/index.php?title=Edgar_Allan_Poe&imageBrowsing=1&useformat=mobile&useskin=minerva
• Google's colorful logo image located in the infobox is now included https://en.wikipedia.org/w/index.php?title=Google&imageBrowsing=1&useformat=mobile&useskin=minerva
• Haiti article flag and coat of arms are now included https://en.wikipedia.org/w/index.php?title=Haiti&imageBrowsing=1&useformat=mobile&useskin=minerva
• Puerto Rico article flag and coat of arms are now included https://en.wikipedia.org/w/index.php?title=Puerto_Rico&imageBrowsing=1&useformat=mobile&useskin=minerva
• Doudleby nad Orlicí article on French Wikipedia now includes the flag. The article was mentioned here https://phabricator.wikimedia.org/T406991#11301919

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

Can this be resolved?