[Jupiter] Bad proportions for thumbnail css in search results

[pbinkley]

Landscape-mode thumbnail are displayed with their true proportions, but portrait-mode ones are squashed to a square. Presumably we want them to appear in their true proportions.

Thumbnail:

Screenshot of search results:

[pbinkley]

This problem exists in the main item page as well as in search results.

[weiweishi]

Confirmed with @leahvanderjagt and @abombak that the views (both search and item view) should:

• recognize the orientation of the thumbnail image and present accordingly in landscape/portrait mode
• critical to have thumbnails for reports/documents are presented properly with their letter-size proportion (350x270 or 4x3)
  
• landscape thumbnails should be presented as is.
• for cases that the images are out of proportion, can crop/trim the image to fit into the maximum length/width allowed.

[pbinkley]

So "out of proportion" is defined as having the short dimension < 270 when the long dimension is converted to 350? And cropping should be centered?

[weiweishi]

it would be more like

• long dimension would be a maximum of 350 (or on the view pages, a fragment of 350, such as 175px)
• if the short dimension exceeds 270, (or relative to the long dimension, such as 135 px), trim/crop the short dimension to fit 135 px.

The maximum dimension of the thumbnail would be 175x135 instead of a square of 150x150. I hope this makes sense?

[weiweishi]

Update this file: https://github.com/ualbertalib/jupiter/blob/master/app/assets/stylesheets/image.scss#L2-L3
with 175x135 or 4x3 dimensions.

[pgwillia]

I found an alternate solution. https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
The results look like this:



Is this acceptable?

[murny]

Might have to be careful with this approach?
https://caniuse.com/#feat=object-fit

Looks like this doesn't work on IE11 and Some Edge (<15) versions 😢 .

Which might be a fair amount of users? (From looking at google analytics it looks like since jupiter launched we get about 5.8% of users using IE and 3.8% using Edge (good news is 75% of edge users are on the higher supported versions), so that's almost 8% of our user base?)

[pgwillia]

Thanks for that. Used the solution provided.