Page MenuHomePhabricator
Create Task
Maniphest T401121

Build image detail view UI
Closed, ResolvedPublic5 Estimated Story Points
Actions

Description

Background

We would like to build out the detailed view for images for the image browsing experiment

User story

  • As a visual learner, I want to be able to view and image in detail, so that I can more easily explore the content through iamges

Requirements

  • Detail view opens when user interacts with entry point
  • View must be closable. When closed, the original article will appear
  • Detail view must contain entry points to:
  • view full screen
  • open image in commons
  • share
  • download

(these entry points will retain their current iconography and functionality)

  • The image caption must appear on page
  • Text must appear readable on the page

BDD

  • For QA engineer to fill out

Test Steps

  • For QA engineer to fill out

Design

https://www.figma.com/design/YH68yubI663iFLZfuhtOE6/FY-25-6-WE-3.2?node-id=392-2553&p=f&t=9dmSXZ7MONu8rUt8-0

Acceptance criteria

  • Build detail view for a single image. View does not need to include the following:
    • article paragraph text
    • cropping image

Communication criteria - does this need an announcement or discussion?

  • Add communication criteria

Rollback plan

  • What is the rollback plan in production for this task if something goes wrong?

This task was created by Version 1.2.0 of the Web team task template using phabulous

Details

Related Changes in Gerrit:
SubjectRepoBranchLines +/-
Use big image for full-screen, not thumbmediawiki/extensions/ReaderExperimentsmaster+20 -7
ImageBrowsing: use real captions in DetailViewCaption and simplify propsmediawiki/extensions/ReaderExperimentsmaster+57 -77
test: add test coverage for components and mock iconsmediawiki/extensions/ReaderExperimentsmaster+350 -48
ImageBrowsing: Extract new DetailViewControls componentmediawiki/extensions/ReaderExperimentsmaster+371 -230
Close overlay on escapemediawiki/extensions/ReaderExperimentsmaster+13 -2
ImageBrowsing: Introduce useMwApi composablemediawiki/extensions/ReaderExperimentsmaster+16 -3
ImageBrowsing: Extract new DetailViewCaption componentmediawiki/extensions/ReaderExperimentsmaster+160 -108
ImageBrowsing: Introduce "useBackgroundColor" composablemediawiki/extensions/ReaderExperimentsmaster+62 -25
ImageBrowsing: Use template ref for Detail view captionmediawiki/extensions/ReaderExperimentsmaster+9 -8
ImageBrowsing: image detail viewmediawiki/extensions/ReaderExperimentsmaster+1 K -27
Customize query in gerrit
Related Changes in GitLab:
TitleReferenceAuthorSource BranchDest Branch
Add $wgReaderExperimentsApiBaseUrirepos/test-platform/catalyst/ci-charts!95jhuneidiT401121main
Customize query in GitLab

Related Objects
Search...

StatusSubtypeAssignedTask
 ResolvedNoneT398493 [Epic] Image Browsing: Build out the front-end UI
 ResolvedegardnerT401121 Build image detail view UI

Event Timeline

ovasileva created this task.Aug 4 2025, 2:19 PM
ovasileva updated the task description. (Show Details)Aug 4 2025, 4:38 PM
ovasileva updated the task description. (Show Details)Aug 4 2025, 4:43 PM
ovasileva triaged this task as High priority.Aug 4 2025, 4:48 PM
ovasileva set the point value for this task to 5.
mfossati mentioned this in T401142: [SPIKE] Image Browsing: investigate how to enable image cropping / moving effect.Aug 4 2025, 6:06 PM
ovasileva moved this task from Incoming/Inbox to Ready on the Reader Growth Team board.Aug 5 2025, 3:42 PM
ovasileva moved this task from Ready to Sprint 3 on the Reader Growth Team board.Aug 5 2025, 4:32 PM
ovasileva edited projects, added: Reader Growth Team (Sprint 3); removed: Reader Growth Team.
mfossati claimed this task.Aug 5 2025, 6:32 PM
mfossati changed the task status from Open to In Progress.Aug 7 2025, 2:27 PM
mfossati moved this task from Committed to Doing on the Reader Growth Team (Sprint 3) board.
gerritbot added a comment.Aug 18 2025, 4:19 PM

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

