Initial commit

1 files changed, 60 insertions, 0 deletions

diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html
new file mode 100644
index 0000000..8c6a85e
--- /dev/null
+++ b/layouts/shortcodes/figure.html
@@ -0,0 +1,60 @@
+<!--
+  It always expects the image is inside a folder called "img".
+  File will be converted into 3 versions: 500w, 800w and 1200w.
+
+  Usage:
+    figure "weird_cat.jpg" "Something that can (or not) be a cat."
+    figure file="weird_cat.jpg" alt="Something that can (or not) be a cat."
+    figure class="border" file="weird_cat.jpg" alt="Something that can (or not) be a cat."
+    figure "weird_cat.jpg" "Something that can (or not) be a cat." "border"
+    figure class="border" file="weird_cat.jpg" caption="Something that can (or not) be a cat." alt="Ask someone blind if a caption and alt text are the same thing."
+
+  Default classes:
+    border
+    borderless
+-->
+
+{{ $file    := .Get "file"    | default (.Get 0) }}
+{{ $caption := .Get "caption" | default (.Get 1) | markdownify }}
+{{ $class   := .Get "class"   | default (.Get 2) }}
+{{ $alt     := .Get "alt"     | default $caption }}
+
+
+{{ $imgPath := .Page.Param "imgPath" }}
+
+{{ if $imgPath }}
+  {{ $file = path.Join $imgPath $file }}
+{{ end }}
+
+{{ with $.Page.Resources.GetMatch $file }}
+
+  {{ $placeholder         := (.Resize "800x png") | images.Filter (images.Contrast -100) }}
+  {{ $encodedPlaceholder  := printf "image/png;base64,%s" ($placeholder.Content | base64Encode) }}
+  {{ $encodedPixel        := "image/gif;base64,R0lGODdhAQABAIABAICAgP///ywAAAAAAQABAAACAkQBADs=" }}
+
+  <figure>
+    <img
+      class="lazyload {{ $class }}"
+      loading="lazy"
+      data-srcset="{{ (.Resize "1200x").RelPermalink }} 1200w, {{ (.Resize "800x").RelPermalink }} 800w, {{ (.Resize "500x q90").RelPermalink }} 500w"
+      src="data:{{ $encodedPlaceholder }}"
+      data-src="{{ (.Resize "800x").RelPermalink }}"
+      {{ with $alt }}alt="{{ . }}"{{ end }}
+    />
+
+    <noscript>
+      <img
+        {{ with $class }}class="{{ . }}"{{ end }}
+        loading="lazy"
+        srcset="{{ (.Resize "1200x").RelPermalink }} 1200w, {{ (.Resize "800x").RelPermalink }} 800w, {{ (.Resize "500x q90").RelPermalink }} 500w"
+        src="data:{{ $encodedPlaceholder }}"
+        {{ with $alt }}alt="{{ . }}"{{ end }}
+      />
+    </noscript>
+    
+    {{ with $caption }}
+      <figcaption>{{ . }}</figcaption>
+    {{ end }}
+    
+  </figure>
+{{ end }}