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">

<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();
    }
}

    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(),

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'),

  SpatieMediaLibraryImageColumn::make('thumbnail'),

  SpatieMediaLibraryImageColumn::make('thumbnail'),

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

warNuttahOP•8/21/23, 4:29 PM

hi @josef

josef•8/22/23, 4:06 AM

Ok, just to understand. Are you not getting the correct images in the frontend, or in the table?

warNuttahOP•8/22/23, 2:23 PM

Front end

warNuttahOP•8/22/23, 2:23 PM

@josef

warNuttahOP•8/22/23, 2:25 PM

But also on the table

warNuttahOP•8/22/23, 2:25 PM

So both but i want to fix the front end first

josef•8/23/23, 6:37 AM

How are you getting the images on the frontend? Can you share some code? You're using a collection, but for the image column you're not specifying the collection

Jjosef How are you getting the images on the frontend? Can you share some code? You're ...

warNuttahOP•8/23/23, 9:08 PM

getting the images from my controller like this:

        $latestPosts = Post::where('active', '=', 1)
            ->where('published_at', '<', Carbon::now())
            ->orderBy('published_at', 'desc')
            ->limit(3)
            ->get();

        $postImages = $latestPosts->each(function ($post) {
            $post->images = $post->getMedia('thumbnails')->map(fn ($image) => [
                        'src' => $image->getUrl(),
                        'srcSet' => $image->getSrcset('preview')
                    ]);
                    return $post;
                });

        $latestPosts = Post::where('active', '=', 1)
            ->where('published_at', '<', Carbon::now())
            ->orderBy('published_at', 'desc')
            ->limit(3)
            ->get();

        $postImages = $latestPosts->each(function ($post) {
            $post->images = $post->getMedia('thumbnails')->map(fn ($image) => [
                        'src' => $image->getUrl(),
                        'srcSet' => $image->getSrcset('preview')
                    ]);
                    return $post;
                });

blade:

        <img
            class="relative lg:absolute lg:inset-0 w-full h-96 lg:h-full object-top object-cover"
            src="{{ $latestPost->getMedia('thumbnails') }}"
            alt="Thumbnail of the newest post"
            srcset="{{ $postImages->first()->getFirstMedia('thumbnails')->getSrcset() }}"
        />

        <img
            class="relative lg:absolute lg:inset-0 w-full h-96 lg:h-full object-top object-cover"
            src="{{ $latestPost->getMedia('thumbnails') }}"
            alt="Thumbnail of the newest post"
            srcset="{{ $postImages->first()->getFirstMedia('thumbnails')->getSrcset() }}"
        />

I think this is working, but i have other variables like $categories which uses another table "categories" along with eloquent and sql conditions providing me with a "distinct result" for the homepage but how could i use $postImages for other variables? trait? how would that look like?

warNuttahOP•8/23/23, 9:09 PM

but yeah i think it worked might be the case for another question?

warNuttahOP•8/23/23, 9:23 PM

displaying responsive images using SpatieMediaLibrary plugin for filament

Similar Threads

Similar Threads

Similar Threads