Using Glide in Your Bard Content to Optimise Statamic Images

If you've used Statamic for any length of time, you've probably used, or at least heard of Bard. Bard is a field type developed by Statamic, built on top of TipTap and Prosemirror. It's a block-based editor that allows the user to define how they want their content to be displayed.

I use Bard to render the very content you're reading right now!

I had an issue with Bard, however.

I was uploading images to blog posts as jpeg files, they were slightly too large for the display, and ideally, they'd be in WEBP format to improve load times.

Using Glide to Manipulate Images

You've probably also heard of Glide. Glide is an image processing package that lets you manipulate images in your Antlers and Blade templates.

I won't go into great detail on Bard or Glide. I'd be here for days, and the Statamic docs have some great reading on those awesome packages.

What I wanted to do was reduce the size of my images for the site, and convert them to a WEBP format. With glide, that might look something like this:

<picture>
  <source srcset="{{ glide:src width="780" format="webp" }}" type="image/webp">
  <img src="{{ glide:src width="780" }}" alt="{{ alt }}">
</picture>

Nice. Glide will take that src field and convert the image to the right width and format.

This was where I got stuck.

The traditional approach here with Bard would be to create a field set. Using a field set, you could then use an if/else statement to find the images in your content, and render them differently.

I didn't want to do this for two reasons:

I don't like the if statements, it makes things messy and seems unnecessary consider the simplicity of what we're trying to do.
Adding a set every time I upload an image slows me down A LOT when I write content. I want to be able to just insert images natively into the editor.

So with that in mind, how can we get around this?

When you render Bard content, you simply "echo" out the field in your Antlers template. In my blog that looks like this:

A screenshot of an antlers template with Bard content rendered inside

So how do include code to tell Statamic to render my images with Glide?

Using Bard Mutator To Render with Glide

Fortunately, I happened across a package from the magic Jack Sleight. Its called Bard Mutator. You can check out the documentation for the details

It allows you to intercept your Bard rendering, and change how the content will be rendered. Sick. He has a few examples in the documentation, but here's what worked for me:

Install the package:

composer require jacksleight/statamic-bard-mutator

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use JackSleight\StatamicBardMutator\Facades\Mutator;


class AppServiceProvider extends ServiceProvider
{
    public function register()
    {
        // Enable advanced features 
        $this->app->bind(\Tiptap\Editor::class, \JackSleight\StatamicBardMutator\Editor::class);

        // Tell Bard to render all images with the partial
        // resources/views/_image.antlers.html
        Mutator::html('image', function ($value) {
            return ['content' => view('_image', $value[1])];
        });
    }
}

And finally here's the Antlers template to render the image:

// resources/views/_image.antlers.html
<picture>
  <source srcset="{{ glide:src width="780" format="webp" }}" type="image/webp">
  <img src="{{ glide:src width="780" }}" alt="{{ alt }}">
</picture>