Explicit breakpoint ratios overridden by field

[stuartcusackie]

I'm not sure if this is a bug or intended behaviour but I found it a little strange:

Lets say I have a responsive field with two breakpoints: default, lg.

And a tag like so: @responsive($image, ['ratio' => '1/1', 'md:ratio' => '3/1'])

I'm noticing that the 'md:ratio' statement is ignored and I think it's because the 'lg' image size is wiping it, event though my field doesn't have ratios enabled. I would have assumed explicitly defined ratios like this would override anything on the field.

No big deal. Just thought I would flag it.

[ncla]

It may or may not be a feature request / bug. What is your use case here? Just so I can understand better if there is value and maybe I can PR this.

[stuartcusackie]

It's a very strange case and not likely to occur often. I just thought I would flag it as it was unexpected behaviour.

The tag was originally like this (to match our field which has only default and lg breakpoints) @responsive($image, ['ratio' => '1/1', 'lg:ratio' => '3/1'])

But after a design change we decided to shift the explicitly defined ratio to the md breakpoint: @responsive($image, ['ratio' => '1/1', 'md:ratio' => '3/1'])

The field stayed the same (default and lg breakpoints) and the lg image was wiping the md ratio. To solve I think I would have to do something like this: @responsive($image, ['ratio' => '1/1', 'md:ratio' => '3/1', 'lg:ratio' => '3/1'])

[ncla]

I am unable to reproduce this issue. I do not see md:ratio getting wiped due to having an image in lg breakpoint. My md ratio is getting respected correctly, with lg ratio falling back to default.

My content.md

responsive_field:
  src:
    - 'assets::test.jpg'
  'lg:src':
    - 'assets::4Hjg7iC1_400x400.png'

Field config

-
        handle: responsive_field
        field:
          use_breakpoints: true
          allow_ratio: false
          allow_fit: true
          breakpoints:
            - lg
          restrict: false
          allow_uploads: true
          display: 'Responsive Field'
          type: responsive
          icon: assets
          listable: hidden
          instructions_position: above
          visibility: visible
          always_save: false

I have tried both within Blade and Antlers templates with same parameters. allow_ratio is disabled. My output roughly looks like this (removed placeholder base64 strings):

        <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>

<picture>

        <source media="(min-width: 1024px)" srcset="/img/asset/YXNzZXRzLzRIamc3aUMxXzQwMHg0MDAucG5n?fit=crop-50-50&amp;w=104&amp;h=104&amp;s=9df1f5f5969aae3f38bd27d97309b411 104w, /img/asset/YXNzZXRzLzRIamc3aUMxXzQwMHg0MDAucG5n?fit=crop-50-50&amp;w=125&amp;h=125&amp;s=d186b5cd6af27f960cd973268de4c38b 125w, /img/asset/YXNzZXRzLzRIamc3aUMxXzQwMHg0MDAucG5n?fit=crop-50-50&amp;w=149&amp;h=149&amp;s=fbb7ff32fecb3562d7db1d1fef22048f 149w, /img/asset/YXNzZXRzLzRIamc3aUMxXzQwMHg0MDAucG5n?fit=crop-50-50&amp;w=179&amp;h=179&amp;s=931c4356530f47bc15cf6833f7bcb3d3 179w, /img/asset/YXNzZXRzLzRIamc3aUMxXzQwMHg0MDAucG5n?fit=crop-50-50&amp;w=214&amp;h=214&amp;s=01f6ac4b297a7409c0cb86fe64a01358 214w, /img/asset/YXNzZXRzLzRIamc3aUMxXzQwMHg0MDAucG5n?fit=crop-50-50&amp;w=256&amp;h=256&amp;s=556d6422e67dc4e9d179b265e2ef2621 256w" sizes="32vw">

        <source media="(min-width: 768px)" srcset="/img/asset/YXNzZXRzL3Rlc3QuanBn?q=90&amp;fit=crop-50-50&amp;w=237&amp;h=79&amp;s=c380717a4b429ec83cbf3a6bb130b0d4 237w, /img/asset/YXNzZXRzL3Rlc3QuanBn?q=90&amp;fit=crop-50-50&amp;w=284&amp;h=94.666666666667&amp;s=e0ac8cbd3fe997a30c0040d853807da3 284w, /img/asset/YXNzZXRzL3Rlc3QuanBn?q=90&amp;fit=crop-50-50&amp;w=340&amp;h=113.33333333333&amp;s=da16e82632836f11727abd795b8c8ac0 340w" sizes="32vw">

        <source media="" srcset="/img/asset/YXNzZXRzL3Rlc3QuanBn?q=90&amp;fit=crop-50-50&amp;w=237&amp;h=237&amp;s=4fed7d7126e0b839da3f6f09ad31f308 237w, /img/asset/YXNzZXRzL3Rlc3QuanBn?q=90&amp;fit=crop-50-50&amp;w=284&amp;h=284&amp;s=054ffdc070ff601f7f86d5adc1c4ea51 284w, /img/asset/YXNzZXRzL3Rlc3QuanBn?q=90&amp;fit=crop-50-50&amp;w=340&amp;h=340&amp;s=1ec3f35225b2abc84dee2b288324728f 340w" sizes="32vw">

    <img avif="" src="/assets/test.jpg" alt="WOWOWOWOWOW" width="340" height="340" data-statamic-responsive-images="">
</picture>

Can you perhaps provide minimal reproducible repository? I would recommend verifying the HTML output URLs to check if URL params w and h match the expected ratio (or just view the images manually by opening the URLs). Make sure it is not a styling CSS issue.

[stuartcusackie]

I can't reproduce this on a new project. It might have been custom styles, or a bug in my custom lazy loading.

Sorry for all the effort that you went to! And thanks for checking.