displaying responsive images using SpatieMediaLibrary plugin for filament

i installed this package a few days ago and updated my Post model accordingly, everything went okay, ran the migrations to no problem, etc but i don't understand how to utilize the responsive images that get created.

from the form i can preview the image and the responsive images all of them are generated on my storage folder, but once i get to the front-end those responsive images arent attached on the page.

output on the html:

<img src="http://localhost/storage/7/S1WoMcZoiOPEgrKLgDH5jVyqtZfG4Q-metaYnAtMTk4Ni1hbGJ1bXMud2VicA==-.webp">

<img src="http://localhost/storage/7/S1WoMcZoiOPEgrKLgDH5jVyqtZfG4Q-metaYnAtMTk4Ni1hbGJ1bXMud2VicA==-.webp">

Post.php

    public function registerMediaConversions(Media $media = null): void
    {
        $this
            ->addMediaConversion('preview')
            ->fit(Manipulations::FIT_CROP, 300, 300)
            ->nonQueued();
    }
}

    public function registerMediaConversions(Media $media = null): void
    {
        $this
            ->addMediaConversion('preview')
            ->fit(Manipulations::FIT_CROP, 300, 300)
            ->nonQueued();
    }
}

this is what i have on the form:

SpatieMediaLibraryFileUpload::make('thumbnail')
    ->collection('thumbnails')
    ->responsiveImages()
    ->required(),

SpatieMediaLibraryFileUpload::make('thumbnail')
    ->collection('thumbnails')
    ->responsiveImages()
    ->required(),

this is what i have on the table function and i can't see the thumbnail there,

  SpatieMediaLibraryImageColumn::make('thumbnail'),

  SpatieMediaLibraryImageColumn::make('thumbnail'),

im using version : * 10.11.3 of the plugin and im currently at v2.17.52 of filament.

displaying responsive images using SpatieMediaLibrary plugin for filament

<img src="http://localhost/storage/7/S1WoMcZoiOPEgrKLgDH5jVyqtZfG4Q-metaYnAtMTk4Ni1hbGJ1bXMud2VicA==-.webp">

<img src="http://localhost/storage/7/S1WoMcZoiOPEgrKLgDH5jVyqtZfG4Q-metaYnAtMTk4Ni1hbGJ1bXMud2VicA==-.webp">

Post.php

    public function registerMediaConversions(Media $media = null): void
    {
        $this
            ->addMediaConversion('preview')
            ->fit(Manipulations::FIT_CROP, 300, 300)
            ->nonQueued();
    }
}

    public function registerMediaConversions(Media $media = null): void
    {
        $this
            ->addMediaConversion('preview')
            ->fit(Manipulations::FIT_CROP, 300, 300)
            ->nonQueued();
    }
}

this is what i have on the form:

SpatieMediaLibraryFileUpload::make('thumbnail')
    ->collection('thumbnails')
    ->responsiveImages()
    ->required(),

SpatieMediaLibraryFileUpload::make('thumbnail')
    ->collection('thumbnails')
    ->responsiveImages()
    ->required(),

this is what i have on the table function and i can't see the thumbnail there,

  SpatieMediaLibraryImageColumn::make('thumbnail'),

  SpatieMediaLibraryImageColumn::make('thumbnail'),

im using version : * 10.11.3 of the plugin and im currently at v2.17.52 of filament.

displaying responsive images using SpatieMediaLibrary plugin for filament

Similar Threads

displaying responsive images using SpatieMediaLibrary plugin for filament

Similar Threads

Similar Threads

Similar Threads