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 (ForumPH...
Search
Jonathan Reinink
November 24, 2015
Technology
0
660
Rethink image manipulations with Glide (ForumPHP 2015)
Jonathan Reinink
November 24, 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
reinink
3
550
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
Data Engineering Study#30 LT資料
tetsuroito
1
170
Figma Dev Mode MCP Serverを用いたUI開発
zoothezoo
0
230
AIエージェントが書くのなら直接CloudFormationを書かせればいいじゃないですか何故AWS CDKを使う必要があるのさ
watany
18
7.6k
Snowflake Intelligenceという名のAI Agentが切り開くデータ活用の未来とその実現に必要なこと@SnowVillage『Data Management #1 Summit 2025 Recap!!』
ryo_suzuki
1
160
SREの次のキャリアの道しるべ 〜SREがマネジメントレイヤーに挑戦して、 気づいたこととTips〜
coconala_engineer
1
4.3k
SRE with AI:実践から学ぶ、運用課題解決と未来への展望
yoshiiryo1
0
290
ABEMAの本番環境負荷試験への挑戦
mk2taiga
5
1.3k
AIでテストプロセス自動化に挑戦する
sakatakazunori
1
520
サービスを止めるな! DDoS攻撃へのスマートな備えと最前線の事例
coconala_engineer
1
180
microCMSではじめるAIライティング
himaratsu
0
150
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
230
ゼロから始めるSREの事業貢献 - 生成AI時代のSRE成長戦略と実践 / Starting SRE from Day One
shinyorke
PRO
0
110
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Producing Creativity
orderedlist
PRO
346
40k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Writing Fast Ruby
sferik
628
62k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Invisible Side of Design
smashingmag
301
51k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Transcript
None
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.
A native PHP template system
Warning: This talk describes some Glide 1.0 features, which hasn’t
been released yet.
What is Glide? A wonderfully easy on-demand image manipulation library
written in PHP.
Glide Intervention Image Library GD (PHP) ImageMagick
Glide has an HTTP based API. Manipulate images using GET
parameters.
/img/kayaks.jpg
/img/kayaks.jpg?w=800
/img/kayaks.jpg?w=800&h=500
/img/kayaks.jpg?w=600&h=600&fit=crop
/img/kayaks.jpg?w=600&h=600&fit=crop-left
/img/kayaks.jpg?border=10,5000,overlay
kayaks.jpg?mark=billabong.png&markw=30w&markpad=3w&markpos=top-right
/img/kayaks.jpg?blur=10
/img/kayaks.jpg?filt=sepia
/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
So where did this idea come from? Anyone remember TimThumb?
None
None
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.
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 ]); });
Route::get('/img/{path}', function ($path) { ! $server = ServerFactory::create([ 'source' =>
'path/to/source', 'cache' => 'path/to/cache', ]); ! $server->outputImage($path, $_GET); });
Route::get('/img/{path}', function ($path) { ! $server = ServerFactory::create([ 'source' =>
'path/to/source', 'cache' => 'path/to/cache', ]); ! return $server->getImageResponse($path, $_GET); });
Route::get('/img/{path}', function (Glide $server, Request $request, $path) { return $server->getImageResponse($path,
$request->all()); });
HTTP responses. Glide supports a wide range of response types,
including PSR-7 and HttpFoundation.
use League\Glide\Responses\SymfonyResponseFactory; ! $server = ServerFactory::create([ 'response' => SymfonyResponseFactory() ]);
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), ]);
Defaults & presets. Automatically set the default encoding or add
a standard watermark.
$server = ServerFactory::create([ 'defaults' => [ 'mark' => 'logo.png', 'markw'
=> '30w', 'markpad' => '5w', ] ]);
$server = ServerFactory::create([ 'presets' => [ 'small' = [ 'w'
=> 200, 'h' => 200, 'fit' => 'crop', ], ] ]);
<img src="kayaks.jpg?p=small">
<img src="kayaks.jpg?p=small,watermarked">
<img src="kayaks.jpg?p=small,watermarked&filt=sepia">
Set a max image size. Prevent accidental resizing of massive
images.
$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.
// 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 '<img src="'.$url.'">';
<img src="http://example.com/img/cat.jpg? w=500&token=af3dc18fc6bfb2afb521e587c348b904">
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 }
Disabling cache. Let another service, like Varnish, do the work.
$source = new Local('path/to/source'); $cache = new MemoryAdapter(); ! $server
= ServerFactory::create([ 'source' => new Filesystem($source), 'cache' => new Filesystem($cache), ]);
Preprocess images. Helpful on heavy traffic websites.
// 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']); }
Thanks! Follow me on Twitter at @reinink. Rate this talk
https://joind.in/15274.