Rethink image manipulations with Glide

Transcript

1. 1.

   None
2. 2.

   Jonathan Reinink Canadian web developer.

3. 3.

   A native PHP template system

4. 4.

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

   written in PHP.
5. 5.

   Glide has an HTTP based API. Manipulate images using GET

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

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

8. 8.

   None
9. 9.

   None
10. 10.

    It’s a good time for HTTP + PHP. Middleware and

    PSR-7 are changing how we build applications in PHP.
11. 11.

    Only save your original images, not the manipulations. Then request

    different image sizes when they are needed.
12. 12.

    Use GD or ImageMagick. Glide is built on the Intervention

    Image library.
13. 13.

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

14. 14.

    Use any file storage. Glide uses the Flysystem file system

    abstraction library.
15. 15.

    Use Glide in an app, or create a separate image

    server. Offload image manipulations to a separate server on larger projects
16. 16.

    Basic Glide installation. Using out-of-the-box settings.

17. 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. 18.

    get('/img/{path}', function ($path) { ! $server = ServerFactory::create([ 'source' =>

    'path/to/source', 'cache' => 'path/to/cache', ]); ! $server->outputImage($path, $_GET); });
19. 19.

    get('/img/{path}', function (Request $request) { ! $server = ServerFactory::create([ 'source'

    => 'path/to/source', 'cache' => 'path/to/cache', ]); ! $server->outputImage($request); });
20. 20.

    get('/img/{path}', function (Request $request, Glide $glide) { $glide->outputImage($request); });

21. 21.

    https://vimeo.com/118089742

22. 22.

    Setup Glide using S3. Free your images from the local

    disk.
23. 23.

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

24. 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. 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. 26.

    Set a max image size. Prevent accidental resizing of massive

    images.
27. 27.

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

28. 28.

    Prevent URL hacking by signing the image URLs. An important

    security step that should always be used in production.
29. 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. 30.

    $templates->registerFunction('img', function ($path, $params) { ! $builder = UrlBuilderFactory::create( 'http://example.com',

    'your-sign-key' ); ! return $builder->getUrl($path, $params); });
31. 31.

    <img src="<?=$this->img('cat.jpg', ['w' => 500])?>">

32. 32.

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

33. 33.

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

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

    Resizing.

35. 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. 36.

    Cropping.

37. 37.

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

38. 38.

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

39. 39.

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

40. 40.

    /img/kayaks.jpg?or=90

41. 41.

    Adjustments.

42. 42.

    /img/kayaks.jpg?bri=-25

43. 43.

    /img/kayaks.jpg?con=25

44. 44.

    /img/kayaks.jpg?sharp=15

45. 45.

    Effects.

46. 46.

    /img/kayaks.jpg?blur=10

47. 47.

    /img/kayaks.jpg?pixel=10

48. 48.

    /img/kayaks.jpg?filt=sepia

49. 49.

    /img/kayaks.jpg?filt=greyscale

50. 50.

    Output.

51. 51.

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

52. 52.

    Extend! Adding your own manipulations.

53. 53.

    Moving forward.

54. 54.

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

    https://joind.in/13761 Thanks!