Alpine Statamic Responsive Images

This Alpine plugin replaces the inline script of the Statamic Responsive Images addon with a simple to use x-statamic-responsive-images directive. Using this directive resolves the issue of images not loading on subsequent page loads when using Statamic Responsive Images together with Laravel Livewire or pjax libraries like Swup, BarbaJS, and Turbolinks.

You can also use this plugin if you simply like the idea of using a nice Alpine directive instead of the inline script in the responsiveImage.blade.php view.

This addon has been tested with v3.12.2 of Statamic Responsive Images.

Installation

You can use this plugin by either including it from a <script> tag or installing it via NPM:

Via CDN

You can include the CDN build of this plugin as a <script> tag, just make sure to include it before Alpine's core script.

<!-- Alpine Resize -->
<script defer src="https://cdn.jsdelivr.net/npm/@aerni/[email protected]/dist/cdn.min.js"></script>

<!-- Alpine Core -->
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

Via NPM

You can install this plugin via NPM for use inside your bundle:

npm install @aerni/alpine-statamic-responsive-images

Then initialize it in your bundle:

import Alpine from 'alpinejs'
import statamicResponsiveImages from '@aerni/alpine-statamic-responsive-images'

Alpine.plugin(statamicResponsiveImages)

Usage

Replace the data-statamic-responsive-images attribute with x-data and x-statamic-responsive-images. Then delete the original inline script.

- @once
-    <script>
-        window.addEventListener('load', function () {
-            window.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';
-                    });
-                });
-            });
-
-            document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
-                responsiveResizeObserver.onload = null;
-                responsiveResizeObserver.observe(responsiveImage);
-            });
-        });
-    </script>
- @endonce

<picture>
    @foreach (($breakpoints ?? []) as $breakpoint)
        @foreach($breakpoint->sources() ?? [] as $source)
            @php
                $srcSet = $source->getSrcset();
            @endphp

            @if($srcSet !== null)
                <source
                    @if($type = $source->getMimeType()) type="{{ $type }}" @endif
                    @if($media = $source->getMediaString()) media="{{ $media }}" @endif
                    srcset="{{ $srcSet }}"
                    @if($includePlaceholder ?? false) sizes="1px" @endif
                >
            @endif
        @endforeach
    @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
        @if($hasSources)
-        data-statamic-responsive-images
+        x-data
+        x-statamic-responsive-images
        @endif
    >
</picture>