Rethink image manipulations with Glide

Transcript

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