diff --git a/assets/_custom.scss b/assets/_custom.scss
index 6cea794..6019a29 100644
--- a/assets/_custom.scss
+++ b/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));
diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html
new file mode 100644
index 0000000..5594f71
--- /dev/null
+++ b/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>
\ No newline at end of file