Glider component

<x-curator-glider> renders a media item through Glide, building a signed URL with whatever transformations you ask for.

<div class="aspect-video w-64">
    <x-curator-glider
        class="object-cover w-auto"
        :media="$media"
        width="1024"
        format="webp"
    />
</div>

Component attributes

Attribute	Purpose
`media`	Required. A media id or a `Media` instance.
`loading`	Defaults to `lazy`.
`glide`	A raw Glide query string, if you would rather not use individual attributes.
`srcset`	An array of widths. Requires `sizes` to be set as well.
`sizes`	The `sizes` attribute paired with `srcset`.
`fallback`	Name of a registered fallback — see below.
`force`	Forces a signed URL. Useful for cloud disks, with possible performance cost.

The image's width and height attributes describe what Glide will serve. Give only one of them and the other is worked out from the media's aspect ratio, so the box reserves the right space and the layout doesn't shift when the image loads.

If the media item can't be found (a null value, or an id whose record was deleted) and no fallback is given, the component renders nothing. An id that no longer resolves is also logged as a warning.

Glide's own parameters are passed as attributes: background, blur, border, brightness, contrast, crop, device-pixel-ratio, filter, fit, flip, format, gamma, height, quality, orientation, pixelate, sharpen, width, and the watermark-* family. See Glide's quick reference for what each accepts.

Responsive images need both srcset and sizes:

<x-curator-glider
    :media="1"
    :srcset="['1024w', '640w']"
    sizes="(max-width: 1200px) 100vw, 1024px"
/>

Fallbacks

use Awcodes\Curator\Facades\Glide;
use Awcodes\Curator\Glide\GliderFallback;

public function register(): void
{
    Glide::registerGliderFallbacks([
        GliderFallback::make('thumbnail')
            ->alt('Placeholder')
            ->source('/images/placeholder.jpg')
            ->width(200)
            ->height(200),
    ]);
}

Everything but the name is optional and may be null, so a conditional value is fine.

Warning

A missing fallback is treated as a configuration mistake, not missing media, so the component throws. That covers a name that was never registered and a fallback that ends up without a source.

Reference it by name:

<x-curator-glider :media="1" fallback="thumbnail" />