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

 {{ image }} {{ glide:image tag="true" }} {{ /image }}

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

 {{ image }} {{ responsive:image tag="true" }} {{ /image }}

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