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?

7 Replies

awcodes•12mo ago

I think your sizes and srcset are backwards. Usually they would be smallest to largest.

nathan269_OP•12mo ago

Yeah I had also tried that but had the same outcome

awcodes•12mo ago

Can you file an issue on GitHub? I’ll see if it’s a bug or not. A reproduction repo would help too.

nathan269_OP•12mo ago

In the example shown in the documentation (https://github.com/awcodes/filament-curator?tab=readme-ov-file), it's set as largest to smallest like so:

:srcset="['1024w','640w']"
sizes="(max-width: 1200px) 100vw, 1024px"

:srcset="['1024w','640w']"
sizes="(max-width: 1200px) 100vw, 1024px"

My images are uploaded/stored in an s3 bucket. Even with using the exact same example in the docs, the image is always the largest width (1024px). I'll report an issue.

GitHub

GitHub - awcodes/filament-curator: A media picker plugin for Filame...

A media picker plugin for Filament Panels. Contribute to awcodes/filament-curator development by creating an account on GitHub.

awcodes•12mo ago

Like I said. please file an issue on github and i'll look into as soon as I can. 🙂

nathan269_OP•12mo ago

Issue has now been submitted: https://github.com/awcodes/filament-curator/issues/380

GitHub

Filament Curator Srcset Not Changing Image Sizes · Issue #380 · awc...

Filament Version 3.1.20 Plugin Version 3.2.4 PHP Version 8.2 Problem description No matter what my screen size is set to, whether it's a small screen, medium, large, etc. The image size doesn&#...

awcodes•12mo ago

thank you.

Gaming

Programming

Filament Curator (srcset not working)