Glide Tag

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

Basic Usage

Manipulate images by passing an image source and adding the desired parameters like height, crop, or quality.

{{ glide src="image.jpg" width="1280" height="800" }}

<s:glide src="image.jpg" width="1280" height="800" />

/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 <img /> HTML tag.

<img src="{{ glide ... }}" />

{{-- Using fluent tags --}}
<img
  src="{{ Statamic::tag('glide')->src('test.png')->width(1280)->height(800)->fetch() }}"
/>
 
{{-- Using Antlers Blade Components tag pair --}}
<s:glide src="test.png" width="1280" height="800">
  <img src="{{ $url }}" />
</s:glide>

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:

{{ glide :src="asset_field" w="100" }} // /img/asset/6f75d8as?w=100

<s:glide :src="$asset_field" w="100" /> // /img/asset/6f75d8as?w=100

Relative path/URL

You can pass a string of a path located within your public directory.

{{ glide src="image.jpg" w="100" }} // img/image.jpg?w=100

<s:glide src="image.jpg" w="100" /> // img/image.jpg?w=100

External URL

You can pass a string of a URL on another site.

{{ glide src="http://anothersite.com/image.jpg" w="100" }} // /img/http/6f75d8as?w=100

<s:glide src="http://anothersite.com/image.jpg" w="100" /> // /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.

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

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

You may also use the tag pair to loop over multiple sources. For example, you may provide it with an assets field.

{{ glide :src="multiple_assets" width="600" }}
   ...
{{ /glide }}

<s:glide :src="multiple_assets" width="600">
  {{ $url }}
</s:glide>
 
{{-- Aliasing the results --}}
<s:glide :src="$multiple_assets" width="600" as="assets">
  @foreach ($assets as $asset)
    {{ $asset['url'] }}
  @endforeach
</s:glide>

Shorthand Tag

Rather than using the src parameter, you may choose to use a variable name as the second part of the tag.

{{ glide:my_var w="100" }}

<s:glide:my_var w="100" />

You may also use the shorthand as a tag pair:

{{ glide:my_var }} ... {{ /glide:my_var }}

<s:glide:my_var>
  ...
</s:glide:my_var>

Watermarks

You may use Glide’s watermarking feature by passing in a source to the mark parameter, and then manipulate it using the various watermark parameters (markw, markh, markfit, etc).

{{ glide src="image.jpg" mark="watermark.jpg" markw="30" }}

<s:glide src="image.jpg" mark="watermark.jpg" markw="30" />

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.

@foreach (Statamic::tag('glide:generate')->src($source)->width(100) as $image)
  <img src="{{ $image['url'] }}" width="{{ $image['width'] }}" />
@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.

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

@foreach ($images as $image)
  <img
    src="{{ Statamic::tag('glide')->src($image['url'])->width(600)->fetch() }}"
  />
@endforeach

<img src="/img/image.jpg?w=600" />
<img src="/assets/image.svg" />

Parameters

Size, Crop, and Output

Filters and Effects

Other

Variables

These variables are only available within the tag pair.