# Glide The Glide tag makes it easy to manipulate images on the fly – from resizing and cropping to adjustments (like sharpness and contrast) and image effects (like pixelate and sepia). ## Setting up Glide Glide is ready to go out of the box with no setup required. However, you may customize its behavior. You can read about it on the [image manipulation](/image-manipulation.md) page. ## Basic Usage Manipulate images by passing an image [source](#sources) and adding the desired [parameters](#parameters) like `height`, `crop`, or `quality`. ::tabs ::tab antlers ```antlers {{ glide src="image.jpg" width="1280" height="800" }} ``` ::tab blade ```blade ``` :: ```output /img/image.jpg?w=1280&h=800 ``` The Glide tag outputs a URL of the transformed image, so you'll likely want to use it as the `src` for an `` HTML tag. ::tabs ::tab antlers ```antlers

``` ::tab blade ```blade {{-- Using fluent tags --}}

``` :: ## Sources There are a number of options when it comes to what you can use as an image source. ### Asset You can pass along an asset object by using an asset field by reference: ::tabs ::tab antlers ```antlers {{ glide :src="asset_field" w="100" }} // /img/asset/6f75d8as?w=100 ``` ::tab blade ```blade // /img/asset/6f75d8as?w=100 ``` :: ### Relative path/URL You can pass a string of a path located within your `public` directory. ::tabs ::tab antlers ```antlers {{ glide src="image.jpg" w="100" }} // img/image.jpg?w=100 ``` ::tab blade ```blade // img/image.jpg?w=100 ``` :: ### External URL You can pass a string of a URL on another site. ::tabs ::tab antlers ```antlers {{ glide src="http://anothersite.com/image.jpg" w="100" }} // /img/http/6f75d8as?w=100 ``` ::tab blade ```blade // /img/http/6f75d8as?w=100 ``` :: ## Tag Pair If you use the tag as a pair, you'll have access to `url`, `height`, and `width` variables inside to do with as you wish. ::tabs ::tab antlers ```antlers {{ glide src="image.jpg" width="600" }}

{{ /glide }} ``` ::tab blade ```blade

``` :: You may also use the tag pair to loop over multiple sources. For example, you may provide it with an `assets` field. ::tabs ::tab antlers ```antlers {{ glide :src="multiple_assets" width="600" }} ... {{ /glide }} ``` ::tab blade ```blade {{ $url }} {{-- Aliasing the results --}} @foreach ($assets as $asset) {{ $asset['url'] }} @endforeach ``` :: :::tip The tag pair is also available as `{{ glide:generate }}`. You may need to use this version if you're using [Blade](#usage-in-blade). ::: :::tip Normally, the Glide tag only generates a URL. The image itself is generated when the URL is visited. When using the tag pair, your Glide images will be generated when the page is rendered. This will result in an initial longer load time. ::: ## Shorthand Tag Rather than using the `src` parameter, you may choose to use a variable name as the second part of the tag. ::tabs ::tab antlers ```antlers {{ glide:my_var w="100" }} ``` ::tab blade ```blade ``` :: You may also use the shorthand as a tag pair: ::tabs ::tab antlers ```antlers {{ glide:my_var }} ... {{ /glide:my_var }} ``` ::tab blade ```blade ... ``` :: ## Watermarks You may use Glide's [watermarking feature](https://glide.thephpleague.com/3.0/api/watermarks/) by passing in a [source](#sources) to the `mark` parameter, and then manipulate it using the various watermark parameters (`markw`, `markh`, `markfit`, `markalpha`, etc). ::tabs ::tab antlers ```antlers {{ glide src="image.jpg" mark="watermark.jpg" markw="30" }} ``` ::tab blade ```blade ``` :: :::tip You don't need to worry about setting up a watermark filesystem yourself. Statamic will take care of that automatically based on the source you provide. ::: ## Usage in Blade To use the Glide tag within Blade, you can also use the `generate` tag, which follows the same rules as the [tag pair](#tag-pair). ```blade @foreach (Statamic::tag('glide:generate')->src($source)->width(100) as $image)

@endforeach ``` You should use a `@foreach` loop even if you are only providing a single source. ## Focal Point Cropping Focal point cropping helps ensure the important bits of an image stay in the bounds of any crops you perform. ### Using the focal point picker You can set focal points and zoom-levels for your images in the control panel using the asset editor. Use `fit="crop_focal"` while cropping to use an asset's saved focal point, if it has one.

The Focal Point Picker — The focal point picker. Make sure to keep those eyes in the shot! They're delightfully menacing.

### Manually setting focal points When setting focal points manually, specify two offset percentages: `crop-x%-y%`. For example, `fit="crop-75-50"` would crop the image and make sure that the point at 75% across and 50% down would be the focal point. If an asset doesn't have a focal point set it will simply crop from the center. _Note: All Glide generated images are cropped at their focal point, unless you disable the _Auto Crop_ setting. This happens even when you don't specify a `fit` parameter. You may override this behavior per-image/tag by specifying the `fit` parameter as described above._ ``` php // config/statamic/assets.php 'auto_crop' => true, ``` ### focus_css You may use the [`focus_css`](/variables/focus_css.md) variable to get an asset's focal point in a format suitable for the `background-position` CSS property. ::tabs ::tab antlers ```antlers {{ focus_css }} ``` ::tab blade ```blade {{ $focus_css }} ``` :: ```html 50% 30% ``` ## Unsupported formats Glide will resize whatever images it supports, like jpgs or pngs. If you pass an unsupported type to Glide, like an svg, it'll just return the unmodified URL. ``` yaml images: - image.jpg - image.svg ``` ::tabs ::tab antlers ```antlers {{ images }}

{{ /images }} ``` ::tab blade ```blade @foreach ($images as $image)

@endforeach ``` :: ```html

```