1 files changed, 53 insertions, 0 deletions
diff --git a/layouts/shortcodes/image.html b/layouts/shortcodes/image.html
new file mode 100644
index 0000000..441c2d1
--- /dev/null
+++ b/layouts/shortcodes/image.html
@@ -0,0 +1,53 @@
+<!-- Read page and image params -->
+{{- $max_width := .Page.Params.image_max_width }}
+{{- $dir := .Page.Params.image_dir }}
+
+{{- $caption := .Inner }}
+{{- $file := .Params.file }}
+{{- $class := .Params.class }}
+{{- $source := .Params.source }}
+{{- $alt := .Params.alt }}
+
+<!-- Get the the image -->
+{{- $path := printf "%s/%s" $dir $file}}
+{{- $img := resources.Get $path }}
+
+<!-- Decide on the desired 1x and 2x width -->
+{{- $raw_width := $img.Width}}
+{{- $final1x_width := (cond (gt $max_width $raw_width) $raw_width $max_width) }}
+{{- $final2x_width := math.Mul $final1x_width 2}}
+
+<!-- Generate 1x and 2x images -->
+{{- $img1xproc := printf "x%d webp q90" $final1x_width }}
+{{- $img2xproc := printf "x%d webp q90" $final2x_width }}
+{{- $img1x := $img.Resize $img1xproc }}
+{{- $img2x := $img.Resize $img2xproc }}
+
+<!-- Generate raw, optimized img -->
+{{- $imgproc := printf "x%d webp q90" $raw_width }}
+{{- $img_raw := $img.Resize $imgproc }}
+
+<!-- Resulting HTML -->
+<figure>
+  <a href="{{ $img_raw.Permalink }}">
+    <img 
+      class="{{ $class }}"
+      alt="{{ $alt }}" 
+      src="{{ $img1x.Permalink }}" 
+      srcset="
+              {{ $img1x.Permalink }} 1x,
+              {{ $img2x.Permalink }} 2x
+              "
+      width="{{ $img1x.Width }}" 
+      height="{{ $img1x.Height }}"
+      >
+  </a>
+  <figcaption>
+    {{ $caption }}
+
+    {{- if $source }}
+    <a href="{{ $source }}" target="_blank" title="source">[source]</a>
+    {{ end }}
+  </figcaption>
+</figure>
+