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 }}