Page MenuHomePhabricator
Create Task
Maniphest T320646

[M] Mobile: Show article lead image in the quick view.
Closed, ResolvedPublic
Actions

Assigned To
SimoneThisDot
Authored By
Sneha
Oct 12 2022, 2:42 PM
Tags
Referenced Files
F36191612: lead images issue.jpeg
Jan 13 2023, 3:40 PM
F35865064: Screen Shot 2022-12-14 at 5.46.12 PM.png
Dec 15 2022, 2:01 AM
F35865059: Screen Shot 2022-12-14 at 5.37.56 PM.png
Dec 15 2022, 2:01 AM
F35865070: Screen Shot 2022-12-14 at 5.33.23 PM.png
Dec 15 2022, 2:01 AM
F35605527: Special_Search (56).png
Oct 20 2022, 7:48 PM
F35605525: Special_Search (55).png
Oct 20 2022, 7:48 PM
F35564712: Special_Search (42).png
Oct 12 2022, 2:42 PM
F35564711: Special_Search (40).png
Oct 12 2022, 2:42 PM
Subscribers
Aklapper
CBogen
Etonkovidova
matthiasmullie
SimoneThisDot
Sneha
vadim-kovalenko

Description

When the user opens the quick view on the mobile show the article lead image as the first item in the quick view.

  • The article lead image should be the first item in the quick view
  • The images will have fixed height (height of the quick view) while the width may vary depending on the image dimensions.
  • Have a max width such that the image does not go outside the boundaries of the screen and that the next item is visible.
  • The image card will have the subtle grey border and 2 px radius. (Same as all other cards in the quick view.
  • When the article does not have an image do not show this card.
  • Tapping on image will open an image. (TBD what format/page and will be covered in a different ticket).

Figma specs for portrait image
Figma specs for landscape image

Special_Search (55).png (800×360 px, 80 KB)

Special_Search (56).png (800×360 px, 106 KB)

Details

SubjectRepoBranchLines +/-
Mobile: Show article lead image in the quick view.mediawiki/extensions/SearchVuemaster+43 -12
Mobile: Show article lead image in the quick view.mediawiki/extensions/SearchVuemaster+13 -1
Customize query in gerrit

Related Objects

Event Timeline

Sneha created this task.Oct 12 2022, 2:42 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 12 2022, 2:42 PM
CBogen moved this task from Needs Design to Ready for Estimation on the Structured-Data-Backlog (Current Work) board.Oct 12 2022, 2:53 PM
CBogen added a project: SDAW-Search-Improvements (Milestone 3: QuickView mobile).
Sneha updated the task description. (Show Details)Oct 12 2022, 3:45 PM
CBogen renamed this task from Mobile: Show article lead image in the quick view. to [M] Mobile: Show article lead image in the quick view..Oct 12 2022, 3:59 PM
CBogen moved this task from Ready for Estimation to Ready for Development on the Structured-Data-Backlog (Current Work) board.
Sneha mentioned this in T320743: [L] Mobile: Create a Quick View component.Oct 13 2022, 4:18 PM
vadim-kovalenko changed the task status from Open to In Progress.Oct 17 2022, 12:12 PM
vadim-kovalenko claimed this task.
vadim-kovalenko moved this task from Ready for Development to Doing on the Structured-Data-Backlog (Current Work) board.
vadim-kovalenko added a subscriber: matthiasmullie.Oct 17 2022, 2:31 PM

@matthiasmullie , does this task depend on I4a8545248e6207f168105f191c647526a404c3fa ?

Sneha updated the task description. (Show Details)Oct 20 2022, 7:48 PM
SimoneThisDot subscribed.Oct 25 2022, 1:45 PM

No it does not relate to this, it is something else! :)

gerritbot added a comment.Nov 25 2022, 5:08 PM

Change 860589 had a related patch set uploaded (by Vadim Kovalenko; author: Vadim Kovalenko):

[mediawiki/extensions/SearchVue@master] Mobile: Show article lead image in the quick view.

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

gerritbot added a project: Patch-For-Review.Nov 25 2022, 5:08 PM
vadim-kovalenko moved this task from Doing to Code Review on the Structured-Data-Backlog (Current Work) board.Nov 25 2022, 5:11 PM
gerritbot added a comment.Nov 30 2022, 10:32 AM

Change 860589 merged by jenkins-bot:

[mediawiki/extensions/SearchVue@master] Mobile: Show article lead image in the quick view.

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

vadim-kovalenko mentioned this in rESVU3bef7aeab19d: Mobile: Show article lead image in the quick view..Nov 30 2022, 10:33 AM
ReleaseTaggerBot added a project: MW-1.40-notes (1.40.0-wmf.13; 2022-12-05).Nov 30 2022, 11:01 AM
Maintenance_bot removed a project: Patch-For-Review.Nov 30 2022, 11:31 AM
vadim-kovalenko moved this task from Code Review to Needs QA on the Structured-Data-Backlog (Current Work) board.Dec 1 2022, 10:26 AM
Etonkovidova mentioned this in T325259: [Mobile] Opened Search preview requires horizontal scrolling for all articles' snippets .Dec 15 2022, 1:25 AM
Etonkovidova updated the task description. (Show Details)Dec 15 2022, 1:36 AM
Etonkovidova moved this task from Needs QA to Design QA on the Structured-Data-Backlog (Current Work) board.Dec 15 2022, 2:01 AM
Etonkovidova subscribed.

For @Sneha review.
(1) The following AC is not implemented - a lead image is not clickable. Currently on the desktop, clicking on am image will redirect to an article not to the clicked image.

  • Tapping on image will open an image. (TBD what format/page and will be covered in a different ticket).

