search

rbuchberger / jekyll_picture_tag

Easy responsive images for Jekyll.
https://rbuchberger.github.io/jekyll_picture_tag/
BSD 3-Clause "New" or "Revised" License
622 stars 106 forks source link

srcset is not generated while using data_auto markup #291

Closed cortix closed 1 year ago

cortix commented 1 year ago

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.

  1. markup: auto -----> data_auto
  2. formats: [original] ------> [webp, original]
  3. widths: [400, 600, 800, 1000] -------> [200, 400, 800, 1200, 1600]
  4. 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;

Screenshot 2022-12-16 at 13 43 40

Could you help me?

rbuchberger commented 1 year ago

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.

cortix commented 1 year ago

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.