posthtml / posthtml-webp

Add webp supporting in your html
MIT License
6 stars 7 forks source link

The ability to transfer additional attributes #5

Closed dreit-p closed 5 years ago

dreit-p commented 5 years ago

Can you add the ability to transfer additional attributes to the generated image, such as data-srcset, sizes, data-src and other typical attrs for images?

Now it's:

<picture>
    <source type="image/webp" srcset="/image.webp">
    <img data-srcset="
    /image-lg.jpg 1000w,
    /image-md.jpg 500w,
    /image-sm.jpg 250w"
    sizes="100vw" data-src="/image.jpg" src="/image.jpg">
</picture>

But i need like this:

<picture>
  <source
    srcset="
      ./images/image-lg.webp 1000w,
      ./images/image-md.webp 500w,
      ./images/image-sm.webp 250w"
    sizes="100vw"
    type="image/webp"
  >
  <img
    srcset="
      ./images/image-lg.jpg 1000w,
      ./images/image-md.jpg 500w,
      ./images/image-sm.jpg 250w"
    sizes="100vw"
    src="./images/image-placeholder.jpg"
  >
</picture>
Scrum commented 5 years ago

@dreit-p Hi, maybe you made a mistake in the example and it should be like that?

<img 
    srcset="/image-lg.jpg 1000w, /image-md.jpg 500w, /image-sm.jpg 250w"
    sizes="100vw" 
    src="/image.jpg"
>

transform to

<picture>
    <source
        srcset="/image-lg.webp 1000w, /image-md.webp 500w, /image-sm.webp 250w"
        sizes="100vw"
        type="image/webp"
    >
    <img 
        srcset="/image-lg.jpg 1000w, /image-md.jpg 500w, /image-sm.jpg 250w"
        sizes="100vw" 
        src="/image.jpg"
    >
</picture>
dreit-p commented 5 years ago

Yes. Just i showed current result of the plugin and needed results. But yes, you got me. :)

Scrum commented 5 years ago

@dreit-p publish v1.3.0

dreit-p commented 5 years ago

@Scrum , thanks a lot :)