Moving from https://forum.evo.im/d/14-what-are-your-default-extras/38
mplavala I will look int this in future update, I will have some time next month.
Beauty. Thanks 😀
mplavala So far it handles srcset inside <source> nodes, which are usually included in <picture>. The problem with srcset in <img> is that it contains several image paths and I would have to parse those into separate image paths. This of course can be done, but I will have to change the logic how the plugin handles a HTML node. I will see how well it goes.
Ah I see. Thanks for clarifying this for me. Ok thanks so much.
mplavala In the meantime you can use the snippet included with the plugin. Just feed it the image path and it will do the rest. So in this case you can do something like
[!webpBackground? &src='assets/images/...'] 480w,
Hmmmm. I am a little stuck getting my head around this.
I am trying like below but can't quite get it right (wrong path and no webp version)...
[[phpthumb? &input=`[!webpBackground? &src=`[*banner*]`!]` &options=`w=1600,q=90`]] 1600w,
=
assets/cache/images/assets/cache/webp/images/temp/banner-1800-3.jpg-1600x-d85.jpg 1600w,
These 3 lines output .jpg.webp images that are all the same size, defeating the purpose of srcset in this usage...
[!webpBackground? &src=`[*banner*]`!] 800w,
[!webpBackground? &src=`[*banner*]`!] 650w,
[!webpBackground? &src=`[*banner*]`!] 480w,
=
/assets/cache/webp/images/temp/banner-1800-3.jpg.webp 800w,
/assets/cache/webp/images/temp/banner-1800-3.jpg.webp 650w,
/assets/cache/webp/images/temp/banner-1800-3.jpg.webp 480w,
Perhaps being able to specify width manually for srcset would be good??
eg
[!webpBackground? &src=`[*banner*]`! &width=`800`]
I can't get it to work within picture either, no doubt I am doing something wrong.
Something weird happens in the front end source code...
This
<picture>
<source
srcset="
[*banner*] 1800w,
[[phpthumb? &input=`[*banner*]` &options=`w=1600,q=90`]] 1600w,
[[phpthumb? &input=`[*banner*]` &options=`w=1400,q=90`]] 1400w,
[[phpthumb? &input=`[*banner*]` &options=`w=1200,q=90`]] 1200w,
[[phpthumb? &input=`[*banner*]` &options=`w=1000,q=80`]] 1000w,
[[phpthumb? &input=`[*banner*]` &options=`w=800,q=80`]] 800w,
[[phpthumb? &input=`[*banner*]` &options=`w=650,q=80`]] 650w,
[[phpthumb? &input=`[*banner*]` &options=`w=480,q=80`]] 480w,
[[phpthumb? &input=`[*banner*]` &options=`w=300,q=80`]] 300w"
sizes="100vw">
<img src="/[*banner*]" title="[*pagetitle*]" alt="[*pagetitle*] image" class="banner" />
</picture>
in the source code becomes ("closing source" at end before the closing picture, no srcset on the different sizes)...
<picture>
<source srcset="
assets/images/temp/banner-1800-3.jpg 1800w,
assets/cache/images/temp/banner-1800-3-1600x-d85.jpg 1600w,
assets/cache/images/temp/banner-1800-3-1400x-88a.jpg 1400w,
assets/cache/images/temp/banner-1800-3-1200x-983.jpg 1200w,
assets/cache/images/temp/banner-1800-3-1000x-811.jpg 1000w,
assets/cache/images/temp/banner-1800-3-800x-97c.jpg 800w,
assets/cache/images/temp/banner-1800-3-650x-fa2.jpg 650w,
assets/cache/images/temp/banner-1800-3-480x-7f8.jpg 480w,
assets/cache/images/temp/banner-1800-3-300x-122.jpg 300w" sizes="100vw">
<img src="/assets/cache/webp/images/temp/banner-1800-3.jpg.webp" title="Page 3 (h1 this is the main h1 heading)" alt="Page 3 (h1 this is the main h1 heading) image" class="banner">
</source></picture>
I think I am getting myself confused hehe 😉