Srcset conflict

[doodybrains]

Hi,

I can't figure out exactly where or why this is happening but when I use srcset with this plugin it stops working. It works great if I don't try to set the sizes. Would you be able to point me in the right direction?

My image tag looks like this <img class="product-image" src="<?= $image->placeholderUri() ?>" data-src="<?= $image->url() ?>" data-lazyload alt="<?= $image->alt() ?>" data-sizes="auto" >

My config looks like this

    'kirby-extended.blurry-placeholder' => [
      'pixel-target' => 75,
      'srcset' => [
          'enable' => true,
          'sizes' => "760, 1400"
      ]
    ]

Previously I had srcset setup like this:

    'thumbs' => [
      'srcsets' => [
        'default' => [760, 1480, 2880],
        'exhibit' => [760, 1400],
        'product' => [740, 1400, 2000],
      ],
    ],

And was calling srcset in my image tag like this: <img class="product-image" src="<?= $image->url() ?>" srcset="<?= $image->srcset('exhibit') ?>">

Thank you! Emma

[johannschopplich]

Hi Emma, quick question before we go into details: Have you included the frontend code as noted here?

[doodybrains]

Hi, thanks for the quick reply! As per another issue opened by someone else I included the lazyload js as a file and am calling it from a script tag<script src="/assets/js/lazyload.js"></script> Using the script you mentioned here: https://github.com/johannschopplich/kirby-blurry-placeholder/issues/6#issuecomment-817310090

[johannschopplich]

That should be enough. Can you remove your config for this plugin temporarily? Some keys like sizes are used incorrect. You probably don't need them anyway.

The following snippet should work by its own:

<img class="product-image" src="<?= $image->placeholderUri() ?>" data-src="<?= $image->url() ?>" data-lazyload alt="<?= $image->alt() ?>">

Since you're using the data-src and not data-srcset, you can omit the data-sizes attribute.

[doodybrains]

Yes, it works when I do that but I want the image to load a smaller pixel size when possible. We set it up so that it would load 1400px instead of 2000px at certain widths. Any idea on how I can do that or does it just have to be automated with data-size and data-srcset?

[johannschopplich]

You can define Kirby thumb presets (like you did in your first post) and then refer them in the plugin settings. Please take a look into the options: https://github.com/johannschopplich/kirby-blurry-placeholder#options

[doodybrains]

thank you!

[johannschopplich]

Sounds like you've got it working. 🙂

[doodybrains]

Hi how would I set multiple presets?

    'thumbs' => [
      'srcsets' => [
        'medium' => [
           '1480w' => ['width' => 1480, 'quality' => 100],
           '2880w' => ['width' => 2880, 'quality' => 100]
         ],
         'small' => [
           '470w' => ['width' => 470, 'quality' => 100],
           '600w' => ['width' => 600, 'quality' => 100]
         ],
      ],
    ],
    'kirby-extended.blurry-placeholder' => [
      'pixel-target' => 75,
      'srcset' => [
          'enable' => true,
      ]
    ]

[chinochano]

Hi there! I'm posting here because I've been stuck with this same issue for days and the solution doesn't seem to be explicitly explained on this thread.

So basically, if you're NOT using srcset, your <img> tag should look like this:

<img
src="<?= $img->placeholderUri() ?>"
data-src="<?= $img->url() ?>" <--- backdoor to img single URL
data-lazyload
/>

While if you ARE using srcset, it should look like this:

<img
src="<?= $img->placeholderUri() ?>"
data-srcset="<?= $img->srcset() ?>" <--- backdoor to img srcset!!!
data-sizes="auto"
data-lazyload
/>

No plugin config necessary at all for a simple usage as the example above.

PS: I'm actually not sure data-sizes="auto" is even necessary.

[johannschopplich]

@chinochano Indeed, the sizes attribute is only applicable for srcset. Thus, data-sizes won't have an effect on a <img> tag.

[chinochano]

@johannschopplich Thanks for clarifying that. My PS was referring to whether data-sizes-"auto" is even necessary in the scrset example. I thought perhaps auto is taken by default and can therefore be omitted, but haven't tried it.

[johannschopplich]

I recommend you take a look in the Loadeer documentation. Specifically, the auto calculation of the sizes attribute as well as responsive images in general and which values of this attribute are possible. 😊