Display srcset with spatie/media-library

To display responsive images with the srcset attribute using the Spatie Media Library package, you need to ensure that you are generating responsive images correctly and then using the appropriate method to display them in your Blade view.

Here's a step-by-step solution:

1. Model Configuration

Ensure your model is set up to generate responsive images. You seem to be on the right track, but let's make sure it's correct.

use Spatie\MediaLibrary\HasMedia;
use Spatie\MediaLibrary\InteractsWithMedia;
use Spatie\MediaLibrary\MediaCollections\Models\Media;
use Spatie\Image\Manipulations;

class Program extends Model implements HasMedia
{
    use InteractsWithMedia;

    public function registerMediaConversions(Media $media = null): void
    {
        $this->addMediaConversion('IMAGE')
            ->withResponsiveImages()
            ->format(Manipulations::FORMAT_WEBP)
            ->nonQueued();
    }
}

2. Controller

In your controller, you are adding media to the collection correctly. Just ensure that this part is working as expected.

$program->addMediaFromUrl($image['url'])
        ->toMediaCollection('IMAGE');

3. Blade View

To display the responsive image with the srcset attribute, you should use the getFirstMedia method along with the img method provided by the Spatie Media Library.

<img src="{{ $program->getFirstMediaUrl('IMAGE') }}"
     srcset="{{ $program->getFirstMedia('IMAGE')->getSrcset() }}"
     sizes="(max-width: 600px) 480px, 800px"
     alt="Description of the image">

Full Example

Model (Program.php)

use Spatie\MediaLibrary\HasMedia;
use Spatie\MediaLibrary\InteractsWithMedia;
use Spatie\MediaLibrary\MediaCollections\Models\Media;
use Spatie\Image\Manipulations;

class Program extends Model implements HasMedia
{
    use InteractsWithMedia;

    public function registerMediaConversions(Media $media = null): void
    {
        $this->addMediaConversion('IMAGE')
            ->withResponsiveImages()
            ->format(Manipulations::FORMAT_WEBP)
            ->nonQueued();
    }
}

Controller (Controller.php)

$program->addMediaFromUrl($image['url'])
        ->toMediaCollection('IMAGE');

Blade View (view.blade.php)

<img src="{{ $program->getFirstMediaUrl('IMAGE') }}"
     srcset="{{ $program->getFirstMedia('IMAGE')->getSrcset() }}"
     sizes="(max-width: 600px) 480px, 800px"
     alt="Description of the image">

This setup ensures that your images are displayed responsively using the srcset attribute, leveraging the Spatie Media Library's capabilities. Make sure to replace "Description of the image" with an appropriate alt text for accessibility.