Filament•16mo ago

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.

6 Replies

warpigOP•16mo ago

hi @josef

josef•16mo ago

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

warpigOP•16mo ago

Front end @josef But also on the table So both but i want to fix the front end first

josef•16mo ago

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

warpigOP•16mo ago

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?

warpigOP•16mo ago

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

Gaming

Programming

displaying responsive images using SpatieMediaLibrary plugin for filament