Page MenuHomePhabricator

[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
  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:
  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:
  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

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 28 2020, 6:55 PM
mwilliams added a comment.EditedSep 28 2020, 6:56 PM

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?
mwilliams updated the task description. (Show Details)Sep 28 2020, 6:56 PM
mwilliams updated the task description. (Show Details)Sep 28 2020, 6:58 PM
mwilliams added subscribers: egardner, AnneT.
mwilliams updated the task description. (Show Details)Oct 5 2020, 4:59 PM

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
lake
korat lilac kitten

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

AnneT updated the task description. (Show Details)Nov 20 2020, 8:29 PM

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.

(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.

(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

(4) Checked in commons betalabs

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

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


In production (wmf.20) the search term - black flowers displays the issue:

(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.

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
lake
korat lilac kitten

(2)

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

Click on the animated gif.


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
  • betalabs example

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

(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

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

(4)

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

Done.
the search term - black flowers

beforecommons wmf.21

(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:

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!

Etonkovidova updated the task description. (Show Details)Fri, Jan 15, 2:55 AM
Etonkovidova closed this task as Resolved.Fri, Jan 15, 2:58 AM

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.