Page MenuHomePhabricator

[M] Quick View: Add search result page images to quickview on Special:Search
Open, Needs TriagePublic

Description

{F35423970}This story is one part of all the contents that go in the quick view mentioned in T306898

Image specifications in quick view

  • The header image in the quick view should be the same image used in the thumbnail/Go bar (see T306883). This image should match the one shown as thumbnail in the results so that the quick view could be connected to the result shown.
  • The width of an image box should be the width of the quick view component.
  • The height of the image box should be fixed for landscape image.
  • The height of the image box should be variable for portrait image.
    • The height should not go beyond a maximum height as specified in figma for Portrait image.
    • If the width of the quick view component shrinks on small screens then the height will adjust to retain its proportion.
  • The image should fill the image box and align to the top of the image similar to the rules prescribed for thumbnails. See option 4 here as an example.
  • When the image is not present do not show anything. The contents below the image area should take its place.
  • Show placeholder image if the image is taking longer to load.

Check Figma for the specs.

Landscape image (when the image width is larger than its height)

Special_Search (16).png (1×1 px, 277 KB)

Portrait image (when the image height is larger than its width)

Special_Search (17).png (1×1 px, 343 KB)

Event Timeline

Sneha renamed this task from Add search result page images to quickview on Special:Search to Quick View: Add search result page images to quickview on Special:Search.Jun 10 2022, 6:37 PM
CBogen renamed this task from Quick View: Add search result page images to quickview on Special:Search to [M] Quick View: Add search result page images to quickview on Special:Search.Jul 27 2022, 4:51 PM

I have also implemented an additional AC:

  • If the image is in landscape and its height is SMALLER than the fixed height. The space allocated to the image should shrink (Eg the margin at the bottom of the image should always be the same)

@Sneha what shall I do while the image loads? Should I delay the actual image to show (then it will jump when the image loads), or should I show a placeholder image of any sort?

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

[mediawiki/extensions/SearchVue@master] Quick View: Add search result page images to quickview on Special:Search

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

@SimoneThisDot It should show the placeholder image. Text jumping around will be an abrupt experience. Also approximately how long would it take to load images if the someone has a reasonably good internet? Also thanks for adding the additional AC. I will add the loading one in the description too.

@Sneha It should not take long at all, but I always like to develop this using slow connection that that could also take a second or two, so a placeholder would really improve UX.

For placeholder do you mean the grey boxes shown in the figma design, or do we have an actual placholder image?

@SimoneThisDot yes for placeholder it is the grey boxes with grey icon shown in the figma designs.

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

[mediawiki/extensions/SearchVue@master] Quick View: Add search result page images to quickview on Special:Search

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

@SimoneThisDot this has similar challenges as the Table of Contents tickets.

  • When switching to an article with an image to one without an image persists.
  • As well as accounting for this, some general graceful error handling so that if we get empty, bad or malformed responses we also suppress the component actively.
  • Same here for when changing between sections, with images we would be needing to wait for the loading as well as the api response, so again might be worthwhile at least when waiting for the API response to smooth out the transition. I'll create a task.

Style note:

  • We should increase the padding at the top of text snippet when there is no image