Lbry-desktop: Card & Thumbs Have Different Background Size Properties

[ElectronEsq]

The CSS for the cards and thumbs are diffrrent. This means that what people see in the thumb area isn't the same as what they will see in cards.

*Card: *

.card__media {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-color: var(--color-placeholder);
}

Thumb:

.thumbnail-preview {
    height: var(--thumbnail-preview-height);
    width: var(--thumbnail-preview-width);
    border: var(--thumbnail-preview-border);
}

As another option, you could take out the size and width from the thumb and get the correct aspect ratio and contained in the css max height/width set area. However, this is not how it will look as a card unless the card CSS is the same.

.thumbnail-preview {
    height: var(--thumbnail-preview-height);
    /* width: var(--thumbnail-preview-width); */
    /* border: var(--thumbnail-preview-border); */
}

*Took out the border for easier visualisation of this issue.

[seanyesmunt]

I can't seem to reproduce this. I've tried several thumbnails and they appear the same in the tool and in a card. Was this on master?

[seanyesmunt]

@tzarebczan are you able to reproduce?

[ElectronEsq]

@seanyesmunt Did you use thumbs with different aspect ratios, such as 1:1?

[seanyesmunt]

@Invariant-Change Huh. Guess I should have just used the thumbnail from your example. I see it now. Working on a fix. Will go out in 0.25.0

[seanyesmunt]

@Invariant-Change do you think we should stretch to fit like the current behavior in the thumbnail css? Or zoom in if necessary to the image isn't the correct aspect ratio? I would probably say the latter (current card behavior) but I'm not sure.

[ElectronEsq]

Sorry for the long delay - Relying on dodgy mobile internet until the new line is installed.

All have pros and cons.

Zoom fills all the space but chops parts of the image off, stretch makes the image look funny and original aspect ratio leaves blank areas if it's not the correct aspect ratio.

Maybe zoom is best and applied to both!?

[kauffj]

I missed this when it was originally filed. Great catch @Invariant-Change, really appreciate your eye for correctness and ability to make contributions like this.

[kauffj]

It's worth noting as well that there are no official instructions on metadata image sizing or ratios. While it's good for our app to be consistent, we should expect other apps to render these images in different ways. Given this, my opinion is the widget itself should always show the full image and never zoom or crop it.

[tzarebczan]

We do recommend a size and aspect ratio on the publish page.

[ElectronEsq]

@kauffj That was my initial thinking. But then I was thinking how the app world look if many images didn't completely fill the card. But now I'm thinking the full image again, haha!

Hard to know which solution will look best. I'll make a preview of the app with all three scenarios, then maybe we can ask the community to vote and/or feedback? Anything like this is always a good excuse to get the community involved. Or we could just ask @ykris45 to completely redesign the app with his unique styling? 😋

[kauffj]

I like polling, but not as a way to resolve a design issue like this that requires a lot of context (and some design skill) to even be able to vote on usefully. It's not as simple as "which looks better or do you like more".

To me the resolution is this:

• If we're making an _official recommendation_ that all publishers and application designers use a specific aspect ratio, the UI should display at this ratio.
• If we're simply suggesting a size then we should not enforce the display to be at a certain ratio.

To explain my logic, I think it is misleading to the user to display their image in a trimmed or cropped fashion when that is not what is actually being uploaded to the network, nor is it the way that other apps will necessarily display it. If the UI shows me only 2/3rd the height of an image, I would be surprised to learn other sites displayed the whole thing.