== 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} @JScherer-WMF - would the figma file be the source of truth here?
- **Loading state** uses an inline [[ https://doc.wikimedia.org/codex/latest/components/demos/progress-bar.html | Codex ProgressBar ]]
{F65955747}
== 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 page
```
== Test Steps
__Test Case 1: Loading state__
1. Open the image overlay for any article.
2. Scroll until the “Media from other projects” header is 50% in view.
3. Throttle network in DevTools to slow down API.
4. **AC1:** A loading indicator appears while the API request is in progress.
5. **AC2:** The loading indicator disappears once images render.
__Test Case 2: Empty state__
6. Open the image overlay for an article without images in other wikis.
7. **AC3:** The “Media from other projects” section does not appear at all.
__Test Case 3: Captions__
8. Open the image overlay for an article with images from other projects.
9. Inspect the cards.
10. **AC4:** Captions are shown when available.
11. **AC5:** If no caption exists, nothing is displayed (no placeholder text).
__Test Case 4: Project labels__
12. Inspect source labels for images.
13. **AC6:** If one source, label = “From {project}.wikipedia.org”.
14. **AC7:** If multiple sources, label = “From {project}.wikipedia.org and X other language editions of Wikipedia”.
15. **AC8:** If from Wikidata, label = “From Wikidata”.
__Test Case 5: Interaction & navigation__
16. Click an image in the “Media from other projects” section.
17. **AC9:** The image opens in DetailView.
18. **AC10:** DetailView auto-scrolls into view.
19. **AC11:** Navigation between images works with URL routing.
20. Scroll to bottom and click “Back to article”.
21. **AC12:** User is returned to the article page.
==Notes
- Testing with patchdemo or local developer setup requires these repositories: ReaderExperiments, Minerva, MobileFrontend, MobileFrontendContentProvider, and WikimediaMessages.