From e1ea8a82fe2c8722880272164be88e14995424b4 Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@geeklabor.de>
Date: Sun, 26 Jul 2020 14:47:12 +0200
Subject: [PATCH] add feature image for blog posts

---
 layouts/_default/single.html | 19 +++++++++++++++++++
 src/sass/_base.scss          | 21 +++++++++++++++++++++
 2 files changed, 40 insertions(+)

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 1e8cffe..2d6d7d3 100644
--- a/layouts/_default/single.html
+++ b/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 }}
diff --git a/src/sass/_base.scss b/src/sass/_base.scss
index 1cc9375..6a5a696 100644
--- a/src/sass/_base.scss
+++ b/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;