From 20c1c8af3e48afcf717c44509f358f0a8d2d549f Mon Sep 17 00:00:00 2001
From: razonyang <razonyang@gmail.com>
Date: Tue, 23 Apr 2024 15:31:57 +0800
Subject: [PATCH] feat: add the post_thumbnail_position parameter

---
 assets/hb/modules/blog/scss/post/_card.scss   | 36 +++++++++++++++++++
 hugo.toml                                     |  1 +
 layouts/partials/hb/modules/blog/index.html   |  3 +-
 .../partials/hb/modules/blog/post/card.html   | 17 ++++++++-
 layouts/partials/hb/modules/blog/posts.html   |  2 +-
 5 files changed, 56 insertions(+), 3 deletions(-)

diff --git a/assets/hb/modules/blog/scss/post/_card.scss b/assets/hb/modules/blog/scss/post/_card.scss
index fbc9f087..43c57351 100644
--- a/assets/hb/modules/blog/scss/post/_card.scss
+++ b/assets/hb/modules/blog/scss/post/_card.scss
@@ -17,3 +17,39 @@
     text-transform: uppercase;
     width: 100%;
 }
+
+.hb-blog-post-card-wrapper {
+    .card-img-top {
+        border: 0 !important;
+        display: block;
+        height: 100%;
+        margin-top: 0 !important;
+    }
+
+    .hb-blog-post-card-img {
+        @extend .rounded-0;
+    }
+
+    @include media-breakpoint-down(sm) {
+        .card-img-top {
+            margin-bottom: .25rem;
+        }
+    }
+
+    @include media-breakpoint-up(md) {
+        .card-img-top {
+            border-radius: 0 !important;
+        }
+
+        .hb-blog-post-card-img {
+            height: 100%;
+            width: 180px;
+        }
+    }
+
+    @include media-breakpoint-up(lg) {
+        .hb-blog-post-card-img {
+            width: 240px;
+        }
+    }
+}
diff --git a/hugo.toml b/hugo.toml
index d3df9753..0495e25b 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -29,6 +29,7 @@ post_date_format = ':date_long'
 post_thumbnail = true
 post_thumbnail_placeholder = ""
 post_thumbnail_default = "images/thumbnail.png"
+post_thumbnail_position = "top"
 list_cols_md = 2
 list_cols_lg = 3 # won't work when sidebar was enabled.
 
diff --git a/layouts/partials/hb/modules/blog/index.html b/layouts/partials/hb/modules/blog/index.html
index 9ccdf9fa..59b72623 100644
--- a/layouts/partials/hb/modules/blog/index.html
+++ b/layouts/partials/hb/modules/blog/index.html
@@ -17,7 +17,8 @@
   </div>
   {{- if $hasPinned }}
     <div class="col-12 col-lg-6">
-      {{ partial "hb/modules/blog/posts" (dict "Pages" $pinnedPages "Cols" "row-cols-1" "ReadMore" false) }}
+      {{- $ctx := dict "Page" (index $pinnedPages 0) "ReadMore" false }}
+      {{ partial "hb/modules/blog/post/card" $ctx }}
     </div>
   {{- end }}
 </div>
diff --git a/layouts/partials/hb/modules/blog/post/card.html b/layouts/partials/hb/modules/blog/post/card.html
index ed48e8b8..742932df 100644
--- a/layouts/partials/hb/modules/blog/post/card.html
+++ b/layouts/partials/hb/modules/blog/post/card.html
@@ -11,8 +11,20 @@
 {{- $meta := default true .Meta }}
 {{- $pageMeta := default dict $page.Params.meta }}
 {{- $modularize := default true .Modularize }}
+{{- $thumbnail := default true site.Params.hb.blog.post_thumbnail }}
+{{- $thumbnailPos := "top" }}
+{{- if eq .Caller "list" }}
+  {{- $thumbnailPos = site.Params.hb.blog.post_thumbnail_position }}
+{{- end }}
 <div
   class="hb-blog-post-card card border-0 overflow-hidden h-100{{ cond $modularize ` hb-module` ` bg-transparent` }} mb-0">
+  {{- if and $thumbnail (ne $thumbnailPos "top") }}
+    {{ printf `<div class="d-flex flex-column flex-md-row">` | safeHTML }}
+    <div class="hb-blog-post-card-wrapper me-md-2 mt-2 mt-md-0">
+      {{ partial "hb/modules/blog/post/card-img" $page }}
+    </div>
+    {{ printf `<div class="hb-blog-post-card-body overflow-hidden">` | safeHTML }}
+  {{- end }}
   {{- if and $meta (ne $pageMeta false) }}
     <div class="hb-blog-post-meta d-flex align-items-center">
       {{- if default true $pageMeta.authors }}
@@ -27,7 +39,7 @@
       {{ partialCached "hb/modules/blog/post/meta/first-section" $page $page }}
     </div>
   {{- end }}
-  {{- if default true site.Params.hb.blog.post_thumbnail }}
+  {{- if and $thumbnail (eq $thumbnailPos "top") }}
     {{ partial "hb/modules/blog/post/card-img" $page }}
   {{- end }}
   <div class="card-body px-0 py-2 d-flex flex-column">
@@ -71,4 +83,7 @@
       {{- end }}
     {{- end }}
   </div>
+  {{- if and $thumbnail (ne $thumbnailPos "top") }}
+    {{ printf `</div></div>` | safeHTML }}
+  {{- end }}
 </div>
diff --git a/layouts/partials/hb/modules/blog/posts.html b/layouts/partials/hb/modules/blog/posts.html
index e7f0142b..a3ed3a53 100644
--- a/layouts/partials/hb/modules/blog/posts.html
+++ b/layouts/partials/hb/modules/blog/posts.html
@@ -4,7 +4,7 @@
 <div class="hb-blog-posts row {{ $cols }} g-3 mb-3">
   {{ range .Pages }}
     <div class="col">
-      {{- $ctx := dict "Page" . "ReadMore" $readMore "Modularize" $modularize }}
+      {{- $ctx := dict "Page" . "ReadMore" $readMore "Modularize" $modularize "Caller" "list" }}
       {{ partial "hb/modules/blog/post/card" $ctx }}
     </div>
   {{ end }}