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
560
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
190
How to open source a PHP package (phpDay 2017)
reinink
1
160
The formula to awesome docs (Lone Star PHP 2016)
reinink
0
1k
The PHP Package Checklist (Lone Star PHP 2016)
reinink
0
330
Framework agnostic packages for the win (SkiPHP 2016)
reinink
1
420
Framework agnostic packages for the win (ForumPHP 2015)
reinink
8
1.1k
Rethink image manipulations with Glide (ForumPHP 2015)
reinink
0
680
Enough about Classes, Let's Talk Templates
reinink
8
3.7k
Practical deployments for average projects
reinink
4
430
Other Decks in Technology
See All in Technology
20251014_Pythonを実務で徹底的に使いこなした話
ippei0923
0
190
リセラー企業のテクサポ担当が考える、生成 AI 時代のトラブルシュート 2025
kazzpapa3
1
160
新規事業におけるGORM+SQLx併用アーキテクチャ
hacomono
PRO
0
220
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
43k
Adapty_東京AI祭ハッカソン2025ピッチスライド
shinoyamada
0
300
そのWAFのブロック、どう活かす? サービスを守るための実践的多層防御と思考法 / WAF blocks defense decision
kaminashi
0
190
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
260
『OCI で学ぶクラウドネイティブ 実践 × 理論ガイド』 書籍概要
oracle4engineer
PRO
3
220
サイバーエージェント流クラウドコスト削減施策「みんなで金塊堀太郎」
kurochan
2
1.2k
データ戦略部門 紹介資料
sansan33
PRO
1
3.7k
LLMアプリの地上戦開発計画と運用実践 / 2025.10.15 GPU UNITE 2025
smiyawaki0820
1
530
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
75
5.1k
Fireside Chat
paigeccino
40
3.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
8
910
Code Review Best Practice
trishagee
72
19k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
How to Think Like a Performance Engineer
csswizardry
27
2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
How GitHub (no longer) Works
holman
315
140k
Automating Front-end Workflow
addyosmani
1371
200k
Mobile First: as difficult as doing things right
swwweet
224
10k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
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!