[L] Media Search: Grid updates
Closed, ResolvedPublic

Description

Potential updates to the grid by priority:

  1. Improving resolution of images while in grid to avoid blurriness
  2. Not allowing panorama / landscape images to take up more than 35% (?) width of a row by cropping the left and right sides. We could also show more of the image and crop less placing them inside of a gray box like we do for really skinny portrait images in the quick view while not allowing it be less than 80% of the height of the box
    example.jpg (292×573 px, 89 KB)
  3. Updating video results grid so that if there is only one result it doesn't span the entire width of the row. It currently looks like this:
    Screen Shot 2020-10-05 at 10.53.56 AM.png (592×1 px, 185 KB)
  4. [Note: this isn't possible without getting layout info from the DOM, or building the markup in JS, so we're not going to do it for now] Coming up with a strategy to avoid having only one image at the end of the grid. Occasionally looks like this:
    Screen Shot 2020-10-05 at 10.58.02 AM.png (1×1 px, 1 MB)
  5. Reducing width of quick view by 5% to make browsing the grid more functional while quick view is open.

*I imagine this ticket will take a working session with me (mwilliams) and whoever the engineer is, to share screens and work through a couple of these issues together to understand what is reasonable / possible for us.


These acceptance criteria are based on a conversation between Matthew and Anne about what's feasible right now, given we want to stick with CSS-only updates since anything in the JS that happens post-component-mount would cause a shift from the PHP layout:

Acceptance Criteria:

  • Very few images are stretched to the point where they're extremely blurry. Extra-small images are shown at their natural size, horizontally and vertically centered within a gray box.
  • Wide landscape-oriented images no longer take up an entire row on desktop
  • Video results are always the same size as each other, and a dangling result on the last line doesn't stretch to span the entire row
  • The QuickView panel is 45% width of the results container on desktop (formerly 50%)

Event Timeline

Potential updates:

  • Improving resolution of images while in grid to avoid blurriness
  • Finding optimal height for images (Seems like we need to increase the height by a bit?)
  • How to handle panorama / very wide landscape photos, cropping strategy
  • Should the images be slightly smaller when the quick view is open. Feels awkward when only 2 or even 1 image is shown per row when quick view is open.
  • Related to previous point, but what seems to be the optimal width for the quick view? Should it be a reduced a bit to accommodate browsing the grid better?

Squashed and updated my last couple comments here into the task description

CBogen renamed this task from Media Search: Grid updates to [L] Media Search: Grid updates.Oct 7 2020, 4:40 PM

Adding some test cases to check in production:

mount Whitney
Screen Shot 2020-10-13 at 2.42.17 PM.png (717×1 px, 742 KB)
lake
Screen Shot 2020-10-13 at 2.41.48 PM.png (679×1 px, 880 KB)
korat lilac kitten
Screen Shot 2020-10-13 at 2.42.46 PM.png (633×1 px, 751 KB)

Change 634622 had a related patch set uploaded (by Anne Tomasevich; owner: Anne Tomasevich):
[mediawiki/extensions/WikibaseMediaInfo@master] Improve video grid and reduce QuickView size

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

Change 634622 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] Improve video grid and reduce QuickView size

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

Change 642521 had a related patch set uploaded (by Anne Tomasevich; owner: Anne Tomasevich):
[mediawiki/extensions/WikibaseMediaInfo@master] Improve image grid

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

Change 642521 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] Improve image grid and fix QuickView thumbnail size

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

The last patch is not in production yet - I'm moving the task to Verify on Production and will re-check in production all specs when both patches will be inproduction.

(1) Checked in commons betalabs

Improving resolution of images while in grid to avoid blurriness.

Checked - looked better; some images are still displayed blurry (but not as many as before) - need to test in production.

Screen Shot 2020-12-03 at 3.43.33 PM.png (654×1 px, 731 KB)

(2) Checked in commons betalabs

Not allowing panorama / landscape images to take up more than 35% (?) width of a row by cropping the left and right sides.

Looks acceptable.

Screen Shot 2020-12-03 at 3.40.19 PM.png (567×1 px, 515 KB)
Screen Shot 2020-12-03 at 3.40.39 PM.png (583×1 px, 542 KB)

(3) Checked in production - commons wmf.20.

Updating video results grid so that if there is only one result it doesn't span the entire width of the row.

beforewmf.20
Screen Shot 2020-10-05 at 10.53.56 AM.png (592×1 px, 185 KB)
Screen Shot 2020-12-03 at 3.49.40 PM.png (509×780 px, 110 KB)
Screen Shot 2020-12-03 at 2.20.22 PM.png (713×1 px, 350 KB)

(4) Checked in commons betalabs

