Improve Thumbnails in Content Search Screen

[fishsmith]

Define the Problem

Poor thumbnail quality for smaller images and SVGs
Smaller images are pixelated in thumbnail view (converted to 500px x 500px).
We shouldn't be converting SVG images to WebP. SVGs should always stay SVG to maintain their vector format.

Who's Facing the Problem?

Content Contributors

Screenshot or Video

Relevant Links and Resources

No response

Assumptions & Initiation Needs

No response

[fishsmith]

Also, the thumbnails shouldn't be cut off. The background should have the size set to "background-size: contain;" NOT "background-size: cover;"

[fishsmith]

[zJaaal]

Note to QA

Right now there's no way to know at a contentlet level, the sizes of an image to identify if it is an Icon or a big Image. This means that I didn't find a way to apply the same styles for small images that are not SVGs, right now this fix just work for SVGs which are mostly icons.

[rjvelazco]

Passed Internal QA

• Tested on docker image: [dotcms/dotcms:trunk_ b00ffaf]

Video

iqa-29098-improve-thumbnails-in-content-search-screen.mov

[bryanboza]

Fixed, tested on the latest trunk and now it is working better regarding small images and SVG.