Rethink image manipulations with Glide (ForumPHP 2015)

Transcript

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