avoid having only one image at the end of the grid. Occasionally looks like this:

Screen Shot 2020-10-05 at 10.58.02 AM.png (1×1 px, 1 MB)

On betalabs no examples of a marooned image are found - always looks as the following:
Search term - test.

Screen Shot 2020-12-03 at 4.12.18 PM.png (480×1 px, 78 KB)

In production (wmf.20) the search term - black flowers displays the issue:
Screen Shot 2020-12-03 at 4.10.38 PM.png (517×1 px, 341 KB)

(5) Checked in production - commons wmf.20.

Reducing width of quick view by 5% to make browsing the grid more functional while quick view is open.

Looks as Done.

Screen Shot 2020-12-03 at 4.56.36 PM.png (687×1 px, 1018 KB)

Moving to Design QA for @mwilliams to take a look. Except for (2) Note I did not find any issues, but it'd be great if @mwilliams would take an additional look.

Re-checked in production commons wmf.21 for the Acceptance Criteria:
(1)

Very few images are stretched to the point where they're extremely blurry. Extra-small images are shown at their natural size,
horizontally and vertically centered within a gray box.

beforecommons 21
mount Whitney
Screen Shot 2020-10-13 at 2.42.17 PM.png (717×1 px, 742 KB)
Screen Shot 2020-12-09 at 1.25.02 PM.png (611×1 px, 1000 KB)
lake
Screen Shot 2020-10-13 at 2.41.48 PM.png (679×1 px, 880 KB)
Screen Shot 2020-12-09 at 1.26.13 PM.png (676×1 px, 880 KB)
korat lilac kitten
Screen Shot 2020-10-13 at 2.42.46 PM.png (633×1 px, 751 KB)
Screen Shot 2020-12-09 at 1.27.01 PM.png (642×1 px, 677 KB)

(2)

Wide landscape-oriented images no longer take up an entire row on desktop

Click on the animated gif.

landscape_Quickview1.gif (720×1 px, 389 KB)

Note:There is one implication though - when the number of images in the result set is only one or two, an image does get stretched out in QuickView.

  • search terms - Paperbark individual flowers detail
Screen Shot 2020-12-09 at 1.40.59 PM.png (436×1 px, 103 KB)
Screen Shot 2020-12-09 at 1.41.08 PM.png (617×1 px, 487 KB)
  • betalabs example
Screen Shot 2020-12-03 at 4.08.51 PM.png (460×941 px, 97 KB)
Screen Shot 2020-12-03 at 4.09.00 PM.png (548×1 px, 422 KB)

A different example - when QuickView is fine, but the grid still stretches an image to fill in the row (search terms - korat lilac kitten).

Screen Shot 2020-12-09 at 1.27.22 PM.png (478×1 px, 398 KB)
Screen Shot 2020-12-09 at 1.27.01 PM.png (642×1 px, 677 KB)

(3)

Video results are always the same size as each other, and a dangling result on the last line doesn't stretch to span the entire row

beforewmf.20
Screen Shot 2020-10-05 at 10.53.56 AM.png (592×1 px, 185 KB)
Screen Shot 2020-12-03 at 3.49.40 PM.png (509×780 px, 110 KB)
Screen Shot 2020-12-03 at 2.20.22 PM.png (713×1 px, 350 KB)

When the result set has two items - the videos are not stretched and displayed correctly in the grid view and in the QuickView:

Screen Shot 2020-12-09 at 2.43.56 PM.png (619×1 px, 238 KB)
Screen Shot 2020-12-09 at 2.44.10 PM.png (726×1 px, 470 KB)

(4)

avoid having only one image at the end of the grid.

Done.
the search term - black flowers

beforecommons wmf.21
Screen Shot 2020-12-03 at 4.10.38 PM.png (517×1 px, 341 KB)
Screen Shot 2020-12-09 at 2.47.24 PM.png (562×1 px, 1 MB)

(5)

The QuickView panel is 45% width of the results container on desktop (formerly 50%)

I calculated the actual widths - 45% for the QuickView seems to be in place. Below is the screenshot just for an overview:

Screen Shot 2020-12-09 at 2.59.25 PM.png (746×1 px, 1 MB)

This is looking good!

@AnneT One unexpected behavior I hadn't noticed was that in some cases images are changing sizes when the quick view opens, that seems like something we should fix, probably fine if we wait for another release for that since the rest of these changes are a good improvement.

Chatted with @AnneT about this, going to move this to verify production and create a new ticket for the images changing sizes weirdly when the quick view opens!

Chatted with @AnneT about this, going to move this to verify production and create a new ticket for the images changing sizes weirdly when the quick view opens!

Thanks!
I re-checked in wmf.26 - all looks according to the specs.