Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rethink image manipulations with Glide

Rethink image manipulations with Glide

Jonathan Reinink

May 21, 2015
Tweet

More Decks by Jonathan Reinink

Other Decks in Technology

Transcript

  1. View Slide

  2. Jonathan Reinink
    Canadian web developer.

    View Slide

  3. A native PHP template
    system

    View Slide

  4. What is Glide?
    A wonderfully easy on-demand image
    manipulation library written in PHP.

    View Slide

  5. Glide has an
    HTTP based API.
    Manipulate images using GET parameters.

    View Slide

  6. /img/kayaks.jpg
    /img/kayaks.jpg?w=500
    /img/kayaks.jpg?w=500&h=600
    /img/kayaks.jpg?w=500&h=600&fit=crop
    /img/kayaks.jpg?w=500&h=600&fit=crop&filt=sepia

    View Slide

  7. So where did the
    idea come from?
    Anyone remember TimThumb?

    View Slide

  8. View Slide

  9. View Slide

  10. It’s a good time
    for HTTP + PHP.
    Middleware and PSR-7 are changing
    how we build applications in PHP.

    View Slide

  11. Only save your original images,
    not the manipulations.
    Then request different image
    sizes when they are needed.

    View Slide

  12. Use GD or ImageMagick.
    Glide is built on the Intervention Image library.

    View Slide

  13. use League\Glide\ServerFactory;
    !
    $server = ServerFactory::create([
    'driver' => 'imagick',
    ]);

    View Slide

  14. Use any file storage.
    Glide uses the Flysystem file system abstraction library.

    View Slide

  15. Use Glide in an app, or
    create a separate image server.
    Offload image manipulations to a
    separate server on larger projects

    View Slide

  16. Basic Glide installation.
    Using out-of-the-box settings.

    View Slide

  17. get('/img/users/{id}', function ($id) {
    !
    $server = ServerFactory::create([
    'source' => 'path/to/source',
    'cache' => 'path/to/cache',
    ]);
    !
    $server->outputImage(
    'users/'.$id.'.jpg',
    [
    'w' => 300,
    'h' => 400
    ]
    );
    });

    View Slide

  18. get('/img/{path}', function ($path) {
    !
    $server = ServerFactory::create([
    'source' => 'path/to/source',
    'cache' => 'path/to/cache',
    ]);
    !
    $server->outputImage($path, $_GET);
    });

    View Slide

  19. get('/img/{path}', function (Request $request) {
    !
    $server = ServerFactory::create([
    'source' => 'path/to/source',
    'cache' => 'path/to/cache',
    ]);
    !
    $server->outputImage($request);
    });

    View Slide

  20. get('/img/{path}', function (Request $request, Glide $glide) {
    $glide->outputImage($request);
    });

    View Slide

  21. https://vimeo.com/118089742

    View Slide

  22. Setup Glide using S3.
    Free your images from the local disk.

    View Slide

  23. $server = ServerFactory::create([
    'source' => 'path/to/source',
    'cache' => 'path/to/cache',
    ]);

    View Slide

  24. $source = new Local('path/to/source');
    $cache = new Local('path/to/cache');
    !
    $server = ServerFactory::create([
    'source' => new Filesystem($source),
    'cache' => new Filesystem($cache),
    ]);

    View Slide

  25. $client = S3Client::factory([
    'key' => 'your-key',
    'secret' => 'your-secret',
    ]);
    !
    $s3 = new AwsS3Adapter($client, 'your-bucket');
    $cache = new Local('path/to/cache');
    !
    $server = ServerFactory::create([
    'source' => new Filesystem($s3),
    'cache' => new Filesystem($cache),
    ]);

    View Slide

  26. Set a max image size.
    Prevent accidental resizing of massive images.

    View Slide

  27. use League\Glide\ServerFactory;
    !
    $server = ServerFactory::create([
    'max_image_size' => 2000*2000,
    ]);

    View Slide

  28. Prevent URL hacking by
    signing the image URLs.
    An important security step that
    should always be used in production.

    View Slide

  29. $builder = UrlBuilderFactory::create(
    'http://example.com',
    'your-sign-key'
    );
    !
    // Generate a URL
    $url = $builder->getUrl('cat.jpg', ['w' => 500]);
    !
    // Use the URL in your app
    echo '';

    View Slide

  30. $templates->registerFunction('img', function ($path, $params) {
    !
    $builder = UrlBuilderFactory::create(
    'http://example.com',
    'your-sign-key'
    );
    !
    return $builder->getUrl($path, $params);
    });

    View Slide


  31. View Slide


  32. View Slide

  33. $request = Request::createFromGlobals();
    $signature = SignatureFactory::create('your-sign-key');
    !
    try {
    $signature->validateRequest($request);
    } catch (SignatureException $e) {
    // Handle error
    }

    View Slide

  34. Resizing.

    View Slide

  35. /img/kayaks.jpg?w=500
    /img/kayaks.jpg?h=600
    /img/kayaks.jpg?w=500&h=600
    /img/kayaks.jpg?w=500&h=600&fit=contain

    View Slide

  36. Cropping.

    View Slide

  37. /img/kayaks.jpg?w=500&h=500&fit=crop

    View Slide

  38. /img/kayaks.jpg?w=500&h=500&fit=crop&crop=left

    View Slide

  39. /img/kayaks.jpg?rect=300,300,810,140

    View Slide

  40. /img/kayaks.jpg?or=90

    View Slide

  41. Adjustments.

    View Slide

  42. /img/kayaks.jpg?bri=-25

    View Slide

  43. /img/kayaks.jpg?con=25

    View Slide

  44. /img/kayaks.jpg?sharp=15

    View Slide

  45. Effects.

    View Slide

  46. /img/kayaks.jpg?blur=10

    View Slide

  47. /img/kayaks.jpg?pixel=10

    View Slide

  48. /img/kayaks.jpg?filt=sepia

    View Slide

  49. /img/kayaks.jpg?filt=greyscale

    View Slide

  50. Output.

    View Slide

  51. /img/kayaks.jpg?fm=gif
    /img/kayaks.jpg?fm=png
    /img/kayaks.jpg?fm=jpg
    /img/kayaks.jpg?fm=jpg&q=90

    View Slide

  52. Extend!
    Adding your own manipulations.

    View Slide

  53. Moving forward.

    View Slide

  54. Thanks!
    Follow me on Twitter at @reinink
    Rate this talk https://joind.in/13761
    Thanks!

    View Slide