Srcset conflict about kirby-blurry-placeholder HOT 12 CLOSED

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

from kirby-blurry-placeholder.

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: #6 (comment)

from kirby-blurry-placeholder.

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.

from kirby-blurry-placeholder.

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?

from kirby-blurry-placeholder.

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

from kirby-blurry-placeholder.

thank you!

from kirby-blurry-placeholder.

Sounds like you've got it working. 🙂

from kirby-blurry-placeholder.

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

from kirby-blurry-placeholder.

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.

from kirby-blurry-placeholder.

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

from kirby-blurry-placeholder.

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

from kirby-blurry-placeholder.

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

from kirby-blurry-placeholder.