Glide Tag

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).


The Glide tag leverages the fantastic Glide PHP library to give you on-demand image manipulation, similar to cloud image processing services like Imgix and Cloudinary.

Manipulate images by passing a variable or an explicit URL and adding the desired parameters like height, crop, or quality.

// Variable
<img src="{{ glide:hero_image width="1280" height="800" }}">
// URL
<img src="{{ glide src="/img/heroes/slime.jpg" width="1280" height="800" }}">

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.

{{ glide:image width="600" }}
<img src="{{ url }}" width="{{ width }}" height="{{ height }}">
{{ /glide:image }}


Glide Presets are pre-configured manipulations that will be automatically generated when new image assets are uploaded. These presets are managed in config/statamic/assets.php as an array that holds a list of named presets and their desired parameters.

'presets' => [
'thumbnail' => [ 'w' => 300, 'h' => 300, 'q' => 75],
'hero' => [ 'w' => 1440 'h' => 600, 'q' => 90 ],

All parameters are available for use in presets.

Each named preset can be referenced with the preset tag parameter and since all transformations and manipulations are performed at time of upload, there shouldn’t be any additional overhead on the initial request.


{{ glide:thumbnail preset="thumbnail" }}
<!-- width: 300px, height: 300px, quality: 75% -->
{{ glide:hero_image preset="hero" }}
<!-- width: 1440px, height: 600px, quality: 90% -->

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 that hair in the shot!

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.

// config/statamic/assets.php
'auto_crop' => true,

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.

- image.jpg
- image.svg
{{ images }}
<img src="{{ glide:url width="600" }}" />
{{ /images }}
<img src="/img/image.jpg?w=600" />
<img src="/assets/image.svg" />

Serving Cached Images Directly

The default Glide tag behavior is to simply output a URL. When a URL is visited, Glide analyzes the URL and manipulates the image. However, if there are a lot of manipulations on any given page request, the total execution time can soon start to add up.

You can avoid these slowdowns by generating static images. Your server will load images directly instead of handing the work over to the Glide process each time. You can enable this behavior in your assets config file.

// config/statamic/assets.php
'cache' => true,

Using Glide with Locales

When using Glide with multiple locales, the generated image path will include the proper site_root as dictated by the locale, but the actual asset will be stored wherever you have set the cache_path.

To serve these assets when on a localized version, you’ll need to create a symlink from your /$locale/cache_path to cache_path.


Size, Crop, and Output



Sets the width of the image, in pixels.



Sets the height of the image, in pixels.



A shortcut for setting width and height to the same value. For example square="250" is a shortcut for width="250" height="250".



See the Glide docs on this parameter. In addition to the Glide's fit options, Statamic also supports crop_focal to automatically fit/crop to a predefined focal point. See the Focal Crop section for more details.



Crops the image to specific dimensions prior to any other resize operations. Required format: width,height,x,y.



Rotates the image. Accepts auto, 0, 90, 180 or 270. The auto option uses Exif data to automatically orient images correctly. Default: auto.



Defines the quality of the image. Use values between 0 and 100. Only relevant if the format is jpg, pjpg or webp. Default: 90.



Defines the device pixel ratio. This makes it possible to display images at the correct pixel density on a variety of devices. For example the following would output an image of 400px {{ glide:image width="200" dpr="2" square }}. Default: 1. The maximum value that can be set for dpr is 8.



Encodes the image to a specific format. Accepts jpg, pjpg (progressive jpeg), png, gif or webp. If using the imagick image manipulation driver, glide can additionally handle tif, bmp and psd. The default format: jpg

Filters and Effects



Sets a background color for transparent images.



Adds a blur effect to the image. Use values between 0 and 100.



Adjusts the image brightness. Use values between -100 and +100, where 0 represents no change.



Adjusts the image contrast. Use values between -100 and +100, where 0 represents no change.



Adjusts the image gamma. Use values between 0.1 and 9.99.



Sharpen the image. Use values between 0 and 100.



Applies a pixelation effect to the image. Use values between 0 and 1000.



Applies a filter effect to the image. Accepts greyscale or sepia.


Variable Type Description



The URL of the resized image.



The width of the resized image.



The height of the resized image.

Docs feedback

Submit improvements, related content, or suggestions through Github.

Betterify this page →