Provides dynamic image sizing and optimization via statically.io and only creates WordPress thumbnails for images that require hard cropping.
Add the following to the composer.json repositories
object:
"repositories": [
{
"type": "vcs",
"url": "git@github.com:moderntribe/tribe-storage-statically-cdn.git"
}
]
Then run:
composer require moderntribe/tribe-storage-statically-cdn
There are two ways to configure this plugin, either directly using the cdn.statically.io
directly, or proxying
to that domain via Nginx.
Ensure you have defined the TRIBE_STORAGE_URL
constant in wp-config.php
to your cloud provider's publicly
accessible URL and it will be replaced to use Statically's CDN for images only:
NOTE: Image URLs are cached, ensure your flush your object cache if you make any changes to the following defines.
// Azure example
define( 'TRIBE_STORAGE_URL', 'https://account.blob.core.windows.net/container' );
URL rewriting would look as follows:
- Original:
https://account.blob.core.windows.net/container/sites/4/2021/06/image.jpg
- Rewritten:
https://cdn.statically.io/img/account.blob.core.windows.net/f=auto,w=1024,h=1024/container/sites/4/2021/06/image.jpg
Ensure you do not have TRIBE_STORAGE_URL
defined, and define the following in wp-config.php
:
define( 'TRIBE_STORAGE_STATICALLY_PROXY', true );
Sample Nginx Proxy
Replace
account.blob.core.windows.net
below with your cloud provider's hostname. Using the example from above it would be:account.blob.core.windows.net/container
# Root site and sub sites
location ~* ^/(.+)?wp-content/uploads {
try_files $uri $uri/ @statically;
}
# Check statically first
location @statically {
# adjust the /container below to your actual container name
rewrite "^/(.+)?wp-content/uploads/(.*=.*?[\/])?(.+)$" /$2container/$3 break;
proxy_http_version 1.1;
resolver 1.1.1.1;
proxy_set_header Connection '';
proxy_set_header Authorization '';
proxy_set_header Host cdn.statically.io;
proxy_hide_header Set-Cookie;
proxy_ignore_headers Set-Cookie;
proxy_intercept_errors on;
recursive_error_pages on;
error_page 400 404 500 = @uploads;
add_header X-Image-Path "$uri" always;
proxy_pass https://cdn.statically.io/img/account.blob.core.windows.net$uri;
}
# Fallback to check Azure directly
location @uploads {
# remove any statically.io params, e.g f=auto,w=518,h=291/
rewrite ^/(.*=.*?[\/])?(.+)$ /$2 break;
proxy_http_version 1.1;
resolver 1.1.1.1;
proxy_set_header Connection '';
proxy_set_header Authorization '';
proxy_set_header Host account.blob.core.windows.net;
proxy_hide_header x-ms-blob-type;
proxy_hide_header x-ms-lease-status;
proxy_hide_header x-ms-request-id;
proxy_hide_header x-ms-version;
proxy_hide_header Set-Cookie;
proxy_ignore_headers Set-Cookie;
proxy_intercept_errors on;
recursive_error_pages on;
error_page 400 404 500 = @imageerror;
add_header X-Image-Path "$uri" always;
add_header Cache-Control max-age=31536000;
proxy_pass https://account.blob.core.windows.net$uri;
}
# If both the above fail, show the default Nginx 404 error page
location @imageerror {
add_header X-Error-Uri "$uri" always;
return 404;
}
URL rewriting would look as follows, and proxied to Statically behind the scenes:
- Original:
https://example.com/wp-content/uploads/sites/4/2021/06/image.jpg
- Rewritten:
https://example.com/wp-content/uploads/f=auto,w=1024,h=1024/sites/4/2021/06/image.jpg
- Proxied URL:
https://cdn.statically.io/img/account.blob.core.windows.net/f=auto,w=1024,h=1024/container/sites/4/2021/06/image.jpg
If you're not concerned with exact cropping, you can let statically.io resize your image based with keeping the same dimension ratio and disable thumbnail creation to see a large performance boost when uploading new images.
For this you have two options:
Option 1: Add this define to wp-config.php
define( 'TRIBE_STORAGE_STATICALLY_CREATE_THUMBNAILS', false );
Option 2: Make the tribe/storage/plugin/statically/create_thumbnails
filter return false, e.g.
add_filter( 'tribe/storage/plugin/statically/create_thumbnails', '__return_false' );
NOTE: Don't forget to clear object caching and regenerate thumbnails each time this option is swapped.
Testing provided via PHPUnit and the Brain Monkey testing suite.
$ composer install
$ ./vendor/bin/phpunit