CloudFlare Image Resizing plugin for WordPress.

Overview

Cloudflare Image Resizing plugin for WordPress

The current Cloudflare plugin for WordPress does not replace URL's automatically for you to use the Image Resizing feature. This plugin does. You will speed up your website drastically by offering to browsers AVIF/WEBP images.

Current features

  • Replaces all single image source URL's (src)
  • Replaces all multiple image source URL's (srcset)
  • Replaces all attachement image source URL's
  • Replaces all esc_attr source URL's (solves several problems with themes that use crappy methods to include images, for example Divi Theme uses "esc_attr($logo)")
  • Replaces all clean_url source URL's (solves aame problem as above with Divi and similar themes)
  • BONUS: Adds missing image default sizes (width/height for Google Page Insights scoring)

Usage

  • Upload the plugin manually via WordPress or FTP, and enable it. That simple.

Notes

  • Before using this plugin please ensure you have turned ON the Cloudflare Image Resizing feature for your domain.
  • At the moment there are no configurable options via WordPress, I did not have time for this. The default settings are: quality=80,format=auto,onerror=redirect,metadata=none

Tips

  • Open the developer console in your browser after enabling this plugin to test functionality. Go to "Images" tab and see if the all the downloaded images have the Cloudflare Image Resizing format.

Contribution

Feel free to contribute with your own functions/methods. Just make sure you tested it properly.

Assistance

In your are in immediate need of commercial help/advice/assistance, I can offer you my assistance for a small fee. Please do contact me via my email or if you cannot do so open an issue.

Support me

Buy me a coffee to give me more energy and write more code :)

Comments
  • Rewrite is specifying original image maximum size

    Rewrite is specifying original image maximum size

    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!

    opened by ShaleSubaru 8
  • SRCSET source image using thumbnails instead of source for manipulation

    SRCSET source image using thumbnails instead of source for manipulation

    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.

    opened by atsbob 4
  • Image background not being rewritten

    Image background not being rewritten

    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

    opened by lipsquid2022 3
  • Issue with WP YouTube Lyte thumbnail image generation

    Issue with WP YouTube Lyte thumbnail image generation

    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

    opened by jake-101 2
  • Lazyload issues

    Lazyload issues

    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?

    opened by ririrop 1
  • Undefined variable most likely because of copy pasting?

    Undefined variable most likely because of copy pasting?

    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
    
    opened by ptomasroos 1
  • Check if certain constants have already been defined before setting

    Check if certain constants have already been defined before setting

    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.

    opened by dixonl90 0
  • Remove dimensions from source image and bump version

    Remove dimensions from source image and bump version

    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.

    opened by bgabler 0
  • urlencode for   /cdn-cgi/image/.....$image_path

    urlencode for /cdn-cgi/image/.....$image_path

    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

    opened by DenisZando 0
  • Image with a special crop set in page builder are defaulting to original aspect ratio

    Image with a special crop set in page builder are defaulting to original aspect ratio

    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"

    opened by snowliondev 0
  • Plugin wont activate/install

    Plugin wont activate/install

    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?

    opened by hairybridget 1
  • Saves http instead of https

    Saves http instead of https

    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.

    cf-image-1

    opened by mattwmc 1
  • Wordpress Theme Images Not being Optimized

    Wordpress Theme Images Not being Optimized

    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.

    opened by pauloshea42 0
Releases(1.3)
  • 1.3(Mar 4, 2022)

  • 1.1(Dec 7, 2021)

    When logged in as admin, you could not see the images in your Media library. A small check was added to not execute any URL replacement if you are logged in as Administrator. If you are logged in as Admin and would like to see the URL replacement, open your WP installation in another browser.

    What's Changed

    • CloudFlare -> Cloudflare by @xtuc in https://github.com/Mecanik/cloudflare-image-resizing/pull/1

    New Contributors

    • @xtuc made their first contribution in https://github.com/Mecanik/cloudflare-image-resizing/pull/1

    Full Changelog: https://github.com/Mecanik/cloudflare-image-resizing/compare/1.0...1.1

    Source code(tar.gz)
    Source code(zip)
  • 1.0(Dec 6, 2021)

Owner
Norbert Boros
Primary Adjunct of Uni-Matrix Zero One. All your code will be assimilated. Resistance is futile.
Norbert Boros
WordPress plugin renames image filenames to be more SEO friendly, based on the post's data and image metadata.

=== Automatic image Rename === Contributors: wpsunshine Tags: image, images, SEO, rename, optimization Requires at least: 5.0 Tested up to: 6.2.2 Stab

null 8 Jun 11, 2023
Cloudflare Turnstile anti-spam plugin for Joomla!

Cloudflare Turnstile anti-spam plugin for Joomla! Turnstile is Cloudflare's smart CAPTCHA alternative. It can be embedded into any website without sen

null 2 Nov 10, 2022
More options when uploading files such as name changes, resizing or compression through TinyPNG.

