Page MenuHomePhabricator

[L] Mobile: Show Commons widget in the quick view panel
Closed, ResolvedPublic

Description

When the user opens the quick view on the mobile show the related images from commons after all the article content cards. Showing related images from commons helps the users discover visual knowledge beyond wikipedia. This ticket is to show Commons content related to the article the user is viewing in QuickView.

Acceptance Criteria

  • Show three images from commons
  • Show the title "Related images from Wikmedia Commons" as shown in the design.
  • The images should maintain its aspect ratio and fit to the given height.
  • Extra wide images should crop so that they are never too wide than the width of the mobile screen. (max width is going to be equal to Screenwidth - 50px)
  • If there are fewer than three images show less.
  • If there are not images do not show this sections
  • If there are more than three images show the link "view more" as shown in the design
  • The "view more images" links takes users to to the MediaSearch images results page on commons for that query.
  • Tapping on the image will go to the image info page as it currently happens on the desktop version
  • The quick view panel (if it was previously open before navigating to an article) should stay open when user return to search results using browser back button.

Design specs in Figma. Screen 1, Screen 2

Special_Search (58).png (800×360 px, 139 KB)

Swipe left to reveal "view more images" link

Special_Search (60).png (800×360 px, 112 KB)

Event Timeline

MarkTraceur renamed this task from Mobile: Show Commons widget in the quick view panel to [L] Mobile: Show Commons widget in the quick view panel.Nov 16 2022, 5:43 PM

@Sneha I have two questions for you:

Extra wide images should crop so that they are never too wide than the width of the mobile screen.

Do you have a specific max-width in mind?

Tapping on the image will open the media search image preview.

