Rethink image manipulations with Glide (ForumPHP 2015)

Rethink image manipulations with Glide (ForumPHP 2015)

6074dbe5dfa361c9888a705f40a49af4?s=128

Jonathan Reinink

November 24, 2015
Tweet

Transcript

  1. None
  2. Jonathan Reinink Software developer from Canada. Been writing PHP for

    over 15 years. Marketing agency for over a decade. Started contract development this year. I <3 open source.
  3. A native PHP template system

  4. Warning: This talk describes some Glide 1.0 features, which hasn’t

    been released yet.
  5. What is Glide? A wonderfully easy on-demand image manipulation library

    written in PHP.
  6. Glide Intervention Image Library GD (PHP) ImageMagick

  7. Glide has an HTTP based API. Manipulate images using GET

    parameters.
  8. /img/kayaks.jpg

  9. /img/kayaks.jpg?w=800

  10. /img/kayaks.jpg?w=800&h=500

  11. /img/kayaks.jpg?w=600&h=600&fit=crop

  12. /img/kayaks.jpg?w=600&h=600&fit=crop-left

  13. /img/kayaks.jpg?border=10,5000,overlay

  14. kayaks.jpg?mark=billabong.png&markw=30w&markpad=3w&markpos=top-right

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

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

  17. /img/kayaks.jpg?fm=gif /img/kayaks.jpg?fm=png /img/kayaks.jpg?fm=jpg /img/kayaks.jpg?fm=pjpg Encoding. /img/kayaks.jpg?fm=jpg&q=90

  18. So where did this idea come from? Anyone remember TimThumb?

  19. None
  20. None
  21. Only save your original images, not the manipulations. Then request

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

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

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

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

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

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

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

    'path/to/source', 'cache' => 'path/to/cache', ]); ! return $server->getImageResponse($path, $_GET); });
  30. Route::get('/img/{path}', function (Glide $server, Request $request, $path) { return $server->getImageResponse($path,

    $request->all()); });
  31. HTTP responses. Glide supports a wide range of response types,

    including PSR-7 and HttpFoundation.
  32. use League\Glide\Responses\SymfonyResponseFactory; ! $server = ServerFactory::create([ 'response' => SymfonyResponseFactory() ]);

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

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

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

    = ServerFactory::create([ 'source' => new Filesystem($source), 'cache' => new Filesystem($cache), ]);
  36. $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), ]);
  37. Defaults & presets. Automatically set the default encoding or add

    a standard watermark.
  38. $server = ServerFactory::create([ 'defaults' => [ 'mark' => 'logo.png', 'markw'

    => '30w', 'markpad' => '5w', ] ]);
  39. $server = ServerFactory::create([ 'presets' => [ 'small' = [ 'w'

    => 200, 'h' => 200, 'fit' => 'crop', ], ] ]);
  40. <img src="kayaks.jpg?p=small">

  41. <img src="kayaks.jpg?p=small,watermarked">

  42. <img src="kayaks.jpg?p=small,watermarked&filt=sepia">

  43. Set a max image size. Prevent accidental resizing of massive

    images.
  44. $server = ServerFactory::create([ 'max_image_size' => 2000*2000, ]);

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

    security step that should always be used in production.
  46. // Create a URL builder $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.'">';
  47. <img src="http://example.com/img/cat.jpg? w=500&token=af3dc18fc6bfb2afb521e587c348b904">

  48. use League\Glide\Signatures\SignatureFactory; use League\Glide\Signatures\SignatureException; ! try { // Validate HTTP

    signature SignatureFactory::create('your-sign-key') ->validateRequest($path, $_GET); } catch (SignatureException $e) { // Handle error }
  49. Disabling cache. Let another service, like Varnish, do the work.

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

    = ServerFactory::create([ 'source' => new Filesystem($source), 'cache' => new Filesystem($cache), ]);
  51. Preprocess images. Helpful on heavy traffic websites.

  52. // Handle your image upload $image = ... ! //

    Dispatch the job to your queue $this->dispatch( new ProcessImageManipulations($image) ) ! // Run the job foreach (['small', 'medium', 'large'] as $size) { $glide->makeImage($image['path'], ['p' => 'small']); }
  53. Thanks! Follow me on Twitter at @reinink. Rate this talk

    https://joind.in/15274.