New System Thumbnail and Image Interface Preview

[benhaynes]

Source image (landscape):

Full width preview:

The problem is that Directus first creates a square cropped thumbnail... and then sets this to cover within the interface. This double crops it and looks horrible. We need to add a second system thumbnail that is set to contain (800 wide by 450 tall, ~60% quality, no cropping) and add an Interface option for fit: cover (or crop?) and contain (centered)... both of these would use the new un-cropped system thumbnail.

[rijkvanzanten]

We need to add a second system thumbnail that is set to contain (800 wide by 450 tall, ~60% quality, no cropping)

For implementation: the desired effect is most likely "inside" instead of "contain" to prevent blackboxing the image

[azrikahar]

cc @licitdev

[licitdev]

@benhaynes Is this what you're looking for?

[benhaynes]

@licitdev Yes! That solves one issue, which is that the thumbnail was double-cropping... thank you!

The other issue is that this version still crops the top and bottom. I think we want to give users the option to show an uncropped version, centered, and with "letter-boxing" to fill in the sides. To enable this uncropped option, I think we'll need to generate a second system thumbnail that uses "contain".

This would also allow the File Library to have an option controlling "Crop" / "Contain".

Does that make sense? I can answer questions or provide designs as needed!

[benhaynes]

Oh, I just realized we already have a BUNCH of system thumbs!! We can just use these, but should add options to the Interface/Layout for which you want.

https://github.com/directus/directus/blob/main/api/src/constants.ts#L3-L28

[benhaynes]

Aaaand, hopefully this helps, it should close this issue (although I'd like to have the same thing for the Card Layout).

#9628

[licitdev]

@benhaynes Tested your fix, works very well! 👍🏻👍🏻

Aaaand, hopefully this helps, it should close this issue (although I'd like to have the same thing for the Card Layout).

Not sure if this is what you meant, the crop / contain setting exists in the Card Layout.

[benhaynes]

Haha, of course it is... 🤦

This issue is all set then!