Glide images #

Glaze integrates League Glide for on-demand image transformation. Apply transforms by appending query parameters directly to local image URLs – no separate build step required.

Supported image sources #

Glide transforms apply to images from any local source:

content/ – images co-located with Djot content
static/ – static root-served assets (e.g. static/logo.png → /logo.png)

External URLs (https://...) always pass through unchanged.

Basic usage in Djot content #

Pass Glide parameters as query string values on any local image URL:

![Hero](images/cover.jpg?w=1200&h=500&fit=crop)
![Portrait](photos/author.jpg?w=200&h=200&fit=crop&filt=greyscale)

This works in both live mode (glaze serve) and build mode (glaze build).

Using presets #

Define named presets in glaze.neon to avoid repeating the same parameters:

images:
  driver: gd
  presets:
    thumb:
      w: 320
      h: 180
      fit: crop
    hero:
      w: 1200
      h: 630
    avatar:
      w: 80
      h: 80
      fit: crop

Then reference a preset with ?p=:

![Hero](images/cover.jpg?p=hero)
![Thumbnail](images/photo.jpg?p=thumb)

The ?preset= key is also accepted as an alias for ?p=.

Raw params and presets can be combined. Raw values take precedence over preset values when both are present:

![Custom hero](images/cover.jpg?p=hero&fm=webp)

Using Glide in Sugar templates #

The same URL patterns work in templates, including images from static/. Use the basePath prefix if your site is deployed to a subfolder:

<?php
$base = $site->basePath ?? '';
$imageUrl = $base . '/images/cover.jpg?p=hero';
?>
<img src="<?= $imageUrl ?>" alt="Cover" />

Or inline:

<img
    src="<?= ($site->basePath ?? '') . $post->meta['image'] . '?p=thumb' ?>"
    alt="<?= $post->title ?>"
/>

You can also hardcode the transform parameters directly:

<img src="/images/cover.jpg?w=800&h=400&fit=crop" alt="Cover" />

Image driver #

Set the image processing driver in glaze.neon:

images:
  driver: imagick

Supported values: gd (default), imagick. Most PHP installations include GD. Imagick provides better color profile handling for certain image types.

Live mode behavior #

In glaze serve:

image requests with Glide params are transformed on demand
transformed results are cached under tmp/cache/glide/
subsequent requests for the same URL/params are served from cache
template cache lives separately under tmp/cache/sugar/

Build mode behavior #

In glaze build:

all image URLs with Glide params in rendered HTML are rewritten — this includes images in both Djot content and Sugar templates
transforms are computed and written to public/_glide/
the original source images are also copied to public/ at their original paths
the output file extension reflects the actual output format: fm=webp produces a .webp file, fm=jpg produces a .jpg, and so on

Example without format conversion:

Source URL: /images/cover.jpg?w=1200&h=500&fit=crop
Output URL: /_glide/abc123.jpg
Output file: public/_glide/abc123.jpg

Example with format conversion:

Source URL: /static/hero.png?w=1200&fm=webp
Output URL: /_glide/def456.webp
Output file: public/_glide/def456.webp

Notes #

If no Glide params are present in a URL, it is not transformed.
Glide supports many parameters beyond w, h, and fit – see the Glide docs for the full list.