srcset is not generated while using data_auto markup #292

cortix · 2022-12-16T12:00:28Z

cortix
Dec 16, 2022

I might have missed something but believe or not I've read most of the documentation. I am trying to explain what I did again. If I'm wrong please correct me.

It's very clear what I want to do. My goal is to create lazy-loading images suitable for many different media formats.

As I understand from the docs and the discussions on repo, If I want to create lazy-loading images, I need data- attributes. Because of that I have chosen data_auto markup. If I use auto markup, I cannot use lazy loading lib. By the way, you already explained why the data tag is needed here.

This time I kept things very simple.

{% picture 2022-02-23-imperative-declarative-programming-in-java/forloops.jpeg --alt for loops example %}

presets:
  default:
    markup: data_auto
    formats: [webp, original]
    widths: [200, 400, 800, 1200, 1600]
    data_sizes: false

I tried to override default preset like above. As you can see, I only overrided 4 things.

markup: auto -----> data_auto
formats: [original] ------> [webp, original]
widths: [400, 600, 800, 1000] -------> [200, 400, 800, 1200, 1600]
data_sizes: true -----------> false

According to this discussion, we have to set data_sizes as false to able to get plain sizes attribute instead of data-sizes.

When I use this preset, I can't see the srcset in the generated html. As you mentioned in your previous comment, I wasn't expecting to see it in the site file anyway. But I was expecting to see it in the html.

in the html;

<!-- I took the liberty of formatting it for readability - Robert -->
<picture class="lazy">
  <source
    data-srcset="
      /assets/images/generated/2022-02-23-imperative-declarative-programming-in-java/forloops-400-f2d1de698.webp 400w,
      /assets/images/generated/2022-02-23-imperative-declarative-programming-in-java/forloops-600-f2d1de698.webp 600w,
      /assets/images/generated/2022-02-23-imperative-declarative-programming-in-java/forloops-800-f2d1de698.webp 800w,
      /assets/images/generated/2022-02-23-imperative-declarative-programming-in-java/forloops-1000-f2d1de698.webp 1000w
    "
    type="image/webp" />
  <source
    data-srcset="
      /assets/images/generated/2022-02-23-imperative-declarative-programming-in-java/forloops-400-09592ad47.jpeg 400w,
      /assets/images/generated/2022-02-23-imperative-declarative-programming-in-java/forloops-600-09592ad47.jpeg 600w,
      /assets/images/generated/2022-02-23-imperative-declarative-programming-in-java/forloops-800-09592ad47.jpeg 800w,
      /assets/images/generated/2022-02-23-imperative-declarative-programming-in-java/forloops-1000-09592ad47.jpeg 1000w
    "
    type="image/jpeg" />
  <img
    data-src="/assets/images/generated/2022-02-23-imperative-declarative-programming-in-java/forloops-800-09592ad47.jpeg"
    alt="for loops example" />
</picture>

As a result, I am getting this;

Could you help me?

rbuchberger · 2022-12-16T14:01:39Z

rbuchberger
Dec 16, 2022
Maintainer

It looks to me like your JPT configuration is fine and it is generating the correcf output, but from here your javascript lazy loading library should take the data-srcset attribute and copy it to a srcset attribute. Which lazy loading library are you using? I'd dig into that, make sure it's set up correctly.

0 replies

cortix · 2022-12-16T19:02:05Z

cortix
Dec 16, 2022
Author

So sorry, totally my misunderstanding. I thought that in the background jpt takes care of necessary dependencies. I felt really bad :)

Now it works. Here the settings;

I added lazysizes.min.js inside in the <head></head>;

<script src="{{ site.url }}{{ site.baseurl }}/assets/js/lazysizes.min.js" async="" ></script>

Then I updated the preset as follows.

presets:
  default:
    markup: data_auto
    formats: [webp, original]
    widths: [200, 400, 800, 1200, 1600]
    data_sizes: false
    attributes:
      img: 'class="lazyload"'

Finally, this is the result;

<picture>
<source data-srcset="/assets/images/generated/2022-02-23-imperative-declarative-programming-in-java/forloops-200-f2d1de698.webp 200w, /assets/images/generated/2022-02-23-imperative-declarative-programming-in-java/forloops-400-f2d1de698.webp 400w, /assets/images/generated/2022-02-23-imperative-declarative-programming-in-java/forloops-800-f2d1de698.webp 800w, /assets/images/generated/2022-02-23-imperative-declarative-programming-in-java/forloops-1200-f2d1de698.webp 1200w, /assets/images/generated/2022-02-23-imperative-declarative-programming-in-java/forloops-1600-f2d1de698.webp 1600w" type="image/webp" srcset="/assets/images/generated/2022-02-23-imperative-declarative-programming-in-java/forloops-200-f2d1de698.webp 200w, /assets/images/generated/2022-02-23-imperative-declarative-programming-in-java/forloops-400-f2d1de698.webp 400w, /assets/images/generated/2022-02-23-imperative-declarative-programming-in-java/forloops-800-f2d1de698.webp 800w, /assets/images/generated/2022-02-23-imperative-declarative-programming-in-java/forloops-1200-f2d1de698.webp 1200w, /assets/images/generated/2022-02-23-imperative-declarative-programming-in-java/forloops-1600-f2d1de698.webp 1600w">
<source data-srcset="/assets/images/generated/2022-02-23-imperative-declarative-programming-in-java/forloops-200-09592ad47.jpeg 200w, /assets/images/generated/2022-02-23-imperative-declarative-programming-in-java/forloops-400-09592ad47.jpeg 400w, /assets/images/generated/2022-02-23-imperative-declarative-programming-in-java/forloops-800-09592ad47.jpeg 800w, /assets/images/generated/2022-02-23-imperative-declarative-programming-in-java/forloops-1200-09592ad47.jpeg 1200w, /assets/images/generated/2022-02-23-imperative-declarative-programming-in-java/forloops-1600-09592ad47.jpeg 1600w" type="image/jpeg" srcset="/assets/images/generated/2022-02-23-imperative-declarative-programming-in-java/forloops-200-09592ad47.jpeg 200w, /assets/images/generated/2022-02-23-imperative-declarative-programming-in-java/forloops-400-09592ad47.jpeg 400w, /assets/images/generated/2022-02-23-imperative-declarative-programming-in-java/forloops-800-09592ad47.jpeg 800w, /assets/images/generated/2022-02-23-imperative-declarative-programming-in-java/forloops-1200-09592ad47.jpeg 1200w, /assets/images/generated/2022-02-23-imperative-declarative-programming-in-java/forloops-1600-09592ad47.jpeg 1600w">
<img class=" ls-is-cached lazyloaded" data-src="/assets/images/generated/2022-02-23-imperative-declarative-programming-in-java/forloops-800-09592ad47.jpeg" alt="for loops example" src="/assets/images/generated/2022-02-23-imperative-declarative-programming-in-java/forloops-800-09592ad47.jpeg">
</picture>

By the way, thanks for your help.

2 replies

rbuchberger Dec 19, 2022
Maintainer

Not a problem at all, glad it worked out! Maybe we could improve the documentation to make it more clear that you need a javascript library in addition to JPT, sorry you had to struggle a bit.

cortix Dec 19, 2022
Author

Not a problem at all :))) Thanks a lot. My page is working well now.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

srcset is not generated while using data_auto markup #292

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

srcset is not generated while using data_auto markup #292

Uh oh!

Uh oh!

cortix Dec 16, 2022

Replies: 2 comments · 2 replies

Uh oh!

Uh oh!

rbuchberger Dec 16, 2022 Maintainer

Uh oh!

cortix Dec 16, 2022 Author

Uh oh!

rbuchberger Dec 19, 2022 Maintainer

Uh oh!

cortix Dec 19, 2022 Author

cortix
Dec 16, 2022

Replies: 2 comments 2 replies

rbuchberger
Dec 16, 2022
Maintainer

cortix
Dec 16, 2022
Author

rbuchberger Dec 19, 2022
Maintainer

cortix Dec 19, 2022
Author