Extend umb-imaging-thumbnail with a property to disable checkerboard background

[frederiktoft]

After the HMAC requirement for images in the backoffice was introduced, we have been struggling a bit with showing images as it took a lot of code to do this with UmbImagingRepository .
After replies in this thread:

https://forum.umbraco.com/t/webp-middleware-and-hmacsecretkey/7786

It was recommended to use umb-imaging-thumbnail , but it has a major flaw. The reason is that shows a checkerboard pattern in the background of transparent images on purpose. This makes the component effectively useless used in places as block grid elements where its supposed to show a representation of the content that the end user sees.

So extending umb-imaging-thumbnail with a property/parameter to disable the checkerboard background, would make this component far more useful. Especially if its the component thats officially recommend to be used in the backoffice, it would make sense to do so.

[iOvergaard]

So extending umb-imaging-thumbnail with a property/parameter to disable the checkerboard background, would make this component far more useful. Especially if its the component thats officially recommend to be used in the backoffice, it would make sense to do so.

It's not a bad idea to extend the component - good idea.

After the HMAC requirement for images in the backoffice was introduced

It's been possible to enable HMAC since Umbraco 12: #14181

The difference from v12 to v17 is that an HMAC salt is being generated by default and placed into the appsettings template for new installs. Of course, you can remove the generated HMAC again to get back to the old behavior. I just want to make sure you are aware of that fact.

Packages must be aware of HMAC to work on all setups, and in fact, we discovered a few packages that weren't compatible with HMAC that had to be upgraded. But you know your setup the best and can turn on and off features as it works best for you.

[frederiktoft]

Thanks for the reply, but having HMAC enabled is more future proof and basically all but a requirement in name I take it?
So either we go to great lengths with UmbImagingRepository, or umb-imaging-thumbnail is extended. I have also tried umb-media-image which respects transparent backgrounds, but does not support cropping, so that doesnt help a lot.
Either way, I think I dont have any other choice than using UmbImagingRepository, and wait until there is a better more streamlined option in the future. I just wanted to make the suggestion here as I think its an "easy win" with minimal code to make it more versatile.
Its a lot of work just showing an image.

[iOvergaard]

HMAC is more robust in terms of protecting your site from DDoS requests that attempt to overload your CPU by changing the parameters for ImageSharp to generate thousands or millions of new thumbnails. But you know your site best; you may have blocked those URLs or sit behind a firewall, or are willing to run the risk. If that's the case, by all means turn off HMAC to make your life simpler.

Its a lot of work just showing an image.

Agreed. Apart from the chequered background, what else can we do to optimise this element?

[frederiktoft]

We intend to support HMAC as that is the most logical to do, both for future proofing whatever Umbraco might server later, and for security.
Right now we just want umb-imaging-thumbnail to be able to show an image. With or without a checkered background in transparent images. It already respects cropping so its quite close. If it could also be asked to convert image to, say webp that would be the icing on the cake. But if we can hide the checkered background, that would help immensely. Or get umb-media-image to support crops.

[iOvergaard]

That sounds reasonable. Format is already supported by the format="webp" attribute, by the way.

[iOvergaard]

Thanks again for raising this, @frederiktoft — it's in. 🎉

#23178 (merged) makes the checkerboard opt-out, and tidies the component up along the way:

• Disable the checkerboard with a CSS custom property:

  umb-media-thumbnail { --umb-media-thumbnail-background: none; }

  It's a custom property, so it inherits — set it on any ancestor and every thumbnail underneath picks it up (handy inside a block grid). If you need more control over the image itself, there's now an ::part(img) as well.
• We also took the opportunity to give it a clearer, forward-looking name: umb-media-thumbnail. The old umb-imaging-thumbnail keeps working as an alias, so nothing breaks for existing code.

The upshot is you shouldn't need to drop down to UmbImagingRepository by hand anymore — the component does the cropping and respects transparency, so "just showing an image" is back to a one-liner. 🙂

This ships in 17.6 (and 18.1 on the v18 line). I'm also adding a short Working with Media guide to the docs — covering your exact block-view-with-a-media-key scenario — which goes live alongside the release.

Let me know how it works out once 17.6 lands!

[frederiktoft]

Thank you very much! 🙏 This is a great addition and it will cut down my own code considerably, both in size and complexity. I'm looking forward to that release.

[iOvergaard]

We are introducing a new alias - <umb-media-thumbnail> - to supplement the existing media terminology. You could take our source code and register under that alias, then once you upgrade to 17.6, you can delete your file again and use the built-in version.

[Alkaersig]

This is awesome! Great work, it will make working with images in the BackOffice so much smoother moving forward.