There are many PHP solutions and WP plugins, they all come with additional options that I don't want/need, i.e. how the converted files are served, where they are stored, etc.
I need none of all that and am after pure simple code using GD. I don't want to use a plugin, thank you.
When should the encode happen ? At any time you know it is a good point in the hook routine, could be this https://make.wordpress.org/core/2019/11/05/use-of-the-wp_update_attachment_metadata-filter-as-upload-is-complete-hook/ but if you know better or have another solution then use that and possibly let me know why you choose another hook. I would i.e. also be happy with firing a cron job once new images are uploaded if that is better. Also I don't need to have metadata of the converted images in the WP db, fine with having the original
.jpegfiles and their metadata in the Media Library, the.webpfiles are just there to be used inside thepictureelement.Where should the converted files be stored?
wp-content/uploads/default folder structure,.webpfiles should be next to.jpegfiles all in there.GD image engine should be used for the conversion. https://developer.wordpress.org/reference/classes/wp_image_editor_gd/ Lately I find imagick just crashes or takes ages to do anything. In WP 5.2 things still worked just fine with imagick but there must have been changes introduced that make using imagick in later versions of WP useless. I find GD to me quite stable and fast, it does not matter it creates lossy WebP versions. The methods for the GD image engine from WP do not seem to include conversion/encoding https://developer.wordpress.org/reference/classes/wp_image_editor_gd/#methods so I am also happy with any methods using in the GD module https://www.php.net/manual/en/book.image.php concerning encoding to WebP.
To get rid of all the extra unneeded image sizes and options WP introduced over time I have these functions/filters in
functions.php.
function namespace_disable_image_sizes($sizes)
{
unset($sizes['thumbnail']); // disable thumbnail size
unset($sizes['medium']); // disable medium size
unset($sizes['large']); // disable large size
unset($sizes['medium_large']); // disable medium-large size
unset($sizes['1536x1536']); // disable 2x medium-large size
unset($sizes['2048x2048']); // disable 2x large size
return $sizes;
}
add_action('intermediate_image_sizes_advanced', 'namespace_disable_image_sizes');
// disable scaled image size
add_filter('big_image_size_threshold', '__return_false');
// disable rotated image size
add_filter('wp_image_maybe_exif_rotate', '__return_false');
// disable other image sizes
function namespace_disable_other_image_sizes()
{
remove_image_size('post-thumbnail'); // disable images added via set_post_thumbnail_size()
remove_image_size('another-size'); // disable any other added image sizes
}
add_action('init', 'namespace_disable_other_image_sizes');
High resolution and large dimension images are to be converted, see attached image as example, image types can be
jpeg,png, etc.The sizes in place are more or less these with possible variations.
add_image_size('4096w', 4096, 0);
add_image_size('3200w', 3200, 0);
add_image_size('2560w', 2560, 0);
add_image_size('1920w', 1920, 0);
add_image_size('1600w', 1600, 0);
add_image_size('1280w', 1280, 0);
add_image_size('1140w', 1140, 0);
add_image_size('1024w', 1024, 0);
add_image_size('960w', 960, 0);
add_image_size('800w', 800, 0);
add_image_size('768w', 768, 0);
add_image_size('640w', 640, 0);
add_image_size('425w', 425, 0);
add_image_size('320w', 320, 0);
add_image_size('240w', 240, 0);
- I use the
pictureelement with more or less the following setup, so I have the browser decide what is needed and hence don't want/need server side.htaccessrules or backend configs. https://dev.opera.com/articles/responsive-images/
<picture>
<source
sizes="(min-width: 640px) 60vw, 100vw"
srcset="opera-200.webp 200w,
opera-400.webp 400w,
opera-800.webp 800w,
opera-1200.webp 1200w,
opera-1600.webp 1600w,
opera-2000.webp 2000w"
type="image/webp">
<img
src="opera-400.jpg" alt="The Oslo Opera House"
sizes="(min-width: 640px) 60vw, 100vw"
srcset="opera-200.jpg 200w,
opera-400.jpg 400w,
opera-800.jpg 800w,
opera-1200.jpg 1200w,
opera-1600.jpg 1600w,
opera-2000.jpg 2000w">
</picture>
- What have I tried? a) https://wordpress.stackexchange.com/questions/256351/hook-after-image-is-uploaded-and-image-sizes-generated/256352 b) https://wordpress.stackexchange.com/questions/38582/hook-to-get-image-filename-when-it-is-uploaded c) WordPress - Blur Image on Upload d) Convert Images into WebP e) I have read through and understood https://kinsta.com/blog/wordpress-hooks/#filters-example-2-insert-content-after-a-post - however what I am missing is a way to see/know what data I am working with, i.e.
add_filter('wp_generate_attachment_metadata', 'gd_webp_encode', 10, 3);
function gd_webp_encode($metadata, $attachment_id, $context){
ob_start();
echo $attachment_id;
echo $metadata;
ob_end_clean();
return $metadata;
}
will show me nothing, same with trying to log to console or to a file in the plugin folder. Without knowing/seeing the data and what variable names hold what data I am just doing trial and error and guessing, no coding. So given above code, how would it first of all be possible to see/know what variables hold what data at that point in time and make that readable somewhere, i.e. in a log file in the plugin folder?
Bottom line, given above setup, help me understand what variables hold what data i.e. after upload in a hook and include code where I can make a WebP version of all the sizes and the original created using the GD image engine.
