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

Overview

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 }}

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.

images:
- 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.

Parameters

Size, Crop, and Output

width

integer

Sets the width of the image, in pixels.

height

integer

Sets the height of the image, in pixels.

square

integer

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

fit

string

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.

crop

string

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

orient

mixed

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

quality

integer

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

dpr

integer

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.

format

string

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

bg

string

Sets a background color for transparent images.

blur

integer

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

brightness

string

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

contrast

string

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

gamma

float

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

sharpen

integer

Sharpen the image. Use values between 0 and 100.

pixelate

integer

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

filter

string

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

Variables

Variable Type Description

url

string

The URL of the resized image.

width

integer

The width of the resized image.

height

integer

The height of the resized image.

Docs feedback

Submit improvements, related content, or suggestions through Github.

Betterify this page →