Responsive <img> component with srcset and sizes based on curations

[smzr]

Curator provides a <x-curator-curation> Blade component for outputting cropped media using a defined curation. There is also a <x-curator-glider> blade component, which allows images to be delivered at different sizes using srcset and sizes.

Currently, there’s no out-of-the-box way to use multiple curations to generate a srcset for an image. I think in modern responsive design workflows, it would be beneficial to have the ability to define a set of crops and adjust the focal point on each rather than generating the crops with glider.

Something like this, for example

<x-curator-responsive-image
    :media="$media"
    :curations="['banner-sm', 'banner-md', 'banner-lg']"
    sizes="100vw"
/>

Which would produce

<img
    src="https://example.com/media/square-sm.jpg"
    srcset="
        https://example.com/media/banner-sm.jpg 400w,
        https://example.com/media/banner-md.jpg 750w,
        https://example.com/media/banner-lg.jpg 1500w
    "
    sizes="100vw"
/>

You could then also lock down the media picker to require / include the curations, or start with the default crops generated for each curation so it can optionally be edited to adjust focal point.