Hello,

I've got this plugin working almost perfectly, yay! It's a huge help, given Cloudflare hasn't done this themselves. Thank you.

Odd issue: all image rewrites are taking on the original image dimensions, rather than the container or the specified image width/height. Eg: woocommerce images in the image gallery are rewritten as 2000px, while the width and height attributes are 600px (as is the container).

Is this something I need to add to config.php?

Cheers!

I am not sure if this is the intended behaviour, but I assumed using CF Image Optimization would mean that all manipulations would be done on the source file rather than the thumbnail. Here is a sample excerpt from a vanilla installation with the Twenty twenty theme.

<img loading="lazy" src="http://site.com/cdn-cgi/image/width=580,height=386,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2022/02/image-1024x682.jpg"
 alt="" class="wp-image-13"

srcset="http://site.com/cdn-cgi/image/width=1024,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2022/02/image-1024x682.jpg 1024w, 
http://site.com/cdn-cgi/image/width=300,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2022/02/image-300x200.jpg 300w, 
http://site.com/cdn-cgi/image/width=768,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2022/02/image-768x512.jpg 768w, 
http://site.com/cdn-cgi/image/width=1536,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2022/02/image-1536x1024.jpg 1536w, 
http://site.com/cdn-cgi/image/width=1200,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2022/02/image-1200x800.jpg 1200w, 
http://site.com/cdn-cgi/image/width=1980,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2022/02/image-1980x1320.jpg 1980w, 
http://site.com/cdn-cgi/image/width=2000,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2022/02/image.jpg 2000w" 

sizes="(max-width: 1024px) 100vw, 1024px" width="1024" height="682"> 

For each line, the plugin is pulling the thumbnail size (e.g. image-1024x682.jpg) rather than using image.jpg (original) to perform the manipulation.

Disclaimer: Cloudflare is not enabled on this site yet as I just wanted to see the URL structure for planning purposes.

Hi, Using the CF image resizing the images used as a background (Kadence row block) are being missed in the resize rewrite. look at my home page here: Libra Photographic Is there a way I can implement them in the code?

Thanks in advance

WP Youtube Lyte has a thumbnail image caching feature. Cloudflare image resizing is trying to rearrange the URL in the WP YouTube Lyte thumbnail cache:

An example URL: https://website.com/wp-content/plugins/wp-youtube-lyte/lyteCache.php?origThumbUrl=https%3A%2F%2Ftilta.com%2Fcdn-cgi%2Fimage%2Fquality%3D65%2Cformat%3Dauto%2Conerror%3Dredirect%2Cmetadata%3Dnone%2Fvi%2FybDY8eRnNEA%2Fmaxresdefault.jpg

It should be showing ytimg.com instead of my website url and returns an error. Deactivating the plugin doesn't seem to resolve the issue. Any ideas on how to fix this? thanks

Hi!

I really like your plugin. Thanks a lot for creating it. Also wanted to do my part and give a small donation.

There is one thing though that I'm struggling with and that is combining the plugin with LazyLoading.

Do you know if I'm missing something here or that it's an issue that could at some point be solved?

Warning: Undefined variable $safe_text in /var/www/html/wp-content/plugins/cloudflare-image-resizing/cloudflare-image-resizing.php on line 75

Warning: Undefined variable $safe_text in /var/www/html/wp-content/plugins/cloudflare-image-resizing/cloudflare-image-resizing.php on line 75

Warning: Undefined variable $safe_text in /var/www/html/wp-content/plugins/cloudflare-image-resizing/cloudflare-image-resizing.php on line 75

Warning: Undefined variable $safe_text in /var/www/html/wp-content/plugins/cloudflare-image-resizing/cloudflare-image-resizing.php on line 75

Warning: Undefined variable $safe_text in /var/www/html/wp-content/plugins/cloudflare-image-resizing/cloudflare-image-resizing.php on line 75

Warning: Undefined variable $safe_text in /var/www/html/wp-content/plugins/cloudflare-image-resizing/cloudflare-image-resizing.php on line 75

Warning: Undefined variable $safe_text in /var/www/html/wp-content/plugins/cloudflare-image-resizing/cloudflare-image-resizing.php on line 75

Warning: Undefined variable $safe_text in /var/www/html/wp-content/plugins/cloudflare-image-resizing/cloudflare-image-resizing.php on line 75

Warning: Undefined variable $safe_text in /var/www/html/wp-content/plugins/cloudflare-image-resizing/cloudflare-image-resizing.php on line 75

We use Trellis to deploy our site, therefore the config.php file is replaced with an empty version during each deploy when the plugins are installed. This change allows us to configure the constants in our Trellis environment config files, yet doesn't break normal vanilla wordpress usage.

Fixes #4

Added some regex to remove the image dimensions sometimes added by WordPress to images so Cloudflare is always resizing based on the source image.

This allows image resizing to maintain quality vs trying to resize one that's already been scaled down.

This also maximizes Edge efficiency as according to Cloudflare docs they will pull and cache the source image, then all future resize requests will use that source image, reducing the amount of origin pulls.

