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

Rethink image manipulations with Glide

Rethink image manipulations with Glide

6074dbe5dfa361c9888a705f40a49af4?s=128

Jonathan Reinink

May 21, 2015
Tweet

Transcript

  1. None
  2. Jonathan Reinink Canadian web developer.

  3. A native PHP template system

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

    written in PHP.
  5. Glide has an HTTP based API. Manipulate images using GET

    parameters.
  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

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

  8. None
  9. None
  10. It’s a good time for HTTP + PHP. Middleware and

    PSR-7 are changing how we build applications in PHP.
  11. Only save your original images, not the manipulations. Then request

    different image sizes when they are needed.
  12. Use GD or ImageMagick. Glide is built on the Intervention

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

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

    abstraction library.
  15. Use Glide in an app, or create a separate image

    server. Offload image manipulations to a separate server on larger projects
  16. Basic Glide installation. Using out-of-the-box settings.

  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 ] ); });
  18. get('/img/{path}', function ($path) { ! $server = ServerFactory::create([ 'source' =>

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

    => 'path/to/source', 'cache' => 'path/to/cache', ]); ! $server->outputImage($request); });
  20. get('/img/{path}', function (Request $request, Glide $glide) { $glide->outputImage($request); });

  21. https://vimeo.com/118089742

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

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

  24. $source = new Local('path/to/source'); $cache = new Local('path/to/cache'); ! $server

    = ServerFactory::create([ 'source' => new Filesystem($source), 'cache' => new Filesystem($cache), ]);
  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), ]);
  26. Set a max image size. Prevent accidental resizing of massive

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

  28. Prevent URL hacking by signing the image URLs. An important

    security step that should always be used in production.
  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 '<img src="'.$url.'">';
  30. $templates->registerFunction('img', function ($path, $params) { ! $builder = UrlBuilderFactory::create( 'http://example.com',

    'your-sign-key' ); ! return $builder->getUrl($path, $params); });
  31. <img src="<?=$this->img('cat.jpg', ['w' => 500])?>">

  32. <img src="http://example.com/img/cat.jpg? w=500&token=af3dc18fc6bfb2afb521e587c348b904">

  33. $request = Request::createFromGlobals(); $signature = SignatureFactory::create('your-sign-key'); ! try { $signature->validateRequest($request);

    } catch (SignatureException $e) { // Handle error }
  34. Resizing.

  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

  36. Cropping.

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

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

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

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

  41. Adjustments.

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

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

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

  45. Effects.

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

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

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

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

  50. Output.

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

  52. Extend! Adding your own manipulations.

  53. Moving forward.

  54. Thanks! Follow me on Twitter at @reinink Rate this talk

    https://joind.in/13761 Thanks!