Install Plugin

Run the following command in your terminal or install from the marketplace

$ php artisan plugin:install GoTech.Cdn

Configuration

1. Edit the config/filesystems.php with your cdn credentials & endpoint.
2. Go to backend settings > CDN and select your configured disk.

Digitalocean Spaces (Optional)

If you want to use the CDN services of digitalocean (Spaces) You must add this configurationafter 's3' disk to your filesystems.php

'do' => [
    'driver' => 's3',
    'key'    => 'KEY',
    'secret' => 'SECRET_KEY',
    'region' => 'SFO2', // replace with what corresponds https://docs.digitalocean.com/products/spaces/
    'bucket' => 'your-cdn', // replace with what corresponds
    'endpoint' => 'https://sfo2.digitaloceanspaces.com', // replace with what corresponds
    'visibility'    => 'public', // is public required
    'subdomain' => 'https://cdn.domain.tld' // replace with what corresponds
],

Usage

Use the filter |cdn to create and get the link from cdn file.

Get imagen from cdn with twig filter |theme

{{ 'assets/images/image1.jpg'|theme|cdn }}

Get styles from cdn with twig filter |theme

{{ 'assets/css/style.css'|theme|cdn }}

Get scripts from cdn with twig filter |theme

{{ 'assets/js/scripts.js'|theme|cdn }}

Get image from cdn with twig filter |media & |webp

{{ 'backgrounds/bg1.jpg'|media|webp|cdn }}

Get image from cdn with System\Models\File instance

{{ post.featured_images.first|cdn }}

Get image thumb from cdn

{{ post.featured_images.first.thumb(800, 600, {'mode':'crop'})|cdn }}

filter |cdn parameters

{{ image.path|cdn(<disk :optional>) }}

Where disk 's3' it is by default.

A little challenge

Finally, I invite you to take a Google PageSpeed Insights test before and after the implementation, and share the results with your review.

Thank you!

Take a look at the GoTech.Webp plugin