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
680
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
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
reinink
3
560
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
AIとともに歩んでいくデザイナーの役割の変化
lycorptech_jp
PRO
0
890
[re:Inent2025事前勉強会(有志で開催)] re:Inventで見つけた人生をちょっと変えるコツ
sh_fk2
1
360
コンパウンド組織のCRE #cre_meetup
layerx
PRO
1
270
Observability — Extending Into Incident Response
nari_ex
1
490
JSConf JPのwebsiteをGatsbyからNext.jsに移行した話 - Next.jsの多言語静的サイトと課題
leko
2
190
QA業務を変える(!?)AIを併用した不具合分析の実践
ma2ri
0
150
dbtとAIエージェントを組み合わせて見えたデータ調査の新しい形
10xinc
2
730
20251027_findyさん_音声エージェントLT
almondo_event
2
450
Behind Postgres 18: The People, the Code, & the Invisible Work | Claire Giordano | PGConfEU 2025
clairegiordano
0
140
AI機能プロジェクト炎上の 3つのしくじりと学び
nakawai
0
120
OCIjp_Oracle AI World_Recap
shinpy
1
180
生成AI時代のPythonセキュリティとガバナンス
abenben
0
140
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
Automating Front-end Workflow
addyosmani
1371
200k
The Language of Interfaces
destraynor
162
25k
Raft: Consensus for Rubyists
vanstee
140
7.2k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
KATA
mclloyd
PRO
32
15k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Context Engineering - Making Every Token Count
addyosmani
8
300
Facilitating Awesome Meetings
lara
57
6.6k
What's in a price? How to price your products and services
michaelherold
246
12k
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.