improve figure preview

assets/_custom.scss

@@ -18,6 +18,11 @@ figure.audio-player audio {
   width: 100%;
 }
 
+img[data-thumbnail] {
+  background-repeat: no-repeat;
+  background-size: 100%;
+}
+
 .grid-list {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));

layouts/shortcodes/figure.html

@@ -0,0 +1,16 @@
+{{- $src := .Get "src" -}}
+{{- $resource := .Page.Resources.Get $src -}}
+{{- $title := .Get "title" | default $resource.Title -}}
+{{- $thumbnail := $resource.Resize "64x" | images.Filter (images.GaussianBlur 5) -}}
+<figure>
+  <img
+    src="{{ $resource.Permalink }}"
+    width="{{ $resource.Width }}"
+    height="{{ $resource.Height }}"
+    data-thumbnail
+    style="background-image: url('data:{{ $thumbnail.MediaType }};base64,{{ $thumbnail.Content | base64Encode }}')"
+  >
+  {{- with $title -}}
+  <figcaption><h4>.</h4></figcaption>
+  {{- end -}}
+</figure>