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
590
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
140
How to open source a PHP package (phpDay 2017)
reinink
1
110
The formula to awesome docs (Lone Star PHP 2016)
reinink
0
920
The PHP Package Checklist (Lone Star PHP 2016)
reinink
0
270
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
reinink
3
490
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
IBC 2024 動画技術関連レポート / IBC 2024 Report
cyberagentdevelopers
PRO
1
120
Storybook との上手な向き合い方を考える
re_taro
4
370
Making your applications cross-environment - OSCG 2024 NA
salaboy
0
200
CysharpのOSS群から見るModern C#の現在地
neuecc
2
3.5k
Zennのパフォーマンスモニタリングでやっていること
ryosukeigarashi
0
190
安心してください、日本語使えますよ―Ubuntu日本語Remix提供休止に寄せて― 2024-11-17
nobutomurata
1
1k
SRE×AIOpsを始めよう!GuardDutyによるお手軽脅威検出
amixedcolor
0
200
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
3.2k
New Relicを活用したSREの最初のステップ / NRUG OKINAWA VOL.3
isaoshimizu
3
630
インフラとバックエンドとフロントエンドをくまなく調べて遅いアプリを早くした件
tubone24
1
430
DynamoDB でスロットリングが発生したとき/when_throttling_occurs_in_dynamodb_short
emiki
0
260
オープンソースAIとは何か? --「オープンソースAIの定義 v1.0」詳細解説
shujisado
10
1.3k
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Done Done
chrislema
181
16k
Producing Creativity
orderedlist
PRO
341
39k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
BBQ
matthewcrist
85
9.3k
How GitHub (no longer) Works
holman
310
140k
Gamification - CAS2011
davidbonilla
80
5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
Making Projects Easy
brettharned
115
5.9k
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.