Hello there, First, happy new year to all of you!

I'm reaching you about a little improvement in the cloudflare-image-resizing.php on lines 215/220 and subsequent calls :

• 269/274,
• 322/328,
• 385/391,
• 441/447,
• and finally 526/531.

I reach errors due to encoding errors while being in UTF-8. I made a fix on my website but I think it could be an improvement for all user if you can make it your way !

// Original code line 215
$image[0] = CF_IMAGE_RESIZING_SITE_URL.'/cdn-cgi/image/width='.$sizes[0].',height='.$sizes[1].',fit='.CF_IMAGE_RESIZING_FIT.',quality='.CF_IMAGE_RESIZING_QUALITY.',format='.CF_IMAGE_RESIZING_FORMAT.',onerror='.CF_IMAGE_RESIZING_ONERROR.',metadata='.CF_IMAGE_RESIZING_METADATA.CF_IMAGE_RESIZING_SITE_FOLDER.$image_path;

// New code DZ
// New variables defined before the condition tests
// I made it in 2 parts to manage if/else actions
$mashup_size = "width=".$sizes[0].",height=".$sizes[1].",fit=".CF_IMAGE_RESIZING_FIT ;
$mashup_size_encoded = urlencode($mashup_size) ;
$mashup_extradata = "quality=".CF_IMAGE_RESIZING_QUALITY.",format=".CF_IMAGE_RESIZING_FORMAT.",onerror=".CF_IMAGE_RESIZING_ONERROR.",metadata=".CF_IMAGE_RESIZING_METADATA.CF_IMAGE_RESIZING_SITE_FOLDER;
$mashup_extradata_encoded = urlencode($mashup_extradata) ;	

// Then the replacement code of line 215, calling encoded in if
$image[0] = CF_IMAGE_RESIZING_SITE_URL.'/cdn-cgi/image/'.$mashup_size_encoded.','.$mashup_extradata_encoded.$image_path;
// And line 220 in else
$image[0] = CF_IMAGE_RESIZING_SITE_URL.'/cdn-cgi/image/'.$mashup_extradata_encoded.$image_path;

I replicate these changes on the 6 pairs of calls (lines mentioned before) but I guess you can make it in a better way at a higher level in the process.

Hope to hear from you, if you have any questions too. Best regards, Denis

Using BeaverBuilder page builder if I set the thumbnails to a custom crop like "landscape" they appear in the original aspect ratio when then plugin is active. The dimensions of the crop at in the image files name so that is probably the cause.

src="https://mysite.com/wp-content/uploads/bb-plugin/cache/image-1456x1024-landscape.jpg"

Strange issue. I've successfully installed your plugin on other WP sites in the past, but downloading your zip and uploading it via WP dashboard > Plugins results in an error:

Installing plugin from uploaded file: cloudflare-image-resizing-main.zip Unpacking the package…

Installing the plugin…

The package could not be installed. No valid plugins were found.

Plugin installation failed.

Any idea what I may be doing wrong?

The site url is being saved as http instead of https on the options-general.php?page=cf-image-resizing-settings page.

This breaks the images sites using https.

I had to manually change my site url in config.php to https and everything works.

I'm noticing that some of my images are not being picked up by the script, seems to only impact images being served out of the themes directory rather than the uploads directory on my WP install. Any suggestions gratefully received. An example is mission-bg.png on site https://kumoco.com

Config: define('CF_IMAGE_RESIZING_SITE_URL', 'https://kumoco.com'); define('CF_IMAGE_RESIZING_SITE_FOLDER', ''); define('CF_IMAGE_RESIZING_HOME_DIR', 'ABSPATHi'); define('CF_IMAGE_RESIZING_HOOK_1', TRUE); define('CF_IMAGE_RESIZING_HOOK_2', TRUE); define('CF_IMAGE_RESIZING_HOOK_3', TRUE); define('CF_IMAGE_RESIZING_HOOK_4', FALSE); define('CF_IMAGE_RESIZING_HOOK_5', TRUE); define('CF_IMAGE_RESIZING_HOOK_6', TRUE); define('CF_IMAGE_RESIZING_FIT', 'crop'); define('CF_IMAGE_RESIZING_QUALITY', 80); define('CF_IMAGE_RESIZING_FORMAT', 'auto'); define('CF_IMAGE_RESIZING_ONERROR', 'redirect'); define('CF_IMAGE_RESIZING_METADATA', 'none'); define('CF_IMAGE_RESIZING_STRIP_SIZES', TRUE); define('CF_IMAGE_RESIZING_ADD_MISSING_SIZES', TRUE); define('CF_IMAGE_RESIZING_FIX_VC_COMPOSER', FALSE); define('CF_IMAGE_RESIZING_WHITELIST', FALSE); define('CF_IMAGE_RESIZING_WHITELIST_URLS', [ 'fbcdn.net', 'twimg.com', 'cdninstagram.com', 'paypalobjects.com' ]);

Thanks for creating these scripts, finding them very useful.