Kirby Upload Extended More options when uploading files like name changes, resizing via Kirby or compression and optional resizing via TinyPNG. Thanks

Oli 24 Nov 12, 2022
This tool can help you to see the real IP behind CloudFlare protected websites.

CrimeFlare Bypass Hostname Alat untuk melihat IP asli dibalik website yang telah dilindungi CloudFlare. Introduction Alat ini berfungsi untuk melakuka

zidan rahmandani 126 Oct 20, 2021
Adds a "spam protection" field to SilverStripe userforms using Cloudflare's Turnstile service.

Turnstile for Silverstripe Adds a "spam protection" field to SilverStripe userforms using Cloudflare's Turnstile service. Maintainer Contact Ed Chipma

Webbuilders Group 3 Dec 15, 2022
Api.video-wordpress-plugin - The official api.video plugin for WordPress

api.video WordPress Plugin api.video is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managin

api.video 5 Oct 19, 2022
Tom image grid - Plugin for Textpattern CMS : An optionnal grid display for images tab

tom_image_grid tom_image_grid is a plugin for Textpattern CMS. It allows a more compact display (as a grid) of the images list. The plugin adds two bu

Thomas Jund 5 Jun 30, 2019
โš™๏ธ A WordPress plugin to set WordPress options from a .env file.

dotenv A WordPress plugin to set WordPress options from a .env file. Any WPENV_ prefixed variables in the .env will be used to override the WordPress

Brad Parbs 13 Oct 6, 2022
Thirdweb-wp - A community WordPress plugin for thirdweb. Turn your WordPress website into Web3 instantly and easily with thirdweb. ๐Ÿ’ป๐ŸŒ

Thirdweb WP ?? Nominate (@WarenGonzaga) as GitHub Star. If you appreciate his hardwork and dedication to open source. A community WordPress plugin for

Waren Gonzaga 8 Dec 19, 2022
A simple GitScrum plugin for Wordpress. You will be able to manage your projects without having to leave Wordpress.

GitScrum Plugin for Wordpress A simple GitScrum plugin for Wordpress. You will be able to manage your projects without having to leave Wordpress. GitS

GitScrum 4 Nov 30, 2022
A plugin manager for PocketMine-MP downloads plugin from PocketMine-MP official plugin repository

oh-my-pmmp A plugin manager for PocketMine-MP Getting Started Prerequisites Your server MUST RUN the latest version of PocketMine. Installation From P

thebigcrafter 6 Jan 4, 2023
Integrates the ClassicPress Plugin Directory and any plugin stored in GitHub (tagged with classicpress-plugin) in the ClassicPress Admin

ClassicPress Plugin Directory Adds a new screen in a ClassicPress Install where you can browse, install, activate, deactivate, update, delete and pagi

TukuToi 3 Dec 27, 2022
๐Ÿ‹๐Ÿ“ฆโœ‚๏ธ๐Ÿ“‹๐Ÿ“ฆ Docker image of packagist mirror

Docker for Packagist Mirror This project allows you to easily create and update a mirror of the packagist having as dependency only the docker. It is

Webysther Nunes 28 Jan 20, 2022
Docker image that provides static analysis tools for PHP

Static Analysis Tools for PHP Docker image providing static analysis tools for PHP. The list of available tools and the installer are actually managed

Jakub Zalas 1.1k Jan 1, 2023
Smd thumbnail - Multiple image thumbnails of arbitrary dimensions

smd_thumbnail Download | Packagist If youโ€™re bored of one Textpattern thumbnail per image and donโ€™t fancy using an auto-resizing script or relying on

Stef Dawson 9 Dec 9, 2021
Docker-magento - Docker image for Magento 1.6 to 1.9

Docker image for Magento 1.x This repo creates a Docker image for Magento 1.x. Please note The primary goal of this repo is to create Docker images fo

Fu Cheng 144 Nov 18, 2022
Detect the position of a face in an image.

Face Detector PHP GD ๋ฅผ ์ด์šฉํ•ด ์ด๋ฏธ์ง€์˜ ์–ผ๊ตด ์œ„์น˜๋ฅผ ์‹๋ณ„ํ•ฉ๋‹ˆ๋‹ค. mauricesvay/php-facedetection ํ”„๋กœ์ ํŠธ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. js ๋กœ ํฌํŒ…ํ•˜๋ฉฐ ๊ฐœ์„ ํ•œ ์‚ฌํ•ญ๋“ค์„ ์ ์šฉํ•˜์—ฌ error_reporting = E_ALL safe ํ•˜๊ฒŒ

Song Hyo Jin 4 Jul 27, 2022
Simple, image-based, mathematical captcha, with increasing levels of difficulty

simple-captcha Simple, image-based, mathematical captcha, with increasing levels of difficulty version 1.1.0 see also: ModelView a simple, fast, power

Nikos M. 6 Dec 18, 2022