Support Automated Image Scaling with Client Hints

[gshel]

Description

The following changes allow users to follow the suggestions outlined in How to Scale an Image Automatically using Client Hints, specifically:

1. Scaling an image's width automatically (e.g. 100vw returns an image that is the same width as the viewport)
2. Avoiding cache misses through advanced usage, which allows users to determine the "jumps" between image resource sizes

Changes made:

1. Accept string or number Inputs for maxSize.height and maxSize.width via netlify.toml
2. Accept string Inputs for maxSize.crop via netlify.toml

Issue Ticket Number

Fixes https://github.com/cloudinary-community/netlify-plugin-cloudinary/issues/104

Type of change

• [ ] Bug fix (non-breaking change which fixes an issue)
• [X] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] This change requires a documentation update

Checklist

• [X] I have followed the contributing guidelines of this project as mentioned in CONTRIBUTING.md
• [X] I have created an issue ticket for this PR
• [X] I have checked to ensure there aren't other open Pull Requests for the same update/change?
• [X] I have performed a self-review of my own code
• [x] I have run tests locally to ensure they all pass
• [x] I have commented my code, particularly in hard-to-understand areas
• [x] I have made corresponding changes needed to the documentation

[netlify[bot]]

✅ Deploy Preview for netlify-plugin-cloudinary ready!

Name	Link
🔨 Latest commit	f8239aec2a880e6d708492c8239d9ada2b5dc452
🔍 Latest deploy log	https://app.netlify.com/sites/netlify-plugin-cloudinary/deploys/656f89a5d3b8cb000833b8ad
😎 Deploy Preview	https://deploy-preview-105--netlify-plugin-cloudinary.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[gshel]

Happy to split the unrelated documentation updates into a separate PR if it would make things easier 🎉

[colbyfayock]

thanks @gshel changes look good

im curious to hear about your use case with the crop mode. the reason i hadnt originally allowed that to be configurable was the thought that blanket cropping images across the site would present a challenge for the variety ways an image could be presented, where i was going to eventually allow someone to pass in parameters, such as a URL query params perhaps, to do that programmatically

as far as client hints - what do you think about added the option to allow people to inject the Client Hints meta tag to their site?

perhaps if they pass in an option such as:

clientHints: ["Dpr", "Viewport-Width", "Width"]

we would add the tags:

  <meta http-equiv="accept-ch" content="Dpr, Viewport-Width, Width">
  <meta http-equiv="delegate-ch" content="sec-ch-width https://res.cloudinary.com; sec-ch-dpr https://res.cloudinary.com; sec-ch-viewport-width https://res.cloudinary.com;">

based on those values

thoughts?

[colbyfayock]

oh, can you also update the documentation website table of configuration options? my intent is to eventually remove them from the README and instead only have them on the documentation site to avoid separate maintenance

https://github.com/cloudinary-community/netlify-plugin-cloudinary/blob/main/docs/src/pages/configuration.mdx

it should more or less be the same code that you have already updated, just need to copy and paste i believe