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

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 behavior is to simply output a URL. When that URL is visited, Glide analyzes the URL and manipulates an image. However, if there are a lot of manipulation on any given page quest, the total execution time can soon start to add up.

You can avoid these slowdowns by generating static images. Your server will load the 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

src|path|id string

The URL of the image when not using the shorthand syntax. (Use the shorthand syntax if you can, it's nicer.) This also accepts asset IDs, if using private assets, for example.

field tag part

The name of the field containing the asset ID or image path when using the shorthand syntax. This is not actually a parameter, but part of the tag itself. For example, {{ glide:hero_image }}.

tag boolean *false*

When set to true, this will output an <img> tag with the URL in the src attribute, rather than just the URL.

alt string

When using the tag parameter, this will insert the given text into the alt attribute.

absolute boolean *false*

When set to true, this tag will output the full URL rather than the default relative URL.

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 or pjpg. 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.

Betterify this page on Github!