[mediawiki/extensions/ReaderExperiments@master] ImageBrowsing: image detail view

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

gerritbot added a project: Patch-For-Review.Aug 18 2025, 4:19 PM
mfossati updated Other Assignee, added: matthiasmullie.Aug 19 2025, 3:58 PM
ovasileva edited projects, added: Reader Growth Team (Sprint 4 ); removed: Reader Growth Team (Sprint 3).Aug 19 2025, 4:34 PM
JScherer-WMF subscribed.Aug 19 2025, 7:45 PM

For desktop view of this UI, see Figma:

Screenshot 2025-08-19 at 3.41.40 PM.png (1,414×1,544 px, 1 MB)

Notes:

  • The max width of the detail overlay is 950px (I chose this because it's the max width of the content area in Vector, but I don't have a strong conviction about it yet)
  • Wider than ~600px (choose a breakpoint around 600px that we're already using in Vector if possible), the visual ToC is a two column view.
  • A dialogue scrim should obscure the article behind the detail view.

Otherwise everything works the same.

mfossati moved this task from Committed to Doing on the Reader Growth Team (Sprint 4 ) board.Aug 20 2025, 9:59 AM
matthiasmullie subscribed.Aug 20 2025, 11:03 AM

@JScherer-WMF This may be annotated in dev mode, but I can't currently see these, so I'll post questions here:

  • That light/dark grey background: are those fixed colors, or is there to be some sort of interpolation of colors (like the caption background etc.)?
  • Looks like that light grey isn't fully aligned with the bottom of the image - should it be?
PatchDemoBot added a comment.Aug 20 2025, 6:19 PM

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

PatchDemoBot added a comment.Aug 20 2025, 7:40 PM

Test wiki on Patch demo by EGardner (WMF) using patch(es) linked to this task was deleted:

https://99ca4c09f5.catalyst.wmcloud.org/w/

gerritbot added a comment.Aug 20 2025, 10:21 PM

Change #1176498 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] ImageBrowsing: image detail view

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

Maintenance_bot removed a project: Patch-For-Review.Aug 20 2025, 10:31 PM
ovasileva added a comment.Aug 21 2025, 9:56 AM
In T401121#11100136, @JScherer-WMF wrote:

For desktop view of this UI, see Figma:

Screenshot 2025-08-19 at 3.41.40 PM.png (1,414×1,544 px, 1 MB)

Notes:

  • The max width of the detail overlay is 950px (I chose this because it's the max width of the content area in Vector, but I don't have a strong conviction about it yet)
  • Wider than ~600px (choose a breakpoint around 600px that we're already using in Vector if possible), the visual ToC is a two column view.
  • A dialogue scrim should obscure the article behind the detail view.

Otherwise everything works the same.

Since we're only running the A/B test on mobile with a limited (0.1% of logged-out users) audience, let's hold off on building this out until after the A/B test in the case it's successful. @JScherer-WMF - let me know if that raises any concerns!

matthiasmullie added a comment.Aug 21 2025, 1:40 PM

FYI the caption text & background color is not functional on patchdemo. I believe that is because $wgReaderExperimentsApiBaseUri is not yet set there, and this patch should solve that: https://gitlab.wikimedia.org/repos/test-platform/catalyst/patchdemo/-/merge_requests/197

mfossati moved this task from Doing to Signoff on the Reader Growth Team (Sprint 4 ) board.Aug 21 2025, 2:48 PM
egardner subscribed.Aug 21 2025, 4:04 PM

I will file a new task for desktop UI work specifically, and then we can close this one. Will do that later today.

gerritbot added a comment.Aug 21 2025, 7:29 PM

Change #1180944 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/extensions/ReaderExperiments@master] ImageBrowsing: Introduce "useBackgroundColor" composable

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

gerritbot added a project: Patch-For-Review.Aug 21 2025, 7:29 PM
gerritbot added a comment.Aug 21 2025, 7:46 PM

Change #1180950 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/extensions/ReaderExperiments@master] ImageBrowsing: Use template ref for Detail view caption

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

gerritbot added a comment.Aug 21 2025, 8:10 PM

Change #1180961 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/extensions/ReaderExperiments@master] ImageBrowsing: Extract new DetailViewCaption component

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

gerritbot added a comment.Aug 21 2025, 10:02 PM

Change #1180987 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/extensions/ReaderExperiments@master] ImageBrowsing: Introduce useMwApi composable

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

gerritbot added a comment.Aug 21 2025, 11:16 PM

Change #1181003 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/extensions/ReaderExperiments@master] ImageBrowsing: Extract new DetailViewControls component

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

gerritbot added a comment.Aug 22 2025, 12:49 PM

Change #1180950 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] ImageBrowsing: Use template ref for Detail view caption

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

gerritbot added a comment.Aug 22 2025, 12:49 PM

Change #1180944 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] ImageBrowsing: Introduce "useBackgroundColor" composable

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

gerritbot added a comment.Aug 22 2025, 1:04 PM

Change #1180961 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] ImageBrowsing: Extract new DetailViewCaption component

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

egardner updated the task description. (Show Details)Aug 22 2025, 2:09 PM
gerritbot added a comment.Aug 22 2025, 3:04 PM

Change #1180987 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] ImageBrowsing: Introduce useMwApi composable

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

egardner moved this task from Signoff to Doing on the Reader Growth Team (Sprint 4 ) board.Aug 22 2025, 3:57 PM

I'm moving this back to the "doing" column for now because I want to try to get captions working properly here, since that's listed as one of the requirements.

If it seems feasible I may attempt to address desktop design as well, otherwise we can leave that for next sprint.

egardner claimed this task.Aug 22 2025, 6:46 PM
egardner updated Other Assignee, removed: matthiasmullie.
egardner added a subscriber: mfossati.
gerritbot added a comment.Aug 25 2025, 11:15 AM

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

[mediawiki/extensions/ReaderExperiments@master] Close overlay on escape

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

gerritbot added a comment.Aug 25 2025, 9:59 PM

Change #1181794 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/extensions/ReaderExperiments@master] ImageBrowsing: use real captions in DetailViewCaption and simplify props

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

egardner moved this task from Doing to Code Review on the Reader Growth Team (Sprint 4 ) board.Aug 25 2025, 10:00 PM
gerritbot added a comment.Aug 25 2025, 10:43 PM

Change #1181672 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] Close overlay on escape

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

gerritbot added a comment.Aug 26 2025, 11:26 AM

Change #1181671 had a related patch set uploaded (by Marco Fossati; author: LWatson):

[mediawiki/extensions/ReaderExperiments@master] test: add test coverage for components and mock icons

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

gerritbot added a comment.Aug 26 2025, 3:23 PM

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

[mediawiki/extensions/ReaderExperiments@master] Use big image for full-screen, not thumb

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

egardner updated the task description. (Show Details)Aug 26 2025, 5:33 PM
gerritbot added a comment.Aug 27 2025, 12:49 PM

Change #1181003 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] ImageBrowsing: Extract new DetailViewControls component

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

gerritbot added a comment.Aug 27 2025, 12:49 PM

Change #1181794 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] ImageBrowsing: use real captions in DetailViewCaption and simplify props

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

gerritbot added a comment.Aug 27 2025, 12:50 PM

Change #1181671 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] test: add test coverage for components and mock icons

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

gerritbot added a comment.Aug 27 2025, 9:39 PM

Change #1182161 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] Use big image for full-screen, not thumb

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

egardner closed this task as Resolved.Aug 27 2025, 9:49 PM

Gonna call this one done! We may QA it next sprint.

Maintenance_bot removed a project: Patch-For-Review.Aug 27 2025, 10:31 PM
matthiasmullie added a project: ReaderExperiments-ImageBrowsing.Jan 6 2026, 1:04 PM
Restricted Application edited projects, added: Reader Growth Team; removed: Reader Growth Team (Sprint 4 ). · View Herald TranscriptJan 6 2026, 1:04 PM
Aklapper edited projects, added: Reader Growth Team (Sprint 4 ); removed: Reader Growth Team.Jan 6 2026, 1:51 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits