This refactor adds a field to the homepage for a hero image loaded from Canto. If the Canto asset is specified, it will override any Google asset.
Adds the following to the client:
basic typings for Canto responses
Canto image used for homepage OpenGraph
extend homepage server tree so that image element is rendered on the server and can begin client load immediately
use Canto resizes to generate a srcset that browsers can use to determine if a smaller image size can be used (mostly for mobile)
uses Canto 100px size as a placeholder image
To test:
In Craft
Select a new hero image in the Canto field on the homepage
On client
Go to homepage
See that new image is in the hero
See that new image is in the OpenGraph tags in the header
Check the network tab, there should be a request under img for 2050, which is the largest Canto resize and the most likely to be loaded on a desktop since our page is fixed at 2000px wide.
Reload the page with a mobile device (Pixel 7 or an iPhone) selected from responsive mode
Check the network tab, see that a smaller size request was made (it will probably be 800)
Feedback
any noticeable performance difference between previous image and the new Canto image?
is the low-res 100px placeholder image working well as a placeholder, or is it distracting?
Test with: https://github.com/lsst-epo/rubin-obs-api/pull/311
This refactor adds a field to the homepage for a hero image loaded from Canto. If the Canto asset is specified, it will override any Google asset.
Adds the following to the client:
srcsetthat browsers can use to determine if a smaller image size can be used (mostly for mobile)To test:
imgfor2050, which is the largest Canto resize and the most likely to be loaded on a desktop since our page is fixed at 2000px wide.