add feature image for blog posts

layouts/_default/single.html

@@ -1,11 +1,30 @@
 {{ define "main" }}
     <article class="gblog-post">
         <header class="gblog-post__header">
+            {{ $source := ($.Resources.ByType "image").GetMatch "{*feature*,*cover*,*thumbnail*}" }}
+            {{ with $source }}
+                <picture class="gblog-post__figure">
+                    {{ with $.Resources.GetMatch (replace (.Title) (path.Ext (.Title)) ".webp") }}
+                    <source srcset="{{ .Permalink }}" type="image/webp">
+                    {{ end }}
+                    {{ $featured := .Fill (printf "950x285 %s" (default "Smart" .Params.anchor)) }}
+                    <source srcset="{{ $featured.Permalink }}">
+                    <img src="{{ $featured.Permalink }}" alt="{{ default $.Title .Params.description }}" >
+                </picture>
+            {{ end }}
+
             <h1>{{ partial "title" . }}</h1>
         </header>
 
         <section class="gblog-markdown">
             {{ partial "content" . }}
+            {{ with $source }}
+            {{ if .Params.credits }}
+            <ul class="gblog-post__credits">
+                <li>{{ . | humanize }} image: {{ .Params.credits | safeHTML }}</li>
+            </ul>
+            {{ end }}
+            {{ end }}
         </section>
     </article>
 {{ end }}

src/sass/_base.scss

@@ -261,6 +261,15 @@ img {
     }
   }
 
+  &__figure {
+    img {
+      width: 100%;
+      height: auto;
+      margin-bottom: $padding-32;
+      object-fit: cover;
+    }
+  }
+
   &__footer {
     :not(:first-child).no-wrap {
       margin-left: $padding-8;
@@ -270,6 +279,13 @@ img {
       font-size: 1.2em;
     }
   }
+
+  &__credits {
+    margin-top: 1.5rem;
+    color: $gray-600;
+    font-size: 0.9em;
+    list-style-type: none
+  }
 }
 
 .gblog-footer {
@@ -414,6 +430,11 @@ img {
     }
   }
 
+  .gblog-post__figure,
+  .gblog-post__credits {
+    display: none;
+  }
+
   .gblog-error {
     padding: $padding-16 * 6 $padding-16;