warpig's avatar
warpig
OP
2 years ago
Level 12

FIlament SpatieMediaLibrary how to use responsive images

Since installing filament spatie media i am displaying images like below

src="{{ $latestPost->getFirstMediaUrl('thumbnails') }"

when i inspect the image it is not a responsive version of the file i uploaded. in PostResources:

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

below is the output where no prefix is added, it's the same image that i initially uploaded.

<img class="relative lg:absolute lg:inset-0 w-full h-96 lg:h-full object-top object-cover" src="http://localhost/storage/3/kfq4BXgMugJ2ytisBXobGLl1lm1xVV-metaYnAtMTk4Ni1hbGJ1bXMud2VicA==-.webp" alt="Thumbnail of the latest post">

Post.php

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

it ends up being a 644x430 webp image. shouldn't this be of a smaller size since im on the mobile viewport in firefox? thanks

0 likes
1 reply
warpig's avatar
warpig
OP
2 years ago
Level 12

just bumping the thread with some advances, im making some progress unsure about the accuracy but it's going somewhere it seems.

I changed the way i produce the output of images, stored the images in a variable so i could use that and make use of the src and srcset of the img tag.

as of now i can't get to print the srcset of images generated by the plugin.

postcontroller

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

home.blade.php

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

outer html

<img class="relative lg:absolute lg:inset-0 w-full h-96 lg:h-full object-top object-cover" src="<img  srcset=" http:="" localhost="" storage="" 9="" responsive-images="" pvhve57932bqjvpkkjdxbrtw0yrwcc-metaynatym9jlndlyna%3d-___media_library_original_644_430.webp="" 644w,="" pvhve57932bqjvpkkjdxbrtw0yrwcc-metaynatym9jlndlyna%3d-___media_library_original_538_359.webp="" 538w,="" pvhve57932bqjvpkkjdxbrtw0yrwcc-metaynatym9jlndlyna%3d-___media_library_original_450_300.webp="" 450w,="" pvhve57932bqjvpkkjdxbrtw0yrwcc-metaynatym9jlndlyna%3d-___media_library_original_377_252.webp="" 377w,="" pvhve57932bqjvpkkjdxbrtw0yrwcc-metaynatym9jlndlyna%3d-___media_library_original_315_210.webp="" 315w,="" pvhve57932bqjvpkkjdxbrtw0yrwcc-metaynatym9jlndlyna%3d-___media_library_original_264_176.webp="" 264w,="" pvhve57932bqjvpkkjdxbrtw0yrwcc-metaynatym9jlndlyna%3d-___media_library_original_220_147.webp="" 220w,="" pvhve57932bqjvpkkjdxbrtw0yrwcc-metaynatym9jlndlyna%3d-___media_library_original_184_123.webp="" 184w,="" pvhve57932bqjvpkkjdxbrtw0yrwcc-metaynatym9jlndlyna%3d-___media_library_original_154_103.webp="" 154w,="" data:image="" svg+xml;base64,pcfet0nuwvbfihn2zybqvujmsumgii0vl1czqy8vrfreifnwryaxljevl0voiiaiahr0cdovl3d3dy53my5vcmcvr3jhcghpy3mvu1zhlzeums9eveqvc3znmteuzhrkij4kphn2zyb2zxjzaw9upsixljeiihhtbg5zpsjodhrwoi8vd3d3lnczlm9yzy8ymdawl3n2zyigeg1sbnm6egxpbms9imh0dha6ly93d3cudzmub3jnlze5otkvegxpbmsiihhtbdpzcgfjzt0ichjlc2vydmuiihg9ijaicib5psiwiib2awv3qm94psiwidagnjq0idqzmci+cgk8aw1hz2ugd2lkdgg9ijy0ncigagvpz2h0psi0mzaiihhsaw5romhyzwy9imrhdge6aw1hz2uvanblzztiyxnlnjqslzlqlzrbqvfta1pkumdbqkfrrufzqujnqufely9nqtdrmupguvzsufvqb2damlf0yw5cbfp5qjjnuzr3sunomwmybhvaeujku2tjz1nsqkzseuiyt0rbcexdqnhkv0zzyvhsnulemgdpvefllzlzqvf3qurbz0leqwdjref3turcqu1eqkfvsujrvuvcqvvlqndjr0nbd0teqxdmq2dzterrnfnfqtbprve0ten4qvdfqkvurkjvvkzrd1bgegdxrkjnu0zcvvuvoxnbuxdfrejbuuzcqvvkqlfvskzbmexeulfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvrkjrvs84quffuwdbrlfbz0f3rvjbqulsqvfnukfml0vbqjhbquffrkfrrujbuuvcqufbqufbqufbqufcqwdnrujrwuhdqwtlqy8vrufmvvfbqulcqxdnq0jbtuzcuvffqufbqmzrrunbd0ffrvfvu0lurkjcae5swvfjawnsuxlnwkdoq0noq3njrvzvdeh3skroawnvsupdaflyr0jryuptww5lq2txtkrvmk56zzvpa05fulvasfnfbetvmvjwvmxkwvdwcgpar1ztwjjocgfutjbkwfozzuhsnmc0u0zob2vjavlxu2s1u1zscgvzbvpxaw82u2xwcwvvcwfxexm3uzf0cmu0dwjyq3c4vez4c2zjewnyuza5vfyxdgzzmmryadr1ugs1zwjunk9ucthmtho5ufgyos9qnst2l0vbqjhcqufnqkfrrujbuuvcqvffqufbqufbqufcqwdnrujrwuhdqwtlqy8vrufmvvjbqulcqwdrruf3uuhcuvffquffq2r3qujbz01sqkfvae1rwvnrvkviwvhfvelqs0jdqljda2fhehdra2pnmux3rldketbrb1dkrfrosmzfwedca2fkawnvs1nvmu5qyzrpvhbeukvwr1iwaeptbe5vvlzawfdgbgfzmljswm1kb2fxchpksfyyzdnonwvvs0rosvdhadrpsmlws1rssldxbdvpwm1xs2pws1dtcdzpchfys3p0tfcydddpnxvzter4tvhhedhqsnl0tfqxtlhxmtlqwjj1tgo1t1htnstqcdz2tho5ufgyos9qnst2l2fbqxdeqvfbq0vrtvjbrdhbk0wwq2ezrgnychdwsvbgzlfwnwv4dee5wjj0ekk4ddflrjj2wkzwu2vhoctznzzusznkbxbvzwxyrwnnbuiyz2rhoctsy2recluxs0uynwhluu1umxjdehz6sg9yago0qytlcg9ndke2ee1prnhyzmlxm05qutvovgt2seh3m3uvrgw4uk5bwxr2m2lswe43wnrxwxiyttd3mtrml3rxenvramtgqvrtcznjt1k0yldfylrmmljgbhl3tmjsanpjce0vumi0vmvmtdnxl0jzdxfubgzpalvrs0j4wepknmpumfbrbjq1l0vmvxrhofjyvu11efuzrwzmvldnce04mzazeezlywzbognmn1ezwezoswk1awewz2xpodlpuzu1snjyam9qytjsei8vmle9psi+cgk8l2ltywdlpgo8l3n2zz4="32w&quot;" onload="window.requestAnimationFrame(function(){if(!(size=getBoundingClientRect().width))return;onload=null;sizes=Math.ceil(size/window.innerWidth*100)+'vw';});" sizes="1px" width="644" height="430">

Please or to participate in this conversation.