Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
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.
Slide 3
Slide 3 text
A native PHP template
system
Slide 4
Slide 4 text
Warning:
This talk describes some Glide 1.0 features,
which hasn’t been released yet.
Slide 5
Slide 5 text
What is Glide?
A wonderfully easy on-demand image
manipulation library written in PHP.
Slide 6
Slide 6 text
Glide
Intervention Image Library
GD (PHP) ImageMagick
Slide 7
Slide 7 text
Glide has an
HTTP based API.
Manipulate images using GET parameters.
Slide 8
Slide 8 text
/img/kayaks.jpg
Slide 9
Slide 9 text
/img/kayaks.jpg?w=800
Slide 10
Slide 10 text
/img/kayaks.jpg?w=800&h=500
Slide 11
Slide 11 text
/img/kayaks.jpg?w=600&h=600&fit=crop
Slide 12
Slide 12 text
/img/kayaks.jpg?w=600&h=600&fit=crop-left
Slide 13
Slide 13 text
/img/kayaks.jpg?border=10,5000,overlay
Slide 14
Slide 14 text
kayaks.jpg?mark=billabong.png&markw=30w&markpad=3w&markpos=top-right
Slide 15
Slide 15 text
/img/kayaks.jpg?blur=10
Slide 16
Slide 16 text
/img/kayaks.jpg?filt=sepia
Slide 17
Slide 17 text
/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
Slide 18
Slide 18 text
So where did this
idea come from?
Anyone remember TimThumb?
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
Only save your original images,
not the manipulations.
Then request different image sizes
when they are needed.
Slide 22
Slide 22 text
Use GD or ImageMagick.
Glide is built on the Intervention Image library.
Slide 23
Slide 23 text
use League\Glide\ServerFactory;
!
$server = ServerFactory::create([
'driver' => 'imagick',
]);
Slide 24
Slide 24 text
Use any file storage.
Glide uses the Flysystem file system abstraction library.
Slide 25
Slide 25 text
Use Glide in an app, or
create a separate image server.
Offload image manipulations to a
separate server on larger projects
Slide 26
Slide 26 text
Basic Glide installation.
Using out-of-the-box settings.
Slide 27
Slide 27 text
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
]);
});
Slide 28
Slide 28 text
Route::get('/img/{path}', function ($path) {
!
$server = ServerFactory::create([
'source' => 'path/to/source',
'cache' => 'path/to/cache',
]);
!
$server->outputImage($path, $_GET);
});
Slide 29
Slide 29 text
Route::get('/img/{path}', function ($path) {
!
$server = ServerFactory::create([
'source' => 'path/to/source',
'cache' => 'path/to/cache',
]);
!
return $server->getImageResponse($path, $_GET);
});
Slide 30
Slide 30 text
Route::get('/img/{path}', function (Glide $server, Request $request, $path) {
return $server->getImageResponse($path, $request->all());
});
Slide 31
Slide 31 text
HTTP responses.
Glide supports a wide range of response types,
including PSR-7 and HttpFoundation.
Slide 32
Slide 32 text
use League\Glide\Responses\SymfonyResponseFactory;
!
$server = ServerFactory::create([
'response' => SymfonyResponseFactory()
]);
Slide 33
Slide 33 text
Setup Glide using S3.
Free your images from the local disk.
Slide 34
Slide 34 text
$server = ServerFactory::create([
'source' => 'path/to/source',
'cache' => 'path/to/cache',
]);
Slide 35
Slide 35 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 36
Slide 36 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 37
Slide 37 text
Defaults & presets.
Automatically set the default encoding
or add a standard watermark.
Slide 38
Slide 38 text
$server = ServerFactory::create([
'defaults' => [
'mark' => 'logo.png',
'markw' => '30w',
'markpad' => '5w',
]
]);
Slide 39
Slide 39 text
$server = ServerFactory::create([
'presets' => [
'small' = [
'w' => 200,
'h' => 200,
'fit' => 'crop',
],
]
]);
Slide 40
Slide 40 text
Slide 41
Slide 41 text
Slide 42
Slide 42 text
Slide 43
Slide 43 text
Set a max image size.
Prevent accidental resizing of massive images.
Slide 44
Slide 44 text
$server = ServerFactory::create([
'max_image_size' => 2000*2000,
]);
Slide 45
Slide 45 text
Prevent URL hacking by
signing the image URLs.
An important security step that should
always be used in production.
Slide 46
Slide 46 text
// 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 '
';
Slide 47
Slide 47 text
Slide 48
Slide 48 text
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
}
Slide 49
Slide 49 text
Disabling cache.
Let another service, like Varnish, do the work.
Slide 50
Slide 50 text
$source = new Local('path/to/source');
$cache = new MemoryAdapter();
!
$server = ServerFactory::create([
'source' => new Filesystem($source),
'cache' => new Filesystem($cache),
]);
Slide 51
Slide 51 text
Preprocess images.
Helpful on heavy traffic websites.
Slide 52
Slide 52 text
// 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']);
}
Slide 53
Slide 53 text
Thanks!
Follow me on Twitter at @reinink.
Rate this talk https://joind.in/15274.