Rethink image manipulations with Glide (ForumPHP 2015)

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.