What do you mean by Media search Image preview? Currently, on Desktop we go to the commons page for that image (eg: https://commons.wikimedia.org/wiki/File:Cat_November_2010-1a.jpg) is that correct also in this instance or is the expected behaviour different?

@SimoneThisDot here is an example of extra wide image width. It is supposed to leave enough room on the right so the next card is visible.

For media search image preview: Try searching on commons on mobile and tap on the image. It has a preview that will open in model. It is the image preview on mobile.

Image to be around 50px LESS than the screen width.

Follow up from Discussion with Sneha:

  • Added more information to define when and how to cut extra wide images
  • @Sneha to create a follow up ticket to define what and how to show the preview. For now we will redirect to the file info page as we currently do

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

[mediawiki/extensions/SearchVue@master] Mobile: Show Commons widget in the quick view panel

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

Here is a follow up ticket to explore showing image preview in milestone 4 - T323650

Change 859998 merged by jenkins-bot:

[mediawiki/extensions/SearchVue@master] Mobile: Show Commons widget in the quick view panel

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

Checked on enwiki betalabs - below are my comments on the ACs that are not marked complete:
@SimoneThisDot - for your review.
(1)

  • Show the title "Related images from Wikmedia Commons" as shown in the design.

Presently, the title says "Related images in Wikimedia Commons" not "Related images from Wikimedia Commons"

Screen Shot 2022-12-20 at 4.27.18 PM.png (938×766 px, 318 KB)

(2)

  • The "view more images" links takes users to to the MediaSearch images results page on commons for that query.

"View more images" link does take users to the MediaSearch images results page, but the search terms displayed in the search field would refer to wikidata entities, e.g.

<a class="quickViewCommons__viewMore" href="https://commons.wikimedia.beta.wmflabs.org/wiki/Special:MediaSearch?search=haswbstatement%3AP245962%3DQ420336">View more images</a>

Screen Shot 2022-12-20 at 5.27.29 PM.png (1×824 px, 127 KB)

The search field will display: haswbstatement:P245962=Q420336 which might be confusing for users.

Screen Shot 2022-12-20 at 5.31.15 PM.png (1×814 px, 148 KB)

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

[mediawiki/extensions/SearchVue@master] FIx SearchVue commons widget wording

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

SimoneThisDot added a subscriber: matthiasmullie.
  1. Fix the title
  • The Typo in the title has been fixed (currently in review)
  1. Search Term being hard to read
  2. This is more a product decision than a technical one. As far as I know, the only way to show the same images showing in the searchVue panel is to show that complex search. So we can either search for just the title (Cat) and expect a different result, or keep showing the complex search term, but return the correct pictures.

cc: @CBogen @Sneha @matthiasmullie (Matthias just to make sure I am not wrong in my assumption)

Confirming what @SimoneThisDot just said.
The images displayed in the Commons widget are based on the entity id associated with the search result page.
This because searches based on titles are likely to have many false positives (e.g. similar words with different meanings) and negatives (e.g. images not being described in less common languages)
The link to Commons is then a continuation of these results & the search term used will be something funky for the Qid (e.g. custommatch:depicts_or_linked_from=Q146), rather than a descriptive term (e.g. house cat)

We could change how either of those things (search widget results and/or link to Commons) work, but that'll mean being far less precise (and often plain wrong) in the results we'll be showing.

Change 874848 merged by jenkins-bot:

[mediawiki/extensions/SearchVue@master] FIx SearchVue commons widget wording

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

I think since the users can easily tap on the image to see more information from the widget itself, they don't have to necessarily see the same image in view more search results. Ideally it would be good to show those too but the advance search term seems more confusing and a user may be hesitant to perform a new search as it seems like you have to enter some advance query in the input box. Also the search term in the input box should be something the user understands like "jungle cat" in the example shared above. It is okay if the results are different we can compromise that for clarity.

  1. Fix the title
  • The Typo in the title has been fixed (currently in review)

Checked in betalabs - https://en.m.wikipedia.beta.wmflabs.org/w/index.php?fulltext=search&search=cat&title=Special:Search&ns0=1&quickViewEnableMobile=1&quickView=Cat. The typo is fixed:

Screen Shot 2023-01-03 at 10.20.45 AM.png (1×812 px, 456 KB)

  1. Search Term being hard to read
  2. This is more a product decision than a technical one. As far as I know, the only way to show the same images showing in the searchVue panel is to show that complex search. So we can either search for just the title (Cat) and expect a different result, or keep showing the complex search term, but return the correct pictures.

cc: @CBogen @Sneha @matthiasmullie (Matthias just to make sure I am not wrong in my assumption)

I agree with @Sneha (https://phabricator.wikimedia.org/T321001#8495383):

It is okay if the results are different we can compromise that for clarity.

The link in the QuickView just says - "View more images". The wording is general enough to make a user expect to see just "more" vs "to see the results that were displayed in Special:Search and more".

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

[mediawiki/extensions/SearchVue@master] Simplify Commons search link

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

I have implemented the changes to just show the search result in the title (pending approval).

If we're decoupling the "view more images" link from the images displayed, we're going to have to rethink a few more things: "view more images" only shows when there are more images available than those shown & if both searches are different, we no longer know that.

If we want to conditionally show that link (depending on whether or not there will be results for the new search term), we need to do an additional api call (to conduct that search).
That one's not cheap, though - we should confirm with search team how comfortable they'd be with us doing that.

We could also simply always show that link.
In this case, we may want to rethink our phrasing and change "view more" (desktop) and "view more images" (mobile), though:

  • there may not be "more" images: it could be the exact same ones, or even less or none (especially in foreign languages where Commons may not have descriptions matching the term, and Wikidata may not have labels matching it)
  • they may not be "more [of this subject]", but different images altogether (e.g. most results for "Labyrinth seal" don't match the subject of Labyrinth seal)

It will be interesting to see the use of "view more" when we release and if it is worth keeping it or not. If the results are not going to be "relevant" or "more than what is shown" especially in language wikis then perhaps we do not need to show it at all. But we can consider changing the copy to "search more in commons" or something like that which is persistently there. However we may be okay to not show anything at all based on the usage information. So perhaps we can leave it as is for now and monitor usage?

Moving back to QA since we're going to leave it as is for now.

I think we should still turn the colour of "In Wikimedia Commons" to black though.

Oh sorry this is a different ticket. Ignore my comment above. It was meant for the commons link in Desktop.

@SimoneThisDot, @Sneha - please review the following. Number (1) is a regression - the icon was present before.
Re-checking in betalabs:
(1) the commons icon is missing, e.g.
&quickView=Jungle+cat

betalabsmockup
Screen Shot 2023-01-19 at 12.19.43 PM.png (1×808 px, 146 KB)
Screen Shot 2023-01-19 at 12.21.14 PM.png (1×672 px, 466 KB)

(2) the description card seems to occupy more space than it should.
e.g.
&quickView=Earless+seal
&quickView=Jungle+cat
&quickView=Water

betalabsmockup
Screen Shot 2023-01-19 at 1.22.11 PM.png (826×826 px, 127 KB)
Screen Shot 2023-01-19 at 1.15.46 PM.png (1×568 px, 262 KB)

(3) (not reliably reproducible) Clicking on the links in (2) will display the search results where the first search result won't have a thumbnail. Other results on the page will either display a reduced size for a thumbnail or won't display it at all:
e.g. &quickView=Water

desktopmobile
Screen Shot 2023-01-19 at 1.37.05 PM.png (1×2 px, 477 KB)
Screen Shot 2023-01-19 at 1.36.49 PM.png (990×724 px, 146 KB)

@Etonkovidova reviewed the list above and yes all needs to be fixed.

For #2 specifically I am curious why the font style here is different than what is specified and implemented in T320647.

Sorry for the confusion. I think it was an illusion because the box is bigger. The font style is fine. However it seemed to be working in that other ticket based on your screenshots.

Sorry for the confusion. I think it was an illusion because the box is bigger. The font style is fine. However it seemed to be working in that other ticket based on your screenshots.

Thx! Yes, I was confused with the font sizes too - was double- checking, and as you said, the font style looks according to the specs.

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

[mediawiki/extensions/SearchVue@master] Mobile: Show Commons widget in the quick view panel

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

hi @Etonkovidova

I have fixed issue 1 & 2, but I have not been able to replicate issue 3!

I tried around 20 times and also used a slow connection (in case it was triggered by that).

Are you able to either video it, or reproduce the issue with me on the call? I cannot find anything that could trigger that behaviour in code and I need to be able to reproduce the issue

hi @Etonkovidova

I have fixed issue 1 & 2, but I have not been able to replicate issue 3!

I tried around 20 times and also used a slow connection (in case it was triggered by that).

Are you able to either video it, or reproduce the issue with me on the call? I cannot find anything that could trigger that behaviour in code and I need to be able to reproduce the issue

Thanks, @SimoneThisDot - I was not able to reproduce #3 either. So, I'll keep an eye on it.

Change 882752 merged by jenkins-bot:

[mediawiki/extensions/SearchVue@master] Mobile: Show Commons widget in the quick view panel

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