Rethink image manipulations with Glide (ForumPHP 2015)

Transcript

1. View Slide

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.
   

   View Slide

3. A native PHP template
   system
   

   View Slide

4. Warning:
   This talk describes some Glide 1.0 features,
   which hasn’t been released yet.
   

   View Slide

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

   View Slide

6. Glide
   Intervention Image Library
   GD (PHP) ImageMagick
   

   View Slide

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

   View Slide

8. /img/kayaks.jpg
   

   View Slide

9. /img/kayaks.jpg?w=800
   

   View Slide

10. /img/kayaks.jpg?w=800&h=500
    

    View Slide

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

    View Slide

12. /img/kayaks.jpg?w=600&h=600&fit=crop-left
    

    View Slide

13. /img/kayaks.jpg?border=10,5000,overlay
    

    View Slide

14. kayaks.jpg?mark=billabong.png&markw=30w&markpad=3w&markpos=top-right
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

18. So where did this
    idea come from?
    Anyone remember TimThumb?
    

    View Slide

19. View Slide

20. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

30. Route::get('/img/{path}', function (Glide $server, Request $request, $path) {
    return $server->getImageResponse($path, $request->all());
    });
    

    View Slide

31. HTTP responses.
    Glide supports a wide range of response types,
    including PSR-7 and HttpFoundation.
    

    View Slide

32. use League\Glide\Responses\SymfonyResponseFactory;
    !
    $server = ServerFactory::create([
    'response' => SymfonyResponseFactory()
    ]);
    

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

37. Defaults & presets.
    Automatically set the default encoding
    or add a standard watermark.
    

    View Slide

38. $server = ServerFactory::create([
    'defaults' => [
    'mark' => 'logo.png',
    'markw' => '30w',
    'markpad' => '5w',
    ]
    ]);
    

    View Slide

39. $server = ServerFactory::create([
    'presets' => [
    'small' = [
    'w' => 200,
    'h' => 200,
    'fit' => 'crop',
    ],
    ]
    ]);
    

    View Slide

40. 
    

    View Slide

41. 
    

    View Slide

42. 
    

    View Slide

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

    View Slide

44. $server = ServerFactory::create([
    'max_image_size' => 2000*2000,
    ]);
    

    View Slide

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

    View Slide

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

    View Slide

47. 
    

    View Slide

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
    }
    

    View Slide

49. Disabling cache.
    Let another service, like Varnish, do the work.
    

    View Slide

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

    View Slide

51. Preprocess images.
    Helpful on heavy traffic websites.
    

    View Slide

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

    View Slide

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

    View Slide