From ea75958a3985488de296954cfddcca0f9539e89b Mon Sep 17 00:00:00 2001
From: liushuyu <liushuyu011@gmail.com>
Date: Fri, 9 Jul 2021 16:49:55 -0600
Subject: [PATCH] shortcodes: add support for picture comparisons

---
 .../shortcodes/imgs-compare-include-end.html  |  2 ++
 .../shortcodes/single-title-imgs-compare.html | 22 +++++++++++++++++++
 2 files changed, 24 insertions(+)
 create mode 100644 layouts/shortcodes/imgs-compare-include-end.html
 create mode 100644 layouts/shortcodes/single-title-imgs-compare.html

diff --git a/layouts/shortcodes/imgs-compare-include-end.html b/layouts/shortcodes/imgs-compare-include-end.html
new file mode 100644
index 0000000..9f10804
--- /dev/null
+++ b/layouts/shortcodes/imgs-compare-include-end.html
@@ -0,0 +1,2 @@
+<script src="https://cdn.jsdelivr.net/npm/juxtaposejs@1.1.6/build/js/juxtapose.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/juxtaposejs@1.1.6/build/css/juxtapose.css">
diff --git a/layouts/shortcodes/single-title-imgs-compare.html b/layouts/shortcodes/single-title-imgs-compare.html
new file mode 100644
index 0000000..38aed05
--- /dev/null
+++ b/layouts/shortcodes/single-title-imgs-compare.html
@@ -0,0 +1,22 @@
+{{ $title := .Get 0 }}
+<div class="columns is-bottom-marginless">
+    <div class="column is-bottom-paddingless juxtapose">
+    {{ range $param := last 2 .Params }}
+    <!-- image -->
+    {{ $items := split $param "|" }}
+    {{ $src := (index $items 0) }}
+    {{ $subtitle := (index $items 1) }}
+    {{ $split_src := split $src "." }}
+    {{ $extension := index $split_src (sub (len $split_src) 1) }}
+        {{- if eq $extension "png" -}}
+        <img src="{{ $src }}.jpg" alt="{{ $title }}">
+        {{- else -}}
+        <img src="{{ $src }}" alt="{{ $title }}">
+        {{- end -}}
+    {{ end }}
+    </div>
+</div>
+
+{{ if $title }}
+<p class="has-text-centered is-italic has-text-grey-light">{{ $title }}</p>
+{{ end }}