Picture Tag / Responsive Images / auto populate "sizes" with js

[eliasu]

Hey there,

I try to put up a script, that automatically creates and serves responsive images. So I'm using some pretty neat code from Peak which works like this:

In my config/statamic/assets.php I´ve defined presets for Glide …

'presets' => [
            'xs-webp' => ['w' => 320, 'h' => 10000, 'q' => 85, 'fit' => 'contain', 'fm' => 'webp'],
            'sm-webp' => ['w' => 480, 'h' => 10000, 'q' => 85, 'fit' => 'contain', 'fm' => 'webp'],
            'md-webp' => ['w' => 768, 'h' => 10000, 'q' => 85, 'fit' => 'contain', 'fm' => 'webp'],
            'lg-webp' => ['w' => 1280, 'h' => 10000, 'q' => 85, 'fit' => 'contain', 'fm' => 'webp'],
            'xl-webp' => ['w' => 1440, 'h' => 10000, 'q' => 95, 'fit' => 'contain', 'fm' => 'webp'],
            '2xl-webp' => ['w' => 1680, 'h' => 10000, 'q' => 95, 'fit' => 'contain', 'fm' => 'webp'],
            'xs' => ['w' => 320, 'h' => 10000, 'q' => 85, 'fit' => 'contain'],
            'sm' => ['w' => 480, 'h' => 10000, 'q' => 85, 'fit' => 'contain'],
            'md' => ['w' => 768, 'h' => 10000, 'q' => 85, 'fit' => 'contain'],
            'lg' => ['w' => 1280, 'h' => 10000, 'q' => 85, 'fit' => 'contain'],
            'xl' => ['w' => 1440, 'h' => 10000, 'q' => 95, 'fit' => 'contain'],
            '2xl' => ['w' => 1680, 'h' => 10000, 'q' => 95, 'fit' => 'contain'],
        ],

I've created a partial called _picture.anterles.html

{{ if image }}
    <picture>
        {{ asset :url="image" }}
            {{ if extension == 'svg' || extension == 'gif' }}
                <img class="{{ class }}" src="{{ url }}" alt="{{ alt }}" />
            {{ else }}
                <source
                    srcset="
                        {{ glide:image preset='xs-webp' }} 320w,
                        {{ glide:image preset='sm-webp' }} 480w,
                        {{ glide:image preset='md-webp' }} 768w,
                        {{ glide:image preset='lg-webp' }} 1280w,
                        {{ glide:image preset='xl-webp' }} 1440w,
                        {{ glide:image preset='2xl-webp' }} 1680w"
                    sizes="{{ sizes }}"
                    type="image/webp"
                >
                <source
                    srcset="
                        {{ glide:image preset='xs' }} 320w,
                        {{ glide:image preset='sm' }} 480w,
                        {{ glide:image preset='md' }} 768w,
                        {{ glide:image preset='lg' }} 1280w,
                        {{ glide:image preset='xl' }} 1440w,
                        {{ glide:image preset='2xl' }} 1680w"
                    sizes="{{ sizes }}"
                    type="{{ image.mime_type }}"
                >
                <img
                    {{ if cover }}
                        class="object-cover {{ class }}"
                        style="object-position: {{ focus | background_position }}"
                    {{ else }}
                        class="{{ class }}"
                    {{ endif }}
                    src="{{ glide:image preset='lg' }}"
                    alt="{{ alt ensure_right='.' }}"
                    width="{{ image.width }}"
                    height="{{ image.height }}"
                    {{ if lazy }}
                        loading="lazy"
                    {{ endif }}
                >
            {{ /if }}
        {{ /asset }}
    </picture>
{{ /if }}

You can use this partial like this:

{{ partial:utility/picture :image="images_img" class="event-thumb" cover="true" sizes="(min-width: 300px) 50vw, 90vw" }}

So briefly: it is using the image from images_img, puts some classes on it and it defines the min & max constraints for the image via the sizes attribute. Based on this, the partial will give back the correct image from all those version created by glide-presets.

So this part in particular sizes="(min-width: 300px) 50vw, 90vw" } says: On big screens, size will be 50vw with a min-width 300px and on smaller screen the image size will be 90vw. So far so good.

My question is: Is there a way, to dynamically populate the sizes attribute via JS, based on the actual rendered image-size? I know that Spatie's Responsive Images Add-on does exactly that, but i can't figure it out how it's done. I ask, because I´m looking for a solution, which I can reuse in many projects, and dont't have to think about putting the correct sizes attribute on every "picture partial".

Any help or direction where to start is appreciated 👍
Thank!

EDIT:
By the way, I recommend checking out Lazysizes – a lightweight JS library for integrate lazyload and auto-sizes for responsive images. Its working like charm and in combination with this picture partial from above, thats a solution for automatic responsive images, regardless what images the client will upload.

[edalzell]

They use a listener: https://github.com/spatie/statamic-responsive-images/blob/main/resources/views/responsiveImage.blade.php

[eliasu]

EDIT:
This post was way longer because I had strange behaviors in the first place. Turns out it was due to the fact, I had "cache disabled" in Chromes Inspection-Network-Tab. Thats why it would always load the image again on every resize action. I feel kinda stupid, but at least it works now ;)

Ok, thanks @edalzell for pointing that out. This is the slightly edited JS snippet, if anybody is interested.

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';
			});
		});
	});
	// I changed the selector to a classname. The class is added to the <img> element within the picture element
	document.querySelectorAll('.respimg').forEach(responsiveImage => {
		responsiveResizeObserver.onload = null;
		responsiveResizeObserver.observe(responsiveImage);
	});
});

[eliasu]

By the way, I recommend checking out Lazysizes – a lightweight JS library for integrate lazyload and auto-sizes for responsive images. Its working like charm and in combination with this picture partial from above, thats a solution for automatic responsive images, regardless what images the client will upload.