Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rethink image manipulations with Glide (ForumPHP 2015)

Rethink image manipulations with Glide (ForumPHP 2015)

Jonathan Reinink

November 24, 2015
Tweet

More Decks by Jonathan Reinink

Other Decks in Technology

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