(2) I filed T325259. When it;ll be fixed, this ticket needs to be re-verified.
(3) Just for your review in case you'll spot something else):
the CSS seems to be in place:

Screen Shot 2022-12-14 at 5.33.23 PM.png (141×384 px, 20 KB)

With leading imageWithout leading image
Screen Shot 2022-12-14 at 5.37.56 PM.png (1×778 px, 349 KB)
Screen Shot 2022-12-14 at 5.46.12 PM.png (1×748 px, 172 KB)
Sneha added a comment.Dec 15 2022, 9:28 PM

@Etonkovidova Looks like last AC has been TBD and was missed to be defined. Mobile does not have a thumbnail so this can be treated as the lead image on quick view similar to Desktop. The lead article image in Desktop quick view goes no where but we do record if the user clicks on it. We can do the same on mobile for now.

Also not part of this ticket but I just noticed in your second screenshot that the card shows the snippet again with "go to article" link. That is not part of the key information on mobile. It seems like something that was carried forward from Desktop. All the key information on mobile cards is listed in T320743

Etonkovidova added a comment.Dec 16 2022, 2:25 AM

Thanks, @Sneha for reviewing!

There are several points in your comment
(1)

Mobile does not have a thumbnail so this can be treated as the lead image on quick view similar to Desktop. The lead article image in Desktop quick view goes no where but we do record if the user clicks on it. We can do the same on mobile for now.

Yes, mobile Quick View image behaves as on desktop - the element is not clickable, but . click-image is recorded.

(2)

Also not part of this ticket but I just noticed in your second screenshot that the card shows the snippet again with "go to article" link.

The second screenshot shows an article Quickview when an article doesn't have a lead image.

Two things were added as a comment to T320743

  • remove "Go to full article"
  • additional space between open QuickView and the next article
Sneha added a comment.Dec 16 2022, 10:00 PM

Hi @Etonkovidova for #2 what I meant was that card should not exist on mobile at all.

Sneha moved this task from Design QA to Needs QA on the Structured-Data-Backlog (Current Work) board.Jan 10 2023, 3:27 PM
Sneha added a comment.Jan 10 2023, 3:30 PM

@Etonkovidova reviewed this on beta. And it seems like the lead images are not maintaining the aspect ratio as they are all being shown in landscape. As per the images in the descriptions and AC #2 the width of the image will vary depending on its aspect ratio. So that AC should not be marked as completed yet.

Sneha updated the task description. (Show Details)Jan 10 2023, 3:33 PM
Sneha moved this task from Needs QA to Doing on the Structured-Data-Backlog (Current Work) board.Jan 10 2023, 3:40 PM
CBogen reassigned this task from vadim-kovalenko to SimoneThisDot.Jan 10 2023, 3:42 PM
CBogen added subscribers: vadim-kovalenko, CBogen.

Reassigning to @SimoneThisDot for the fix mentioned above since Vadim is no longer working on this project.

Sneha updated the task description. (Show Details)Jan 10 2023, 3:43 PM
SimoneThisDot added a comment.Jan 11 2023, 9:59 AM

I am actively working on this

gerritbot added a comment.Jan 12 2023, 12:36 PM

Change 879511 had a related patch set uploaded (by Simone Cuomo; author: Simone Cuomo):

[mediawiki/extensions/SearchVue@master] Mobile: Show article lead image in the quick view.

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

gerritbot added a project: Patch-For-Review.Jan 12 2023, 12:36 PM
SimoneThisDot moved this task from Doing to Code Review on the Structured-Data-Backlog (Current Work) board.Jan 12 2023, 12:49 PM
gerritbot added a comment.Jan 12 2023, 12:54 PM

Change 879511 merged by jenkins-bot:

[mediawiki/extensions/SearchVue@master] Mobile: Show article lead image in the quick view.

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

SimoneThisDot mentioned this in rESVU929c5d94dfc9: Mobile: Show article lead image in the quick view..Jan 12 2023, 12:55 PM
ReleaseTaggerBot edited projects, added MW-1.40-notes (1.40.0-wmf.19; 2023-01-16); removed MW-1.40-notes (1.40.0-wmf.13; 2022-12-05).Jan 12 2023, 1:00 PM
Maintenance_bot removed a project: Patch-For-Review.Jan 12 2023, 1:30 PM
Sneha added a comment.Jan 13 2023, 3:40 PM

Found this issue on the beta link. All the lead images are being cropped to this narrow vertical size instead of maintaining its aspect ratio.

lead images issue.jpeg (2×1 px, 901 KB)

SimoneThisDot added a comment.EditedJan 26 2023, 10:54 AM

The issue mentioned above is going to be fixed on T326962

SimoneThisDot moved this task from Code Review to Needs QA on the Structured-Data-Backlog (Current Work) board.Jan 26 2023, 3:52 PM
Etonkovidova moved this task from Needs QA to Verify on Production on the Structured-Data-Backlog (Current Work) board.Jan 27 2023, 12:27 AM
In T320646#8523955, @Sneha wrote:

Found this issue on the beta link. All the lead images are being cropped to this narrow vertical size instead of maintaining its aspect ratio.

lead images issue.jpeg (2×1 px, 901 KB)

I noticed this issue too, but it was not reproducible, I re-checked today, seems to be fixed.

Etonkovidova updated the task description. (Show Details)Feb 9 2023, 10:58 PM
Etonkovidova added a comment.Feb 9 2023, 11:01 PM

Checked on pilots wikis - idwiki, ptwiki, and ruwiki - no issues were found.

Etonkovidova closed this task as Resolved.Feb 9 2023, 11:01 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