-
Notifications
You must be signed in to change notification settings - Fork 199
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #383 from thephpleague/3.x-docs
Add docs for 3.0
- Loading branch information
Showing
34 changed files
with
1,571 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| --- | ||
| layout: default | ||
| title: Adjustments | ||
| --- | ||
|
|
||
| # Adjustments | ||
|
|
||
| ## Brightness `bri` | ||
|
|
||
| Adjusts the image brightness. Use values between `-100` and `+100`, where `0` represents no change. | ||
|
|
||
| ~~~ html | ||
| <img src="kayaks.jpg?w=500&bri=-25"> | ||
| ~~~ | ||
|
|
||
| [](https://glide.herokuapp.com/1.0/kayaks.jpg?w=500&bri=-25) | ||
|
|
||
| ## Contrast `con` | ||
|
|
||
| Adjusts the image contrast. Use values between `-100` and `+100`, where `0` represents no change. | ||
|
|
||
| ~~~ html | ||
| <img src="kayaks.jpg?w=500&con=25"> | ||
| ~~~ | ||
|
|
||
| [](https://glide.herokuapp.com/1.0/kayaks.jpg?w=500&con=25) | ||
|
|
||
| ## Gamma `gam` | ||
|
|
||
| Adjusts the image gamma. Use values between `0.1` and `9.99`. | ||
|
|
||
| ~~~ html | ||
| <img src="kayaks.jpg?w=500&gam=1.5"> | ||
| ~~~ | ||
|
|
||
| [](https://glide.herokuapp.com/1.0/kayaks.jpg?w=500&gam=1.5) | ||
|
|
||
| ## Sharpen `sharp` | ||
|
|
||
| Sharpen the image. Use values between `0` and `100`. | ||
|
|
||
| ~~~ html | ||
| <img src="kayaks.jpg?w=500&sharp=15"> | ||
| ~~~ | ||
|
|
||
| [](https://glide.herokuapp.com/1.0/kayaks.jpg?w=500&sharp=15) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| --- | ||
| layout: default | ||
| title: Background | ||
| --- | ||
|
|
||
| # Background | ||
|
|
||
| ## Background `bg` | ||
|
|
||
| Sets the background color of the image. See [colors](api/colors/) for more information on the available color formats. | ||
|
|
||
| ~~~ html | ||
| <img src="logo.png?w=400&bg=black"> | ||
| ~~~ | ||
|
|
||
| [](https://glide.herokuapp.com/1.0/logo.png?w=500&bg=black) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| --- | ||
| layout: default | ||
| title: Border | ||
| --- | ||
|
|
||
| # Border | ||
|
|
||
| ## Border `border` | ||
|
|
||
| Add a border to the image. Required format: `width,color,method`. | ||
|
|
||
| ~~~ html | ||
| <img src="kayaks.jpg?w=500&border=10,5000,overlay"> | ||
| ~~~ | ||
|
|
||
| [](https://glide.herokuapp.com/1.0/kayaks.jpg?w=500&border=10,5000,overlay) | ||
|
|
||
| ### Width | ||
|
|
||
| Sets the border width in pixels, or using [relative dimensions](api/relative-dimensions/). | ||
|
|
||
| ### Color | ||
|
|
||
| Sets the border color. See [colors](api/colors/) for more information on the available color formats. | ||
|
|
||
| ### Method | ||
|
|
||
| Sets how the border will be displayed. Available options: | ||
|
|
||
| - `overlay`: Place border on top of image (default). | ||
| - `shrink`: Shrink image within border (canvas does not change). | ||
| - `expand`: Expands canvas to accommodate border. | ||
|
|
||
| ~~~ html | ||
| <img src="kayaks.jpg?w=500&border=10,FFCC33,expand"> | ||
| ~~~ | ||
|
|
||
| [](https://glide.herokuapp.com/1.0/kayaks.jpg?w=500&border=10,FFCC33,expand) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,159 @@ | ||
| --- | ||
| layout: default | ||
| title: Colors | ||
| --- | ||
|
|
||
| # Colors | ||
|
|
||
| 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. | ||
|
|
||
| ## Hexadecimal | ||
|
|
||
| - 3 digit RGB: `CCC` | ||
| - 4 digit ARGB (alpha): `5CCC` | ||
| - 6 digit RGB: `CCCCCC` | ||
| - 8 digit ARGB (alpha): `55CCCCCC` | ||
|
|
||
| ## Color names | ||
|
|
||
| - aliceblue | ||
| - antiquewhite | ||
| - aqua | ||
| - aquamarine | ||
| - azure | ||
| - beige | ||
| - bisque | ||
| - black | ||
| - blanchedalmond | ||
| - blue | ||
| - blueviolet | ||
| - brown | ||
| - burlywood | ||
| - cadetblue | ||
| - chartreuse | ||
| - chocolate | ||
| - coral | ||
| - cornflowerblue | ||
| - cornsilk | ||
| - crimson | ||
| - cyan | ||
| - darkblue | ||
| - darkcyan | ||
| - darkgoldenrod | ||
| - darkgray | ||
| - darkgreen | ||
| - darkkhaki | ||
| - darkmagenta | ||
| - darkolivegreen | ||
| - darkorange | ||
| - darkorchid | ||
| - darkred | ||
| - darksalmon | ||
| - darkseagreen | ||
| - darkslateblue | ||
| - darkslategray | ||
| - darkturquoise | ||
| - darkviolet | ||
| - deeppink | ||
| - deepskyblue | ||
| - dimgray | ||
| - dodgerblue | ||
| - firebrick | ||
| - floralwhite | ||
| - forestgreen | ||
| - fuchsia | ||
| - gainsboro | ||
| - ghostwhite | ||
| - gold | ||
| - goldenrod | ||
| - gray | ||
| - green | ||
| - greenyellow | ||
| - honeydew | ||
| - hotpink | ||
| - indianred | ||
| - indigo | ||
| - ivory | ||
| - khaki | ||
| - lavender | ||
| - lavenderblush | ||
| - lawngreen | ||
| - lemonchiffon | ||
| - lightblue | ||
| - lightcoral | ||
| - lightcyan | ||
| - lightgoldenrodyellow | ||
| - lightgray | ||
| - lightgreen | ||
| - lightpink | ||
| - lightsalmon | ||
| - lightseagreen | ||
| - lightskyblue | ||
| - lightslategray | ||
| - lightsteelblue | ||
| - lightyellow | ||
| - lime | ||
| - limegreen | ||
| - linen | ||
| - magenta | ||
| - maroon | ||
| - mediumaquamarine | ||
| - mediumblue | ||
| - mediumorchid | ||
| - mediumpurple | ||
| - mediumseagreen | ||
| - mediumslateblue | ||
| - mediumspringgreen | ||
| - mediumturquoise | ||
| - mediumvioletred | ||
| - midnightblue | ||
| - mintcream | ||
| - mistyrose | ||
| - moccasin | ||
| - navajowhite | ||
| - navy | ||
| - oldlace | ||
| - olive | ||
| - olivedrab | ||
| - orange | ||
| - orangered | ||
| - orchid | ||
| - palegoldenrod | ||
| - palegreen | ||
| - paleturquoise | ||
| - palevioletred | ||
| - papayawhip | ||
| - peachpuff | ||
| - peru | ||
| - pink | ||
| - plum | ||
| - powderblue | ||
| - purple | ||
| - rebeccapurple | ||
| - red | ||
| - rosybrown | ||
| - royalblue | ||
| - saddlebrown | ||
| - salmon | ||
| - sandybrown | ||
| - seagreen | ||
| - seashell | ||
| - sienna | ||
| - silver | ||
| - skyblue | ||
| - slateblue | ||
| - slategray | ||
| - snow | ||
| - springgreen | ||
| - steelblue | ||
| - tan | ||
| - teal | ||
| - thistle | ||
| - tomato | ||
| - turquoise | ||
| - violet | ||
| - wheat | ||
| - white | ||
| - whitesmoke | ||
| - yellow | ||
| - yellowgreen |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| --- | ||
| layout: default | ||
| title: Crop | ||
| --- | ||
|
|
||
| # Crop | ||
|
|
||
| ## Fit `fit=crop` | ||
|
|
||
| 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. | ||
|
|
||
| ~~~ html | ||
| <img src="kayaks.jpg?w=300&h=300&fit=crop"> | ||
| ~~~ | ||
|
|
||
| [](https://glide.herokuapp.com/1.0/kayaks.jpg?w=300&h=300&fit=crop) | ||
|
|
||
| ### Crop Position | ||
|
|
||
| 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`. | ||
|
|
||
| ~~~ html | ||
| <img src="kayaks.jpg?w=300&h=300&fit=crop-left"> | ||
| ~~~ | ||
|
|
||
| ### Crop Focal Point | ||
|
|
||
| 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%`. | ||
|
|
||
| ~~~ html | ||
| <img src="kayaks.jpg?w=300&h=300&fit=crop-25-75"> | ||
| ~~~ | ||
|
|
||
| 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. | ||
|
|
||
| ~~~ html | ||
| <img src="kayaks.jpg?w=300&h=300&fit=crop-25-75-2"> | ||
| ~~~ | ||
|
|
||
| ## Crop `crop` | ||
|
|
||
| Crops the image to specific dimensions prior to any other resize operations. Required format: `width,height,x,y`. | ||
|
|
||
| ~~~ html | ||
| <img src="kayaks.jpg?crop=100,100,915,155"> | ||
| ~~~ | ||
|
|
||
| [](https://glide.herokuapp.com/1.0/kayaks.jpg?crop=100,100,915,155) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| --- | ||
| layout: default | ||
| title: Effects | ||
| --- | ||
|
|
||
| # Effects | ||
|
|
||
| ## Blur `blur` | ||
|
|
||
| Adds a blur effect to the image. Use values between `0` and `100`. | ||
|
|
||
| ~~~ html | ||
| <img src="kayaks.jpg?w=500&blur=5"> | ||
| ~~~ | ||
|
|
||
| [](https://glide.herokuapp.com/1.0/kayaks.jpg?w=500&blur=5) | ||
|
|
||
| <p class="message-notice">Performance intensive on larger amounts of blur with GD driver. Use with care.</p> | ||
|
|
||
| ## Pixelate `pixel` | ||
|
|
||
| Applies a pixelation effect to the image. Use values between `0` and `1000`. | ||
|
|
||
| ~~~ html | ||
| <img src="kayaks.jpg?w=500&pixel=5"> | ||
| ~~~ | ||
|
|
||
| [](https://glide.herokuapp.com/1.0/kayaks.jpg?w=500&pixel=5) | ||
|
|
||
| ## Filter `filt` | ||
|
|
||
| Applies a filter effect to the image. Accepts `greyscale` or `sepia`. | ||
|
|
||
| ~~~ html | ||
| <img src="kayaks.jpg?w=500&filt=sepia"> | ||
| ~~~ | ||
|
|
||
| [](https://glide.herokuapp.com/1.0/kayaks.jpg?w=500&filt=sepia) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| --- | ||
| layout: default | ||
| title: Encode | ||
| --- | ||
|
|
||
| # Encode | ||
|
|
||
| ## Quality `q` | ||
|
|
||
| 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`. | ||
|
|
||
| ~~~ html | ||
| <img src="kayaks.jpg?w=500&q=25"> | ||
| ~~~ | ||
|
|
||
| [](https://glide.herokuapp.com/1.0/kayaks.jpg?w=500&q=25) | ||
|
|
||
|
|
||
| ## Format `fm` | ||
|
|
||
| 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. | ||
|
|
||
| ~~~ html | ||
| <img src="kayaks.jpg?w=500&fm=gif"> | ||
| ~~~ | ||
|
|
||
| [](https://glide.herokuapp.com/1.0/kayaks.jpg?w=500&fm=gif) |
Oops, something went wrong.