Glide

Manipulate images on the fly using the wonderful Glide library.


Examples

Single Images

We have an image’s asset URL saved in the YAML, and we want to resize it to 300x200, fit it inside the area by cropping it, and apply a sepia filter.

image: "/assets/food/bacon.jpg"
{{ glide :src="image" width="300" height="200" fit="crop" filter="sepia" }}

<!-- shorthand syntax: -->
{{ glide:image width="300" height="200" fit="crop" filter="sepia" }}
/img/assets/food/bacon.jpg?w=300&h=200&fit=crop&filt=sepia&s=3982hf983f2mf90r23

Multiple Images

If you have a list of assets, you may want to loop over them and generate images for each one. Nothing special here, just loop over them.

images:
  - /assets/food/bacon.jpg
  - /assets/drinks/whisky.jpg

Since the current iteration of the loop would be output using {{ value }}, you can reference that in the Glide tag like so:

{{ images }}
  {{ glide:value width="300" height="200" }}
{{ /images }}
/img/assets/food/bacon.jpg?w=300&h=200&s=3982hf983f2mf90r23
/img/assets/drinks/whisky.jpg?w=300&h=200&s=3982hf983f2mf90r23

Complex image paths

If you need the path to your image to be generated with another tag, you can’t just drop that into the path parameter. It would likely be confusing to read your templates – there could be parameters in parameters, oh my.

Instead, use the glide tag as a tag pair. The contents of the tag will be used as the src.

{{ glide width="300" height="200" fit="crop" filter="sepia" }}
  {{ theme:img src="photo.jpg" }}
{{ /glide }}
/img/site/themes/your-theme/img/photo.jpg?w=300&h=200&fit=crop&filt=sepia&s=3982hf983f2mf90r23

Focal Crop

When using the fit parameter, you may choose to crop to a focal point. You may specify the 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.

Rather than specifying the offsets, you may use crop_focal to use the asset’s saved focal point.

A Statamic image asset can be assigned a percentage based focal point. You can do this by editing an asset and defining the focal point using the UI. Or, you may add focus: x-y to the asset’s metadata.

When using crop_focal and an asset doesn’t have a focal point set, it will 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.

Serving Cached Images Directly

Glide brings you some pretty nifty on-the-fly URL manipulations. The default behaviour of the Glide tag is to simply output a URL. When that URL is visited, Glide analyses the URL and manipulates an image. However, if you have a lot of assets in your site and a lot of them on a page, time for each request can soon start to add up.

It is possible to “reverse” this behavior and to simply generate static images. Your server will load the images directly instead of handing the work over to Glide each time. If you are familiar with Statamic v1, this can be thought of similar to the “Transform” tag.

In Configure > Settings > Assets, or site/settings/assets.yaml:

# Enable or disable the feature
image_manipulation_cached: true

# The folder containing the manipulated images.
# If you're running above webroot, this might be something like public/img
image_manipulation_cached_path: img

# The URL to the folder
image_manipulation_route: img

Parameters

You may pass anything from the Glide API as a parameter. For example, {{ glide or="90" }} will use the orientation API parameter.

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.

width

integer

Alias of the w Glide API parameter.

height

integer

Alias of the h Glide API parameter.

square

integer

A shortcut for setting width (w) and height (h) to the same value.

fit

string

Alias of the fit Glide API parameter. In addition to the Glide fit options, Statamic also accepts crop_focal to automatically fit/crop to a predefined focal point. See the Focal Crop section for more details.

crop

string

Alias of the crop Glide API parameter.

absolute

boolean false

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

orient

mixed

Alias of the or Glide API parameter.

brightness

integer

Alias of the bri Glide API parameter.

contrast

integer

Alias of the con Glide API parameter.

gamma

integer

Alias of the gam Glide API parameter.

sharpen

integer

Alias of the sharp Glide API parameter.

pixelate

integer

Alias of the pixel Glide API parameter.

filter

string

Alias of the filt Glide API parameter.

quality

integer 90

Alias of the q Glide API parameter.

Last modified on August 22, 2017