Search code examples
phphtmllaravellaravel-medialibrary

Laravel media-library responsive images

I'm attempting to implement the responsive images feature of Laravel Spatie Media Library, but for some reason, it's not generating the images. I've tried registering a media conversion and applying withResponsiveImages there, as well as directly after $model->addMedia(), and even downgrading to different versions of media-library, but none of these solutions have resolved my issue.

How I upload the image

  $request->validate([
        'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
    ]);

    $image = Image::create([
       'name' => $request->image->getClientOriginalName()
    ])
    ->addMedia($request->image)
    ->withResponsiveImages()
    ->toMediaCollection();

How I retrive the model to display the responsive images

    $image = Image::first();
    return view('welcome', compact('productsForMenu', 'productsForSlider','image'));

And how I display the image

    {{$image->getFirstMedia()}}

The image is uploaded under /public/media/id/image.jpg, but no responsive images are generated. When I display it, the srcset attribute isn't applied. What could I be doing wrong? Is it a media-library-pro feature?

If this don't work, what alternatives do I have to create responsive images?

Solution

  • I had similiar issues, and to fix it make sure you have the php-exif, php-gd extensions installed first of all.

    Then secondly media library queues all conversions, so you must either run php artisan queue:work or set QUEUE_CONVERSIONS_BY_DEFAULT to false in your env