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
550
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
180
How to open source a PHP package (phpDay 2017)
reinink
1
150
The formula to awesome docs (Lone Star PHP 2016)
reinink
0
1k
The PHP Package Checklist (Lone Star PHP 2016)
reinink
0
320
Framework agnostic packages for the win (SkiPHP 2016)
reinink
1
330
Framework agnostic packages for the win (ForumPHP 2015)
reinink
8
1.1k
Rethink image manipulations with Glide (ForumPHP 2015)
reinink
0
660
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
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
13k
Rethinking Incident Response: Context-Aware AI in Practice
rrreeeyyy
2
940
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
470
[SRE NEXT] ARR150億円_エンジニア140名_27チーム_17プロダクトから始めるSLO.pdf
satos
5
3k
Talk to Someone At Delta Airlines™️ USA Contact Numbers
travelcarecenter
0
160
Four Keysから始める信頼性の改善 - SRE NEXT 2025
ozakikota
0
410
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
1.3k
LIXIL基幹システム刷新に立ち向かう技術的アプローチについて
tsukuha
1
380
Introduction to Bill One Development Engineer
sansan33
PRO
0
260
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
1
310
ソフトウェアQAがハードウェアの人になったの
mineo_matsuya
3
200
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
18k
Featured
See All Featured
Facilitating Awesome Meetings
lara
54
6.5k
The Invisible Side of Design
smashingmag
301
51k
The Cult of Friendly URLs
andyhume
79
6.5k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Documentation Writing (for coders)
carmenintech
72
4.9k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
How to Ace a Technical Interview
jacobian
278
23k
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!