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

• Tribe Storage Documentation
• Modern Tribe