feat: add the post_thumbnail_position parameter (#778)

hbstack · Apr 23, 2024 · 2bef119 · 2bef119
1 parent d64c984
commit 2bef119
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 }}