Jump to content
Sign in to follow this  
theqbap

CKEditor with WebP output

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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.

 

 

  • Like 1

Share this post


Link to post
Share on other sites

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.

  • Like 3

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...