From 2d2e58d8f4d31e1fd61d2453947913e7fa95ee53 Mon Sep 17 00:00:00 2001
From: Geo <gcushen@users.noreply.github.com>
Date: Mon, 16 May 2022 19:44:32 +0100
Subject: [PATCH] feat: add Cover image to Book layout

---
 .../scss/wowchemy/elements/_content.scss      |  7 ++++-
 wowchemy/layouts/partials/book_layout.html    | 26 +++++++++++++++++++
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/wowchemy/assets/scss/wowchemy/elements/_content.scss b/wowchemy/assets/scss/wowchemy/elements/_content.scss
index 5a0048f4..b9882822 100644
--- a/wowchemy/assets/scss/wowchemy/elements/_content.scss
+++ b/wowchemy/assets/scss/wowchemy/elements/_content.scss
@@ -25,7 +25,12 @@
 
 .article-banner {
   width: 100%;
-  height: auto;
+  height: 260px;
+  object-fit: cover;
+
+  @include media-breakpoint-up(lg) {
+    height: 310px; /* Increased height on desktop */
+  }
 }
 
 .featured-image-wrapper {
diff --git a/wowchemy/layouts/partials/book_layout.html b/wowchemy/layouts/partials/book_layout.html
index 1224a735..fe5e9d30 100644
--- a/wowchemy/layouts/partials/book_layout.html
+++ b/wowchemy/layouts/partials/book_layout.html
@@ -32,7 +32,33 @@
           {{ if $show_breadcrumb }}
             {{ partial "components/breadcrumb" $current_page }}
           {{ end }}
+        </div>
 
+        {{/* Cover image */}}
+        {{ if and .Params.cover.image }}
+        <div class="article-header">
+          {{- $img := "" -}}
+          {{ $alt := (.Params.cover.caption | default "") | plainify }}
+          {{ $destination := .Params.cover.image }}
+          {{ $is_remote := strings.HasPrefix $destination "http" }}
+          {{- if not $is_remote -}}
+            {{- $img = (.Page.Resources.ByType "image").GetMatch $destination -}}
+            {{- if not $img -}}
+              {{- $img = resources.Get (path.Join "media" $destination) -}}
+            {{- end -}}
+          {{- end -}}
+          {{ if $img }}
+            {{ $img = $img.Fit "1800x310 webp" }}
+            <img src="{{$img.RelPermalink}}" width="{{$img.Width}}" height="{{$img.Height}}" class="article-banner" alt="{{$alt}}">
+          {{ else }}
+            <img src="{{ .Params.cover.image }}" class="article-banner" alt="{{$alt}}">
+          {{ end }}
+
+          {{ with .Params.cover.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
+        </div>
+        {{end}}
+
+        <div class="docs-article-container">
           <h1>{{ .Title }}</h1>
 
           <div class="article-style">