3 files changed, 46 insertions(+), 0 deletions(-)

A layouts/shortcodes/gallery.html
A layouts/shortcodes/image.html
M static/css/gallery.css

@@ 0,0 1,22 @@
+<div class="gallery">
+  {{ $gallery_src := print (.Get "src") }}
+  {{ $local_dir := print "static/" $gallery_src }}
+  {{ range (readDir $local_dir) }}
+    {{ $web_src := print $gallery_src "/" .Name }}
+    {{ if strings.HasSuffix .Name "webm" }}
+      <video controls loop width="200">
+        <source src="{{ $web_src }}" type="video/webm">
+        <p>Video <a href="{{ $web_src }}">here</a></p>
+      </video>
+    {{ else if (strings.HasSuffix .Name "mp4") }}
+      <video controls loop width="200">
+        <source src="{{ $web_src }}" type="video/mp4">
+        <p>Video <a href="{{ $web_src }}">here</a></p>
+      </video>
+    {{ else }}
+      <a href="{{ $web_src }}" data-lightbox="{{ $gallery_src }}">
+        <img src="{{ $web_src }}" height="100" />
+      </a>
+    {{ end}}
+  {{ end }}
+</div>

@@ 0,0 1,18 @@
+<div class="image">
+  {{ $web_src := print (.Get "src") }}
+  {{ if strings.HasSuffix $web_src "webm" }}
+    <video controls loop width="200">
+      <source src="{{ $web_src }}" type="video/webm">
+      <p>Video <a href="{{ $web_src }}">here</a></p>
+    </video>
+  {{ else if (strings.HasSuffix $web_src "mp4") }}
+    <video controls loop width="200">
+      <source src="{{ $web_src }}" type="video/mp4">
+      <p>Video <a href="{{ $web_src }}">here</a></p>
+    </video>
+  {{ else }}
+    <a href="{{ $web_src }}" data-lightbox="{{ .Page.Title }}">
+      <img src="{{ $web_src }}" height="100" />
+    </a>
+  {{ end}}
+</div>

@@ 4,3 4,9 @@
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 }
 
+.image img {
+  height: auto;
+  width: auto;
+  max-height: 300px;
+  max-width: 800px;
+}