Rethink image manipulations with Glide

Transcript

1. View Slide

2. Jonathan Reinink
   Canadian web developer.
   

   View Slide

3. A native PHP template
   system
   

   View Slide

4. What is Glide?
   A wonderfully easy on-demand image
   manipulation library written in PHP.
   

   View Slide

5. Glide has an
   HTTP based API.
   Manipulate images using GET parameters.
   

   View Slide

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
   

   View Slide

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

   View Slide

8. View Slide

9. View Slide

10. It’s a good time
    for HTTP + PHP.
    Middleware and PSR-7 are changing
    how we build applications in PHP.
    

    View Slide

11. Only save your original images,
    not the manipulations.
    Then request different image
    sizes when they are needed.
    

    View Slide

12. Use GD or ImageMagick.
    Glide is built on the Intervention Image library.
    

    View Slide

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

    View Slide

14. Use any file storage.
    Glide uses the Flysystem file system abstraction library.
    

    View Slide

15. Use Glide in an app, or
    create a separate image server.
    Offload image manipulations to a
    separate server on larger projects
    

    View Slide

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

    View Slide

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
    ]
    );
    });
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. https://vimeo.com/118089742
    

    View Slide

22. Setup Glide using S3.
    Free your images from the local disk.
    

    View Slide

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

    View Slide

24. $source = new Local('path/to/source');
    $cache = new Local('path/to/cache');
    !
    $server = ServerFactory::create([
    'source' => new Filesystem($source),
    'cache' => new Filesystem($cache),
    ]);
    

    View Slide

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),
    ]);
    

    View Slide

26. Set a max image size.
    Prevent accidental resizing of massive images.
    

    View Slide

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

    View Slide

28. Prevent URL hacking by
    signing the image URLs.
    An important security step that
    should always be used in production.
    

    View Slide

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 '';
    

    View Slide

30. $templates->registerFunction('img', function ($path, $params) {
    !
    $builder = UrlBuilderFactory::create(
    'http://example.com',
    'your-sign-key'
    );
    !
    return $builder->getUrl($path, $params);
    });
    

    View Slide

31. 
    

    View Slide

32. 
    

    View Slide

33. $request = Request::createFromGlobals();
    $signature = SignatureFactory::create('your-sign-key');
    !
    try {
    $signature->validateRequest($request);
    } catch (SignatureException $e) {
    // Handle error
    }
    

    View Slide

34. Resizing.
    

    View Slide

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
    

    View Slide

36. Cropping.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

40. /img/kayaks.jpg?or=90
    

    View Slide

41. Adjustments.
    

    View Slide

42. /img/kayaks.jpg?bri=-25
    

    View Slide

43. /img/kayaks.jpg?con=25
    

    View Slide

44. /img/kayaks.jpg?sharp=15
    

    View Slide

45. Effects.
    

    View Slide

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

    View Slide

47. /img/kayaks.jpg?pixel=10
    

    View Slide

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

    View Slide

49. /img/kayaks.jpg?filt=greyscale
    

    View Slide

50. Output.
    

    View Slide

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

    View Slide

52. Extend!
    Adding your own manipulations.
    

    View Slide

53. Moving forward.
    

    View Slide

54. Thanks!
    Follow me on Twitter at @reinink
    Rate this talk https://joind.in/13761
    Thanks!
    

    View Slide