diff --git a/layouts/entry/single.html b/layouts/entry/single.html
index 8d24e5a..7b9f342 100644
--- a/layouts/entry/single.html
+++ b/layouts/entry/single.html
@@ -34,4 +34,18 @@
 </div>
 {{ end }}
 
+{{ end }}
+
+{{ define "css" }}
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css" type="text/css" />
+{{ end }}
+
+{{ define "scripts" }}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js" type="text/javascript"></script>
+
+<script type="text/javascript">
+    window.addEventListener("DOMContentLoaded", function() {
+        baguetteBox.run('.is-img-preview');
+    });
+</script>
 {{ end }}
\ No newline at end of file
diff --git a/layouts/shortcodes/imgs.html b/layouts/shortcodes/imgs.html
new file mode 100644
index 0000000..f5fa671
--- /dev/null
+++ b/layouts/shortcodes/imgs.html
@@ -0,0 +1,16 @@
+<div class="columns is-img-preview">
+    {{ range $param := .Params }}
+    <!-- image -->
+    {{ $items := split $param "|" }}
+    {{ $src := (index $items 0) }}
+    {{ $title := (index $items 1) }}
+    <div class="column">
+        <a href="{{ $src }}" title="{{ $title }}">
+            <img src="{{ $src }}" alt="{{ $title }}">
+        </a>
+        {{ if $title }}
+            <p class="has-text-centered is-italic has-text-grey-light">{{ $title }}</p>
+        {{ end }}
+    </div>
+    {{ end }}
+</div>
\ No newline at end of file