PHP code example of massif / statamic-responsive-images

1. Go to this page and download the library: Download massif/statamic-responsive-images library. Choose the download type require.

2. Extract the ZIP file and open the index.php.

3. Add this code to the index.php. 
    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

massif / statamic-responsive-images example snippets


// config/responsive-images.php
'tag_alias' => 'pic',   // set to any handle, or null to disable


'preload' => [
    'auto_eager'    => true,
    'auto_priority' => true,
],


return [
    'device_sizes'   => [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    'image_sizes'    => [16, 32, 48, 64, 96, 128, 256, 384],
    'default_sizes'  => '(min-width: 1280px) 640px, (min-width: 768px) 50vw, 90vw',
    'tag_alias'      => 'pic',
    'fallback_width' => 828,

    'formats' => [
        'avif'           => ['enabled' => true, 'quality' => 50],
        'webp'           => ['enabled' => true, 'quality' => 75],
        'fallback'       => ['quality' => 82],
        'detect_support' => true,
        'min_width'      => 0,
    ],

    'markup' => [
        'auto_sizes' => true,
    ],

    'strip_metadata' => false,

    'placeholder' => [
        'enabled' => true,
        'width'   => 32,
        'blur'    => 40,
        'quality' => 40,
        'color'   => ['enabled' => true],
    ],

    'preload' => [
        'auto_eager'    => true,
        'auto_priority' => true,
    ],

    'glide' => [
        'default_fit' => 'crop_focal',
    ],

    'cache' => [
        'store'        => null,
        'prefix'       => 'respimg',
        'metadata_ttl' => 7_776_000,
        'sentinel_ttl' => 60,
    ],
];


  'formats' => ['avif' => ['enabled' => false, 'quality' => 50]],
  
bash
php artisan vendor:publish --tag=responsive-images-config