Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Rethink image manipulations with Glide
Search
Jonathan Reinink
May 21, 2015
Technology
3
470
Rethink image manipulations with Glide
Jonathan Reinink
May 21, 2015
Tweet
Share
More Decks by Jonathan Reinink
See All by Jonathan Reinink
The formula to awesome docs (phpDay 2017)
reinink
0
130
How to open source a PHP package (phpDay 2017)
reinink
1
110
The formula to awesome docs (Lone Star PHP 2016)
reinink
0
900
The PHP Package Checklist (Lone Star PHP 2016)
reinink
0
260
Framework agnostic packages for the win (SkiPHP 2016)
reinink
1
260
Framework agnostic packages for the win (ForumPHP 2015)
reinink
8
1k
Rethink image manipulations with Glide (ForumPHP 2015)
reinink
0
570
Enough about Classes, Let's Talk Templates
reinink
8
3.7k
Practical deployments for average projects
reinink
4
390
Other Decks in Technology
See All in Technology
不動産売買取引におけるAIの可能性とプロダクトでのAI活用
zabio3
0
270
DroidKaigi 2024 たすけて!ViewModel
mhidaka
5
940
Creative UIs with Compose: DroidKaigi 2024
chrishorner
1
580
エンジニア視点で見る、 組織で運用されるデザインシステムにするには
shunya078
1
310
Cloud Run と GitHub Template Repository による軽量なアプリケーションプラットフォーム/ #nikkei_tech_talk
nikkei_engineer_recruiting
0
110
リアルお遍路+SORACOM IoT
ozk009
1
140
サーバレスでモバイルアプリ開発! NTTコム「ビジネスdアプリ」のアーキテクチャ / The architecture of business d app
nttcom
12
240
Jetpack Compose Modifier 徹底解説 / Jetpack Compose Modifier
wiroha
0
200
サプライチェーン攻撃に備える
ryunen344
0
290
LINEヤフーのフロントエンド組織・体制の紹介
lycorp_recruit_jp
1
1.2k
PDF Viewer作成の今までとこれから
hunachi
0
470
Developer Experienceを向上させる基盤づくりの取り組み事例集
coconala_engineer
0
150
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
28
1.6k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
BBQ
matthewcrist
83
9.2k
Navigating Team Friction
lara
183
13k
Being A Developer After 40
akosma
84
590k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
What's new in Ruby 2.0
geeforr
340
31k
Scaling GitHub
holman
458
140k
Adopting Sorbet at Scale
ufuk
73
8.9k
How STYLIGHT went responsive
nonsquared
93
5.1k
Facilitating Awesome Meetings
lara
49
5.9k
Bash Introduction
62gerente
608
210k
Transcript
None
Jonathan Reinink Canadian web developer.
A native PHP template system
What is Glide? A wonderfully easy on-demand image manipulation library
written in PHP.
Glide has an HTTP based API. Manipulate images using GET
parameters.
/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
So where did the idea come from? Anyone remember TimThumb?
None
None
It’s a good time for HTTP + PHP. Middleware and
PSR-7 are changing how we build applications in PHP.
Only save your original images, not the manipulations. Then request
different image sizes when they are needed.
Use GD or ImageMagick. Glide is built on the Intervention
Image library.
use League\Glide\ServerFactory; ! $server = ServerFactory::create([ 'driver' => 'imagick', ]);
Use any file storage. Glide uses the Flysystem file system
abstraction library.
Use Glide in an app, or create a separate image
server. Offload image manipulations to a separate server on larger projects
Basic Glide installation. Using out-of-the-box settings.
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 ] ); });
get('/img/{path}', function ($path) { ! $server = ServerFactory::create([ 'source' =>
'path/to/source', 'cache' => 'path/to/cache', ]); ! $server->outputImage($path, $_GET); });
get('/img/{path}', function (Request $request) { ! $server = ServerFactory::create([ 'source'
=> 'path/to/source', 'cache' => 'path/to/cache', ]); ! $server->outputImage($request); });
get('/img/{path}', function (Request $request, Glide $glide) { $glide->outputImage($request); });
https://vimeo.com/118089742
Setup Glide using S3. Free your images from the local
disk.
$server = ServerFactory::create([ 'source' => 'path/to/source', 'cache' => 'path/to/cache', ]);
$source = new Local('path/to/source'); $cache = new Local('path/to/cache'); ! $server
= ServerFactory::create([ 'source' => new Filesystem($source), 'cache' => new Filesystem($cache), ]);
$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), ]);
Set a max image size. Prevent accidental resizing of massive
images.
use League\Glide\ServerFactory; ! $server = ServerFactory::create([ 'max_image_size' => 2000*2000, ]);
Prevent URL hacking by signing the image URLs. An important
security step that should always be used in production.
$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 '<img src="'.$url.'">';
$templates->registerFunction('img', function ($path, $params) { ! $builder = UrlBuilderFactory::create( 'http://example.com',
'your-sign-key' ); ! return $builder->getUrl($path, $params); });
<img src="<?=$this->img('cat.jpg', ['w' => 500])?>">
<img src="http://example.com/img/cat.jpg? w=500&token=af3dc18fc6bfb2afb521e587c348b904">
$request = Request::createFromGlobals(); $signature = SignatureFactory::create('your-sign-key'); ! try { $signature->validateRequest($request);
} catch (SignatureException $e) { // Handle error }
Resizing.
/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
Cropping.
/img/kayaks.jpg?w=500&h=500&fit=crop
/img/kayaks.jpg?w=500&h=500&fit=crop&crop=left
/img/kayaks.jpg?rect=300,300,810,140
/img/kayaks.jpg?or=90
Adjustments.
/img/kayaks.jpg?bri=-25
/img/kayaks.jpg?con=25
/img/kayaks.jpg?sharp=15
Effects.
/img/kayaks.jpg?blur=10
/img/kayaks.jpg?pixel=10
/img/kayaks.jpg?filt=sepia
/img/kayaks.jpg?filt=greyscale
Output.
/img/kayaks.jpg?fm=gif /img/kayaks.jpg?fm=png /img/kayaks.jpg?fm=jpg /img/kayaks.jpg?fm=jpg&q=90
Extend! Adding your own manipulations.
Moving forward.
Thanks! Follow me on Twitter at @reinink Rate this talk
https://joind.in/13761 Thanks!