I use <cms:thumbnail /> to create properly sized images throughout my site, like so:

Code: Select all

<img src="<cms:thumbnail blog_image width='677' height='342' />" >

Works, but I would like to try to accomplish something like this to serve WEBP (next-gen formats) with fallbacks dynamically without manually converting and setting the WEBP sources.

Note specifically the type='webp'. My idea here is to allow setting the type of file the thumbnail should create in the appropriate width and height.

Code: Select all

<picture>
  <source srcset="<cms:thumbnail blog_image width='677' height='342' type='webp' />" type="image/webp">
  <source srcset="<cms:thumbnail blog_image width='677' height='342' type='jpeg' />" type="image/jpeg"> 
  <img src="<cms:thumbnail blog_image width='677' height='342' type='jpg' />" alt="Alt Text!">
</picture>

The other idea I had was adding a validator to the image editable, which would run some custom PHP when the cloned page is saved on the image. I currently use this to grab the height/width of an image and save to the clonable page. I was thinking I could extend the converting process at this time (save the image to a WEBP folder in the uploads folder, using the same filename), but there are different sizes used throughout the website so I would have to pre-set all the values for the pages that would use it in the functions file. Not sure I like this idea.

Ty

[trendoman]

I can write a custom function for you that will generate the whole HTML for a given image to avoid writing a lot of HTML. On top of that, another function would generate a 'webp' image from the given source with a check for existing generated thumb to run quickly.

I would be interested in learning more about your offer to assist, would you want to send me a PM?

I still think something like this would be a nice feature to add to Couch, would help add some SEO benefits.

[trendoman]

Sent a PM.

Interesting link of a cloud service that takes care of some images-related problems - https://ewww.io/

Hi, Use this

Code: Select all

<img src="<cms:php>$file = '<cms:show blog_image />';
$image = imagecreatefromstring(file_get_contents($file));
ob_start();
imagejpeg($image,NULL,100);
$cont = ob_get_contents();
ob_end_clean();
imagedestroy($image);
$content = imagecreatefromstring($cont);
$output = 'img-webp/<cms:php>echo strtr('<cms:show k_page_title />',' ','-');</cms:php>.webp';
imagewebp($content,$output);
imagedestroy($content);
echo '/'.$output.'';
</cms:php>" />

[trendoman]

Hi, Use this

No, don't use this! Seriously..

Edit: I just took a test and it takes 0.3 seconds to process a simple 200kb 768x1152.jpg file into webp version (if you make the script work) on a powerful i7..

Ok, ok, edit #2: KK requested me to expand on why I do not recommend using the posted code. I acknowledge, it deserves some fair bashing @siheng, you did great with explanatory image, perhaps you really wanted to help and even provided 'documentation'. Thanks for your effort.
The script is a code piece that migrates from one Stackoverflow answer to another and, perhaps, originated on some blog post of an unknown cricket lover. Code converts the image 2 times - first to JPG, quality 100, then to WEBP. Not wonderful, right? Also, as posted, it would run every time the page is requested. Pasting it in the source code is therefore a bad idea, because resulting image should be cached at least (similar to <cms:thumbnail> tag, if I remember correctly).
There are many interesting PHP libraries that take care of webp, for example https://github.com/rosell-dk/webp-convert and https://github.com/claviska/SimpleImage and it takes some effort to actually do the conversion the right way.

OP, perhaps, already solved this issue and could post his findings. In our PM conversation it sounded as if apparently a solution was already on the way.

Btw, CouchCMS minimal requirements are PHP5.3 and the script wouldn't work for those users. So, all in all, a proper wokring solution is not that simple as copy-paste.

P.P.S. It would be best to have a process of serving images decoupled from converting and set like this:
First, process all images in /uploads/ folder with a script, perhaps with a button in Admin Panel.
Second, set up a .htaccess file to serve webp version if it exists in stead of requested jpg/png.

@trendoman and @KK
Okay I'm sorry how I can delete my post