Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
Jonathan Reinink
Canadian web developer.
Slide 3
Slide 3 text
A native PHP template
system
Slide 4
Slide 4 text
What is Glide?
A wonderfully easy on-demand image
manipulation library written in PHP.
Slide 5
Slide 5 text
Glide has an
HTTP based API.
Manipulate images using GET parameters.
Slide 6
Slide 6 text
/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
Slide 7
Slide 7 text
So where did the
idea come from?
Anyone remember TimThumb?
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
It’s a good time
for HTTP + PHP.
Middleware and PSR-7 are changing
how we build applications in PHP.
Slide 11
Slide 11 text
Only save your original images,
not the manipulations.
Then request different image
sizes when they are needed.
Slide 12
Slide 12 text
Use GD or ImageMagick.
Glide is built on the Intervention Image library.
Slide 13
Slide 13 text
use League\Glide\ServerFactory;
!
$server = ServerFactory::create([
'driver' => 'imagick',
]);
Slide 14
Slide 14 text
Use any file storage.
Glide uses the Flysystem file system abstraction library.
Slide 15
Slide 15 text
Use Glide in an app, or
create a separate image server.
Offload image manipulations to a
separate server on larger projects
Slide 16
Slide 16 text
Basic Glide installation.
Using out-of-the-box settings.
Slide 17
Slide 17 text
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
]
);
});
Slide 18
Slide 18 text
get('/img/{path}', function ($path) {
!
$server = ServerFactory::create([
'source' => 'path/to/source',
'cache' => 'path/to/cache',
]);
!
$server->outputImage($path, $_GET);
});
Slide 19
Slide 19 text
get('/img/{path}', function (Request $request) {
!
$server = ServerFactory::create([
'source' => 'path/to/source',
'cache' => 'path/to/cache',
]);
!
$server->outputImage($request);
});
Slide 20
Slide 20 text
get('/img/{path}', function (Request $request, Glide $glide) {
$glide->outputImage($request);
});
Slide 21
Slide 21 text
https://vimeo.com/118089742
Slide 22
Slide 22 text
Setup Glide using S3.
Free your images from the local disk.
Slide 23
Slide 23 text
$server = ServerFactory::create([
'source' => 'path/to/source',
'cache' => 'path/to/cache',
]);
Slide 24
Slide 24 text
$source = new Local('path/to/source');
$cache = new Local('path/to/cache');
!
$server = ServerFactory::create([
'source' => new Filesystem($source),
'cache' => new Filesystem($cache),
]);
Slide 25
Slide 25 text
$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),
]);
Slide 26
Slide 26 text
Set a max image size.
Prevent accidental resizing of massive images.
Slide 27
Slide 27 text
use League\Glide\ServerFactory;
!
$server = ServerFactory::create([
'max_image_size' => 2000*2000,
]);
Slide 28
Slide 28 text
Prevent URL hacking by
signing the image URLs.
An important security step that
should always be used in production.
Slide 29
Slide 29 text
$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 '
';
Slide 30
Slide 30 text
$templates->registerFunction('img', function ($path, $params) {
!
$builder = UrlBuilderFactory::create(
'http://example.com',
'your-sign-key'
);
!
return $builder->getUrl($path, $params);
});
Slide 31
Slide 31 text
?>)
Slide 32
Slide 32 text
Slide 33
Slide 33 text
$request = Request::createFromGlobals();
$signature = SignatureFactory::create('your-sign-key');
!
try {
$signature->validateRequest($request);
} catch (SignatureException $e) {
// Handle error
}
Slide 34
Slide 34 text
Resizing.
Slide 35
Slide 35 text
/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
Slide 36
Slide 36 text
Cropping.
Slide 37
Slide 37 text
/img/kayaks.jpg?w=500&h=500&fit=crop
Slide 38
Slide 38 text
/img/kayaks.jpg?w=500&h=500&fit=crop&crop=left
Slide 39
Slide 39 text
/img/kayaks.jpg?rect=300,300,810,140
Slide 40
Slide 40 text
/img/kayaks.jpg?or=90
Slide 41
Slide 41 text
Adjustments.
Slide 42
Slide 42 text
/img/kayaks.jpg?bri=-25
Slide 43
Slide 43 text
/img/kayaks.jpg?con=25
Slide 44
Slide 44 text
/img/kayaks.jpg?sharp=15
Slide 45
Slide 45 text
Effects.
Slide 46
Slide 46 text
/img/kayaks.jpg?blur=10
Slide 47
Slide 47 text
/img/kayaks.jpg?pixel=10
Slide 48
Slide 48 text
/img/kayaks.jpg?filt=sepia
Slide 49
Slide 49 text
/img/kayaks.jpg?filt=greyscale
Slide 50
Slide 50 text
Output.
Slide 51
Slide 51 text
/img/kayaks.jpg?fm=gif
/img/kayaks.jpg?fm=png
/img/kayaks.jpg?fm=jpg
/img/kayaks.jpg?fm=jpg&q=90
Slide 52
Slide 52 text
Extend!
Adding your own manipulations.
Slide 53
Slide 53 text
Moving forward.
Slide 54
Slide 54 text
Thanks!
Follow me on Twitter at @reinink
Rate this talk https://joind.in/13761
Thanks!