Image resize for srcset

[realcgslav]

Sorry if this is silly question. I'm completely new in Laravel world.

Would be possible to resize images in Jigsaw to have ability to use them for img srcset tag?

Something like this one: https://medium.com/codefield-community/responsive-images-and-progressive-image-loading-with-laravel-a67d5d1f42c5 or here: https://docs.spatie.be/laravel-medialibrary/v7/responsive-images/getting-started-with-responsive-images/#generating-the-necessary-images but not on upload but... Before build?

[anthonyterrell]

Welcome to the Laravel world, @realcgslav 👋

This is not a silly question. Yes, this is possible with Jigsaw using its built-in Event Listeners. Within the bootstrap.php file you can add:

// bootstrap.php
$events->beforeBuild(function ($jigsaw) {
   // your code here that resizes images
});

ImageMagick is a popular Open Source tool with decades of great documentation and examples out there. Once you determine your file sizes and their location, you will be able to use them with the srcset attribute.

Here is a little more information about the srcset attribute

[sytheveenje]

Hi @anthonyterrell,

I'm also wondering how to do this. I created a function that loops trough my collection of posts (which are .md files) and I want to replace all images with responsive images.

I want to replace <img src="assets/images/jigsaw.png"> with <img src="/images/tiny/jigsaw.png" srcset="images/medium/jigsaw.png">

I wrote this:

$events->afterCollections(function (Jigsaw $jigsaw) {
    
    $posts = $jigsaw->getCollection('posts');

    foreach($posts as $post) {

        $dom = new DOMDocument();
        $dom->loadHTML($post->getContent());

        foreach ($dom->getElementsByTagName('img') as $img) {

            $src = $img->getAttribute('src');

            $tiny_src = str_replace('/assets/images/', '/images/tiny/', $src);

            $medium_src = str_replace('/assets/images/', '/images/medium/', $src);

            $img->setAttribute('src', $tiny_src);
            $img->setAttribute('srcset', $medium_src);
        }

        dd($dom); // Outputs the html I want
    }

});

But how can I publish my modifications to the build?

[GenieTim]

Publishing modifications can be done using the method ->setContent($domstring), i.e.:

$events->afterCollections(function (Jigsaw $jigsaw) {
    
    $posts = $jigsaw->getCollection('posts');

    foreach($posts as $post) {

        $dom = new DOMDocument();
        $dom->loadHTML($post->getContent());

        foreach ($dom->getElementsByTagName('img') as $img) {

            $src = $img->getAttribute('src');

            $tiny_src = str_replace('/assets/images/', '/images/tiny/', $src);

            $medium_src = str_replace('/assets/images/', '/images/medium/', $src);

            $img->setAttribute('src', $tiny_src);
            $img->setAttribute('srcset', $medium_src);
        }
        $post->setContent($dom->saveHTML());
    }

});