CKEditor with WebP output

[theqbap]

ProcessWire offers a few solutions to manage WebP formats including the Class "TextformatterWebpImages", but there is no solution that works for me with CloudFlare.

I'm trying to convert CKEditor all images output to WebP using the HTML <picture> Tag.

By default CKEditor generates this code when adding an image

<img alt="Jellyfish" class="align_center" width="625" src="/site/assets/files/2581/jellyfish-aas.625x0-is.jpg">

I can convert the CKEditor images to WebP adding the imageSizerOptions to the config.php

$config->imageSizerOptions('webpAdd', true); 

But how to convert the output of all images inside CKEditor after "echo $page->textfield" to look like this:

<picture>
<source data-srcset="/site/assets/files/2581/jellyfish-aas.625x0-is.webp" type="image/webp" />
<img alt="Jellyfish" class="align_center" width="625" data-src="/site/assets/files/2581/jellyfish-aas.625x0-is.jpg">
</picture>

This script works and can convert it

function webp_picture_fix($content){
  
    preg_match_all("/<img(.*?)class=('|\")(.*?)('|\")(.*?)src=('|\")(.*?)('|\")(.*?)>/i", $content, $images);
    
    $i = -1;

    if(isset($images)){
        
    
        foreach ($images as $key) {
            $i++;
            
      
            if(strpos($images[3][$i], 'align_center') !== false){
               
    $slika_ekstenzija = $images[7][$i];
    $sewebp = preg_replace('/\\.[^.\\s]{3,4}$/', '', $slika_ekstenzija);
    $webp_slika_src = $sewebp.".webp";
    $replacement = '<picture>'."\r\n".'<source data-srcset="'.$webp_slika_src.'" type="image/webp" />'."\r\n".'<img'.$images[1][$i].'class='.$images[2][$i].$images[3][$i].$images[4][$i].$images[5][$i].'data-src='.$images[6][$i].$images[7][$i].$images[8][$i].$images[9][$i].'>'."\r\n".'</picture>';
    $content = str_replace($images[0][$i], $replacement, $content);
            }
        }
    }

    return $content;
}

but there are also errors 

PHP Notice:  Undefined offset: 3 in /home/cg/root/4517254/main.php on line 18
PHP Notice:  Undefined offset: 4 in /home/cg/root/4517254/main.php on line 18
PHP Notice:  Undefined offset: 5 in /home/cg/root/4517254/main.php on line 18
PHP Notice:  Undefined offset: 6 in /home/cg/root/4517254/main.php on line 18
PHP Notice:  Undefined offset: 7 in /home/cg/root/4517254/main.php on line 18
PHP Notice:  Undefined offset: 8 in /home/cg/root/4517254/main.php on line 18
PHP Notice:  Undefined offset: 9 in /home/cg/root/4517254/main.php on line 18

Any suggestion on how to fix it or use a different approach to the problem?

[louisstephens]

I havent really dealt with webp yet, but have you looked at the TextformatterWebpImages text formatter that Ryan created? Apparently it converts jpg/png image tags to use WEBP. 

[theqbap]

Yes, I mentioned this solution in the first paragraph, but TextformatterWebpImages requires to use of htaccess to deliver jpg or png files if webp is not supported.

In the website code you have only link to /site/assets/files/2581/jellyfish-aas.625x0-is.webp. 
If the browser doesn’t support it the server redirects the users to the original image.

The issue is here that my CDN server don’t know if there is a different image file to download for the users.
I think the best practise here is to use the HTML <picture> Tag.

 

 

[BillH]

Have you thought of writing a Textformatter module?

They're really very straightforward - you don't even need to use hooks. There are good examples to copy in wire > modules > Textformatter (for instance, TextformatterNewlineBR.module is a nice starting point).

Once you've put your module in the site > modules and installed, apply the Textformatter on the Details tab of the fields where it's needed.