Use with Laravel Livewire, Swup, Turbolinks and BarbaJS

[aerni]

I released an improved version of this script as a package: https://github.com/aerni/alpine-statamic-responsive-images

If you use this addon in conjunction with Laravel Livewire or a pjax library like Swup, Turbolinks or BarbaJS, your images won't load on subsequent requests. This is due to the observer script only being executed on the first request. You can get around this issue with a simple Alpine plugin. Simply replace the stock script with the script below.

In your responsiveImage.blade.php view:

@once
    <script>
        document.addEventListener('alpine:init', () => {
            const responsiveResizeObserver = new ResizeObserver((entries) => {
                entries.forEach(entry => {
                    const imgWidth = entry.target.getBoundingClientRect().width;
                    entry.target.parentNode.querySelectorAll('source').forEach((source) => {
                        source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw';
                    });
                });
            });

            Alpine.directive('responsive-image', (picture, {}, { cleanup }) => {
                responsiveResizeObserver.onload = null;
                responsiveResizeObserver.observe(picture);

                cleanup(() => {
                    responsiveResizeObserver.disconnect()
                })
            })
        })
    </script>
@endonce

<picture x-data x-responsive-image>
    @foreach (($sources ?? []) as $source)
        @isset($source['srcSetAvif'])
            <source
                type="image/avif"
                @isset($source['media']) media="{{ $source['media'] }}" @endisset
                srcset="{{ $source['srcSetAvif'] }}"
                @if($includePlaceholder ?? false) sizes="1px" @endif
            >
        @endisset
        @isset($source['srcSetWebp'])
            <source
                type="image/webp"
                @isset($source['media']) media="{{ $source['media'] }}" @endisset
                srcset="{{ $source['srcSetWebp'] }}"
                @if($includePlaceholder ?? false) sizes="1px" @endif
            >
        @endisset

        <source
            @isset($source['media']) media="{{ $source['media'] }}" @endisset
            srcset="{{ $source['srcSet'] }}"
            @if($includePlaceholder ?? false) sizes="1px" @endif
        >
    @endforeach

    <img
        {!! $attributeString ?? '' !!}
        src="{{ $src }}"
        @unless (\Illuminate\Support\Str::contains($attributeString, 'alt'))
        alt="{{ $asset['alt'] ?? $asset['title'] }}"
        @endunless
        @isset($width) width="{{ $width }}" @endisset
        @isset($height) height="{{ $height }}" @endisset
    >
</picture>

[aerni]

I released an improved version of this script as a package: https://github.com/aerni/alpine-statamic-responsive-images

[riasvdv]

Nice! Feel free to PR this to the readme under a "Using with alpine.js" section