Ahhhhhhhhh thank you so much for taking the time to explain this so clearly. This has provided a solution for the srcset not working. See below for details.
mplavala I know that there are ways to change this behavior by using the <base> tag (let me know if you use something else). Currently the plugin does not support <base> tags and it is borderline impossible for the snippet to support it. For this reason I would rather not add them, because I would prefer to keep the behavior of the plugin and snippet consistent.
Agreed, good call and thank you for the info.
FYI I use '<base href="[(site_url)]">' in the head chunk which works well for everything else.
mplavala Luckily, there is an easy solution: use absolute paths, i.e., use paths starting with /, for example: <img src="/folder/image.jpg"> This will (irrespective of the base tag) always point to https://www.example.com/folder/image.jpg. Also, this will then point the plugin to the correct image file.
Wowwwwww! That is fantastic! Thank you so so much for your help with this.
Adding a forward slash at the front of all straight image paths, webpBackground image paths and webpBackground-phpthumb combo paths to all chunks, row templates etc fixed all error warnings pertaining to ""WebP Converter - image does not exist" errors... I no longer receive any of these errors - amazing!
Example usage of each fyi is below...
straight image paths
<img src="/[*banner*]" />
webpBackground image paths
[!webpBackground? &src=`/[*banner*]`!]
webpBackground-phpthumb combo paths
[!webpBackground? &src=`/[[phpthumb? &input=`[*banner*]` &options=`w=1600,q=90`]]`!] 1600w
NB. Note that for webpBackground and phpthumb to work together, the forward slash must be BEFORE the phpthumb call like so:
[!webpBackground? &src=`/[[phpthumb?...`
If the forward slash is put instead in the phpthumb input like this, webp doesn't seem to work.
[!webpBackground? &src=`[[phpthumb? &input=`/[*banner*]`... `
Full working WebP Converter / webpBackground / phpthumb srcset example shown below in case anyone is interested...
<div>
<img src="/[*banner*]"
srcset="
[!webpBackground? &src=`/[*banner*]`!] 1800w,
[!webpBackground? &src=`/[[phpthumb? &input=`[*banner*]` &options=`w=1600,q=90`]]`!] 1600w,
[!webpBackground? &src=`/[[phpthumb? &input=`[*banner*]` &options=`w=1400,q=90`]]`!] 1400w,
[!webpBackground? &src=`/[[phpthumb? &input=`[*banner*]` &options=`w=1200,q=90`]]`!] 1200w,
[!webpBackground? &src=`/[[phpthumb? &input=`[*banner*]` &options=`w=1000,q=90`]]`!] 1000w,
[!webpBackground? &src=`/[[phpthumb? &input=`[*banner*]` &options=`w=800,q=90`]]`!] 800w,
[!webpBackground? &src=`/[[phpthumb? &input=`[*banner*]` &options=`w=650,q=90`]]`!] 650w,
[!webpBackground? &src=`/[[phpthumb? &input=`[*banner*]` &options=`w=480,q=90`]]`!] 480w,
[!webpBackground? &src=`/[[phpthumb? &input=`[*banner*]` &options=`w=300,q=90`]]`!] 300w"
sizes="100vw"
title="[*pagetitle*]" alt="[*pagetitle*] image" />
</div>
Thank you @mplavala - you are a legend and I absolutely love your work 🙂