Add render-image template

assets/scss/blog.scss

@@ -2,6 +2,10 @@
 @import "variables";
 @import "main";
 
+// markup
+
+@import "markup/render-image";
+
 // partials
 @import "partials/sidebar";
 @import "partials/footer";

assets/scss/markup/render-image.scss

@@ -0,0 +1,10 @@
+.md-img {
+    margin: 3em;
+    &.with-text { margin-bottom: .5em; }
+    &-text {
+        font-size: .8em;
+        font-weight: 300;
+        margin: 0 0 3em 0;
+        text-align: center;
+    }
+}

layouts/_default/_markup/render-image.html

@@ -0,0 +1,4 @@
+<p class="md-img {{ with .Text }}with-text{{ end }}">
+    <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title }} title="{{ . }}"{{ end }} loading="lazy" />
+</p>
+{{ with .Text }}<p class="md-img-text">{{ . }}</p>{{ end }}