Filament Curator (srcset not working)

Hi Folks,

I'm trying to figure out how to properly set multiple srcset/sizes for the following image:

<x-curator-glider
    class="absolute inset-0 -z-10 h-full w-full object-cover"
    :media="3"
    :srcset="['2000w','768w','480w']"
    sizes="(max-width: 2000px) 2000px, (max-width: 768px) 768px, (max-width: 480px) 480px"
    format="webp"
    quality="80"
    force="true"
    alt=""
/>

<x-curator-glider
    class="absolute inset-0 -z-10 h-full w-full object-cover"
    :media="3"
    :srcset="['2000w','768w','480w']"
    sizes="(max-width: 2000px) 2000px, (max-width: 768px) 768px, (max-width: 480px) 480px"
    format="webp"
    quality="80"
    force="true"
    alt=""
/>

I want a different size of image to be displayed dependent on what the current screen size is. With what I have set, no matter what screen size I have, it always sets to the largest option (2000) like so:

"http://website.test/curator/media/36ea4b52-f699-4491-b97c-e1a25e75efe0.jpg?fm=webp&h=1125&q=80&w=2000&s=edc3024d7bc5c7cc2a74cd46b56b1b09"

Have I set this wrong?

Filament•3y ago•

8 replies

nathan269_

Filament Curator (srcset not working)

Hi Folks,

I'm trying to figure out how to properly set multiple srcset/sizes for the following image:

<x-curator-glider
    class="absolute inset-0 -z-10 h-full w-full object-cover"
    :media="3"
    :srcset="['2000w','768w','480w']"
    sizes="(max-width: 2000px) 2000px, (max-width: 768px) 768px, (max-width: 480px) 480px"
    format="webp"
    quality="80"
    force="true"
    alt=""
/>

<x-curator-glider
    class="absolute inset-0 -z-10 h-full w-full object-cover"
    :media="3"
    :srcset="['2000w','768w','480w']"
    sizes="(max-width: 2000px) 2000px, (max-width: 768px) 768px, (max-width: 480px) 480px"
    format="webp"
    quality="80"
    force="true"
    alt=""
/>

Filament Curator (srcset not working)

Similar Threads

Filament Curator (srcset not working)

Similar Threads

Similar Threads

Similar Threads