I use <cms:thumbnail /> to create properly sized images throughout my site, like so:
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.
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
- 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