Render images in Statamics Bard

The Bard fieldtype is a beautiful idea to create long texts containing images, code samples - basically any sort of content. While I was creating my blog I was not sure how to extract images from the Bard field.

Thanks to the Glide tag you can just simply pass the field of your image and it automatically outputs the proper url. My image field is a set called image.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

sets:
  image:
    display: Image
    fields:
      - handle: image
        field:
          mode: grid
          restrict: false
          allow_uploads: true
          display: Image
          type: assets
          icon: assets
          listable: hidden
          container: blog_images
          max_files: 1

In your Antlers template for the images just write

1
2
3

<div class="flex justify-center mb-2 max-w-4xl mx-auto">
  {{ image }} {{ glide:image tag="true" }} {{ /image }}
</div>

Responsive images

For generating responsive images you can use the excellent Statamic Responsive Images addon provided by Spatie. With this the above snippet changes to that:

1
2
3

<div class="flex justify-center mb-2 max-w-4xl mx-auto">
  {{ image }} {{ responsive:image tag="true" }} {{ /image }}
</div>

This generates a tag with srcset to render images for differrent breakpoints.