Skip to content

Commit abf6d8e

Browse files
ADmadADmad
authored
Merge pull request #383 from thephpleague/3.x-docs
Add docs for 3.0
2 parents 652b80b + d22c024 commit abf6d8e

34 files changed

+1571
-1
lines changed

‎docs/3.0/api/adjustments.md

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
---
2+
layout: default
3+
title: Adjustments
4+
---
5+
6+
# Adjustments
7+
8+
## Brightness `bri`
9+
10+
Adjusts the image brightness. Use values between `-100` and `+100`, where `0` represents no change.
11+
12+
~~~ html
13+
<img src="kayaks.jpg?w=500&bri=-25">
14+
~~~
15+
16+
[![© Photo Joel Reynolds](https://glide.herokuapp.com/1.0/kayaks.jpg?w=500&bri=-25)](https://glide.herokuapp.com/1.0/kayaks.jpg?w=500&bri=-25)
17+
18+
## Contrast `con`
19+
20+
Adjusts the image contrast. Use values between `-100` and `+100`, where `0` represents no change.
21+
22+
~~~ html
23+
<img src="kayaks.jpg?w=500&con=25">
24+
~~~
25+
26+
[![© Photo Joel Reynolds](https://glide.herokuapp.com/1.0/kayaks.jpg?w=500&con=25)](https://glide.herokuapp.com/1.0/kayaks.jpg?w=500&con=25)
27+
28+
## Gamma `gam`
29+
30+
Adjusts the image gamma. Use values between `0.1` and `9.99`.
31+
32+
~~~ html
33+
<img src="kayaks.jpg?w=500&gam=1.5">
34+
~~~
35+
36+
[![© Photo Joel Reynolds](https://glide.herokuapp.com/1.0/kayaks.jpg?w=500&gam=1.5)](https://glide.herokuapp.com/1.0/kayaks.jpg?w=500&gam=1.5)
37+
38+
## Sharpen `sharp`
39+
40+
Sharpen the image. Use values between `0` and `100`.
41+
42+
~~~ html
43+
<img src="kayaks.jpg?w=500&sharp=15">
44+
~~~
45+
46+
[![© Photo Joel Reynolds](https://glide.herokuapp.com/1.0/kayaks.jpg?w=500&sharp=15)](https://glide.herokuapp.com/1.0/kayaks.jpg?w=500&sharp=15)

‎docs/3.0/api/background.md

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
layout: default
3+
title: Background
4+
---
5+
6+
# Background
7+
8+
## Background `bg`
9+
10+
Sets the background color of the image. See [colors](api/colors/) for more information on the available color formats.
11+
12+
~~~ html
13+
<img src="logo.png?w=400&bg=black">
14+
~~~
15+
16+
[![© Photo Joel Reynolds](https://glide.herokuapp.com/1.0/logo.png?w=400&bg=black)](https://glide.herokuapp.com/1.0/logo.png?w=500&bg=black)

‎docs/3.0/api/border.md

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
layout: default
3+
title: Border
4+
---
5+
6+
# Border
7+
8+
## Border `border`
9+
10+
Add a border to the image. Required format: `width,color,method`.
11+
12+
~~~ html
13+
<img src="kayaks.jpg?w=500&border=10,5000,overlay">
14+
~~~
15+
16+
[![© Photo Joel Reynolds](https://glide.herokuapp.com/1.0/kayaks.jpg?w=500&border=10,5000,overlay)](https://glide.herokuapp.com/1.0/kayaks.jpg?w=500&border=10,5000,overlay)
17+
18+
### Width
19+
20+
Sets the border width in pixels, or using [relative dimensions](api/relative-dimensions/).
21+
22+
### Color
23+
24+
Sets the border color. See [colors](api/colors/) for more information on the available color formats.
25+
26+
### Method
27+
28+
Sets how the border will be displayed. Available options:
29+
30+
- `overlay`: Place border on top of image (default).
31+
- `shrink`: Shrink image within border (canvas does not change).
32+
- `expand`: Expands canvas to accommodate border.
33+
34+
~~~ html
35+
<img src="kayaks.jpg?w=500&border=10,FFCC33,expand">
36+
~~~
37+
38+
[![© Photo Joel Reynolds](https://glide.herokuapp.com/1.0/kayaks.jpg?w=500&border=10,FFCC33,expand)](https://glide.herokuapp.com/1.0/kayaks.jpg?w=500&border=10,FFCC33,expand)

‎docs/3.0/api/colors.md

+159
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
---
2+
layout: default
3+
title: Colors
4+
---
5+
6+
# Colors
7+
8+
Glide supports a variety of color formats. In addition to the 140 color names supported by all modern browsers (listed below), Glide accepts hexadecimal RGB and RBG alpha formats.
9+
10+
## Hexadecimal
11+
12+
- 3 digit RGB: `CCC`
13+
- 4 digit ARGB (alpha): `5CCC`
14+
- 6 digit RGB: `CCCCCC`
15+
- 8 digit ARGB (alpha): `55CCCCCC`
16+
17+
## Color names
18+
19+
- aliceblue
20+
- antiquewhite
21+
- aqua
22+
- aquamarine
23+
- azure
24+
- beige
25+
- bisque
26+
- black
27+
- blanchedalmond
28+
- blue
29+
- blueviolet
30+
- brown
31+
- burlywood
32+
- cadetblue
33+
- chartreuse
34+
- chocolate
35+
- coral
36+
- cornflowerblue
37+
- cornsilk
38+
- crimson
39+
- cyan
40+
- darkblue
41+
- darkcyan
42+
- darkgoldenrod
43+
- darkgray
44+
- darkgreen
45+
- darkkhaki
46+
- darkmagenta
47+
- darkolivegreen
48+
- darkorange
49+
- darkorchid
50+
- darkred
51+
- darksalmon
52+
- darkseagreen
53+
- darkslateblue
54+
- darkslategray
55+
- darkturquoise
56+
- darkviolet
57+
- deeppink
58+
- deepskyblue
59+
- dimgray
60+
- dodgerblue
61+
- firebrick
62+
- floralwhite
63+
- forestgreen
64+
- fuchsia
65+
- gainsboro
66+
- ghostwhite
67+
- gold
68+
- goldenrod
69+
- gray
70+
- green
71+
- greenyellow
72+
- honeydew
73+
- hotpink
74+
- indianred
75+
- indigo
76+
- ivory
77+
- khaki
78+
- lavender
79+
- lavenderblush
80+
- lawngreen
81+
- lemonchiffon
82+
- lightblue
83+
- lightcoral
84+
- lightcyan
85+
- lightgoldenrodyellow
86+
- lightgray
87+
- lightgreen
88+
- lightpink
89+
- lightsalmon
90+
- lightseagreen
91+
- lightskyblue
92+
- lightslategray
93+
- lightsteelblue
94+
- lightyellow
95+
- lime
96+
- limegreen
97+
- linen
98+
- magenta
99+
- maroon
100+
- mediumaquamarine
101+
- mediumblue
102+
- mediumorchid
103+
- mediumpurple
104+
- mediumseagreen
105+
- mediumslateblue
106+
- mediumspringgreen
107+
- mediumturquoise
108+
- mediumvioletred
109+
- midnightblue
110+
- mintcream
111+
- mistyrose
112+
- moccasin
113+
- navajowhite
114+
- navy
115+
- oldlace
116+
- olive
117+
- olivedrab
118+
- orange
119+
- orangered
120+
- orchid
121+
- palegoldenrod
122+
- palegreen
123+
- paleturquoise
124+
- palevioletred
125+
- papayawhip
126+
- peachpuff
127+
- peru
128+
- pink
129+
- plum
130+
- powderblue
131+
- purple
132+
- rebeccapurple
133+
- red
134+
- rosybrown
135+
- royalblue
136+
- saddlebrown
137+
- salmon
138+
- sandybrown
139+
- seagreen
140+
- seashell
141+
- sienna
142+
- silver
143+
- skyblue
144+
- slateblue
145+
- slategray
146+
- snow
147+
- springgreen
148+
- steelblue
149+
- tan
150+
- teal
151+
- thistle
152+
- tomato
153+
- turquoise
154+
- violet
155+
- wheat
156+
- white
157+
- whitesmoke
158+
- yellow
159+
- yellowgreen

‎docs/3.0/api/crop.md

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
layout: default
3+
title: Crop
4+
---
5+
6+
# Crop
7+
8+
## Fit `fit=crop`
9+
10+
Resizes the image to fill the width and height boundaries and crops any excess image data. The resulting image will match the width and height constraints without distorting the image.
11+
12+
~~~ html
13+
<img src="kayaks.jpg?w=300&h=300&fit=crop">
14+
~~~
15+
16+
[![© Photo Joel Reynolds](https://glide.herokuapp.com/1.0/kayaks.jpg?w=300&h=300&fit=crop)](https://glide.herokuapp.com/1.0/kayaks.jpg?w=300&h=300&fit=crop)
17+
18+
### Crop Position
19+
20+
You can also set where the image is cropped by adding a crop position. Accepts `crop-top-left`, `crop-top`, `crop-top-right`, `crop-left`, `crop-center`, `crop-right`, `crop-bottom-left`, `crop-bottom` or `crop-bottom-right`. Default is `crop-center`, and is the same as `crop`.
21+
22+
~~~ html
23+
<img src="kayaks.jpg?w=300&h=300&fit=crop-left">
24+
~~~
25+
26+
### Crop Focal Point
27+
28+
In addition to the crop position, you can be more specific about the exact crop position using a focal point. This is defined using two offset percentages: `crop-x%-y%`.
29+
30+
~~~ html
31+
<img src="kayaks.jpg?w=300&h=300&fit=crop-25-75">
32+
~~~
33+
34+
You may also choose to zoom into your focal point by providing a third value: a float between 1 and 100. Each full step is the equivalent of a 100% zoom. (eg. `x%-y%-2` is the equivalent of viewing the image at 200%). The suggested range is 1-10.
35+
36+
~~~ html
37+
<img src="kayaks.jpg?w=300&h=300&fit=crop-25-75-2">
38+
~~~
39+
40+
## Crop `crop`
41+
42+
Crops the image to specific dimensions prior to any other resize operations. Required format: `width,height,x,y`.
43+
44+
~~~ html
45+
<img src="kayaks.jpg?crop=100,100,915,155">
46+
~~~
47+
48+
[![© Photo Joel Reynolds](https://glide.herokuapp.com/1.0/kayaks.jpg?crop=100,100,915,155)](https://glide.herokuapp.com/1.0/kayaks.jpg?crop=100,100,915,155)

‎docs/3.0/api/effects.md

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
layout: default
3+
title: Effects
4+
---
5+
6+
# Effects
7+
8+
## Blur `blur`
9+
10+
Adds a blur effect to the image. Use values between `0` and `100`.
11+
12+
~~~ html
13+
<img src="kayaks.jpg?w=500&blur=5">
14+
~~~
15+
16+
[![© Photo Joel Reynolds](https://glide.herokuapp.com/1.0/kayaks.jpg?w=500&blur=5)](https://glide.herokuapp.com/1.0/kayaks.jpg?w=500&blur=5)
17+
18+
<p class="message-notice">Performance intensive on larger amounts of blur with GD driver. Use with care.</p>
19+
20+
## Pixelate `pixel`
21+
22+
Applies a pixelation effect to the image. Use values between `0` and `1000`.
23+
24+
~~~ html
25+
<img src="kayaks.jpg?w=500&pixel=5">
26+
~~~
27+
28+
[![© Photo Joel Reynolds](https://glide.herokuapp.com/1.0/kayaks.jpg?w=500&pixel=5)](https://glide.herokuapp.com/1.0/kayaks.jpg?w=500&pixel=5)
29+
30+
## Filter `filt`
31+
32+
Applies a filter effect to the image. Accepts `greyscale` or `sepia`.
33+
34+
~~~ html
35+
<img src="kayaks.jpg?w=500&filt=sepia">
36+
~~~
37+
38+
[![© Photo Joel Reynolds](https://glide.herokuapp.com/1.0/kayaks.jpg?w=500&filt=sepia)](https://glide.herokuapp.com/1.0/kayaks.jpg?w=500&filt=sepia)

‎docs/3.0/api/encode.md

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
layout: default
3+
title: Encode
4+
---
5+
6+
# Encode
7+
8+
## Quality `q`
9+
10+
Defines the quality of the image. Use values between `0` and `100`. Defaults to `90`. Only relevant if the format is set to `jpg`, `pjpg`, `webp`, `avif` or `heic`.
11+
12+
~~~ html
13+
<img src="kayaks.jpg?w=500&q=25">
14+
~~~
15+
16+
[![© Photo Joel Reynolds](https://glide.herokuapp.com/1.0/kayaks.jpg?w=500&q=25)](https://glide.herokuapp.com/1.0/kayaks.jpg?w=500&q=25)
17+
18+
19+
## Format `fm`
20+
21+
Encodes the image to a specific format. Accepts `jpg`, `pjpg` (progressive jpeg), `png`, `gif`, `webp`, `avif` or `heic`. Defaults to `jpg`. `heic` is only supported when using Imagick as driver.
22+
23+
~~~ html
24+
<img src="kayaks.jpg?w=500&fm=gif">
25+
~~~
26+
27+
[![© Photo Joel Reynolds](https://glide.herokuapp.com/1.0/kayaks.jpg?w=500&fm=gif)](https://glide.herokuapp.com/1.0/kayaks.jpg?w=500&fm=gif)

0 commit comments

Comments
 (0)