Background
- We want to add an entry point of images from other wikis. This is helpful to readers on wikis that have few images and is also related to https://meta.wikimedia.org/wiki/Community_Wishlist/Focus_areas/Improved_discovery_of_media_files in the Community Wishlist
- UI designs here: T402269
User story
- As a visual learner, I want to be able to view images relevant to the topic I'm reading about, regardless of which wiki I'm on
Requirements
- Images must appear only from the article on other Wikipedias or from the wikidata item corresponding to the article
- Images from other Wikipedias will be shown before images from Wikidata
- Content should only appear in the user's language
- Images will be lazy loaded when the user scrolls to the bottom of the page
- Content like this must be clearly marked as coming from outside the current wiki:
- If image is used in one place: From xyz.wikipedia.org
- If image is used in multiple wikis: From xyz.wikipedia.org and XX other language editions of Wikipedia
- If image is from Wikidata or one non-wikipedia source: From Wikidata
- Loading state for the other wikis feature
Design
- See T402269: [Design] Design entry points for images from other wikis @JScherer-WMF - would the figma file be the source of truth here?
- Loading state uses an inline Codex ProgressBar
Acceptance criteria
- Complete all requirements above with the design provided
- Provide a way to test this for design & product review
Communication criteria - does this need an announcement or discussion?
- The treatment here will be discussed in first on-wiki community conversations
BDD
Feature: Media from other projects in Image Browsing
Scenario: Loading images from other wikis
Given the “Media from other projects” header is visible and at least 50% in view
When the MediaSearch API request is pending
Then a loading indicator is displayed
And the indicator disappears once the results return
Scenario: Empty state
Given the article has no images from other wikis
When the overlay is opened
Then the “Media from other projects” section is not displayed
Scenario: Image captions
Given an image from another wiki has a caption
When it is displayed
Then the caption is shown in plain text
And if no caption exists, nothing is displayed
Scenario: Wiki project labels
Given an image comes from another project
When it is displayed
Then the project label is shown using the rules for Wikipedia and Wikidata
Scenario: Interaction
Given I click an image from another wiki
When it opens in DetailView
Then the DetailView auto-scrolls into view
And I can navigate through these images with URL routing
And clicking the “Back to article” button returns me to the article pageTest Steps
Test Case 1: Loading state
- Open the image overlay for any article.
- Scroll until the “Media from other projects” header is 50% in view.
- Throttle network in DevTools to slow down API.
- AC1: A loading indicator appears while the API request is in progress.
- AC2: The loading indicator disappears once images render.
Test Case 2: Empty state
- Open the image overlay for an article without images in other wikis.
- AC3: The “Media from other projects” section does not appear at all.
Test Case 3: Captions
- Open the image overlay for an article with images from other projects.
- Inspect the cards.
- AC4: Captions are shown when available.
- AC5: If no caption exists, nothing is displayed (no placeholder text).
Test Case 4: Project labels
- Inspect source labels for images.
- AC6: If one source, label = “From {project}.wikipedia.org”.
- AC7: If multiple sources, label = “From {project}.wikipedia.org and X other language editions of Wikipedia”.
- AC8: If from Wikidata, label = “From Wikidata”.
Test Case 5: Interaction & navigation
- Click an image in the “Media from other projects” section.
- AC9: The image opens in DetailView.
- AC10: DetailView auto-scrolls into view.
- AC11: Navigation between images works with URL routing.
- Scroll to bottom and click “Back to article”.
- AC12: User is returned to the article page.
QA Results - Patchdemo
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T402966#11231365 |
| 2 | ✅ | T402966#11231365 |
| 3 | ✅ | T402966#11231365 |
| 4 | ❓ | T402966#11231365 |
| 5 | ✅ | T402966#11231365 |
| 6 | ✅ | T402966#11231365 |
| 7 | ✅ | T402966#11231365 |
| 8 | ❓ | T402966#11231365 |
| 9 | ✅ | T402966#11231365 |
| 10 | ✅ | T402966#11231365 |
| 11 | ✅ | T402966#11231828 |
| 12 | ✅ | T402966#11231365 |
Notes
- Testing with patchdemo or local developer setup requires these repositories: ReaderExperiments, Minerva, MobileFrontend, MobileFrontendContentProvider, and WikimediaMessages.
