feat: add the post_thumbnail_position parameter

hbstack · Apr 23, 2024 · 98ec749 · 98ec749
1 parent d64c984
commit 98ec749
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 51 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,64 +11,80 @@
 {{- $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 $meta (ne $pageMeta false) }}
-    <div class="hb-blog-post-meta d-flex align-items-center">
-      {{- if default true $pageMeta.authors }}
-        {{ partialCached "hb/modules/blog/post/meta/authors" $page $page }}
-      {{- end }}
-      {{- if default true $pageMeta.date }}
-        {{ partialCached "hb/modules/blog/post/meta/date" $page $page }}
-      {{- end }}
-      {{- if and $readingTime (default true $pageMeta.reading_time) }}
-        {{ partialCached "hb/modules/blog/post/meta/reading-time" $page $page }}
-      {{- end }}
-      {{ partialCached "hb/modules/blog/post/meta/first-section" $page $page }}
-    </div>
-  {{- end }}
-  {{- if default true site.Params.hb.blog.post_thumbnail }}
-    {{ partial "hb/modules/blog/post/card-img" $page }}
+  {{- 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>
   {{- end }}
-  <div class="card-body px-0 py-2 d-flex flex-column">
-    <div class="hb-blog-post-title card-title h5 py-1">
-      <a
-        class="hb-blog-post-title-link d-block"
-        title="{{ $page.Title }}"
-        {{ if $external }}target="_blank" rel="external"{{ end }}
-        href="{{ $url }}">
-        {{- if $page.Params.pinned }}
-          {{- partialCached "hb/modules/blog/helpers/pinned-icon" . -}}
+  <div class="hb-blog-post-card-body overflow-hidden">
+    {{- if and $meta (ne $pageMeta false) }}
+      <div class="hb-blog-post-meta d-flex align-items-center">
+        {{- if default true $pageMeta.authors }}
+          {{ partialCached "hb/modules/blog/post/meta/authors" $page $page }}
         {{- end }}
-        {{- $page.Title -}}
-        {{- if $external }}
-          {{- partial "icons/icon" (dict "vendor" "bootstrap" "name" "box-arrow-up-right" "className" "ms-1") }}
+        {{- if default true $pageMeta.date }}
+          {{ partialCached "hb/modules/blog/post/meta/date" $page $page }}
         {{- end }}
-      </a>
-    </div>
-    {{- if and $meta (ne $pageMeta false) (default true $pageMeta.taxonomies) }}
-      <div class="hb-blog-post-meta d-block text-nowrap text-truncate mb-2">
-        {{ partialCached "hb/modules/blog/post/meta/taxonomies" $page $page }}
+        {{- if and $readingTime (default true $pageMeta.reading_time) }}
+          {{ partialCached "hb/modules/blog/post/meta/reading-time" $page $page }}
+        {{- end }}
+        {{ partialCached "hb/modules/blog/post/meta/first-section" $page $page }}
       </div>
     {{- end }}
-    {{- if $showSummary }}
-      {{- $summary := $page.Summary }}
-      {{- $truncated := $page.Truncated }}
-      {{- with $page.Description }}
-        {{- $summary = . }}
-        {{- $truncated := true }}
-      {{- end }}
-      <div class="hb-blog-post-summary card-text text-secondary mb-auto">
-        {{- $summary -}}
+    {{- 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">
+      <div class="hb-blog-post-title card-title h5 py-1">
+        <a
+          class="hb-blog-post-title-link d-block"
+          title="{{ $page.Title }}"
+          {{ if $external }}target="_blank" rel="external"{{ end }}
+          href="{{ $url }}">
+          {{- if $page.Params.pinned }}
+            {{- partialCached "hb/modules/blog/helpers/pinned-icon" . -}}
+          {{- end }}
+          {{- $page.Title -}}
+          {{- if $external }}
+            {{- partial "icons/icon" (dict "vendor" "bootstrap" "name" "box-arrow-up-right" "className" "ms-1") }}
+          {{- end }}
+        </a>
       </div>
-      {{- if and $readMore $truncated }}
-        <div class="mt-2">
-          <a
-            class="text-secondary" href="{{ $url }}"{{ if $external }}target="_blank" rel="external"{{ end }}>
-            {{- i18n "read_more_about" $page.Title -}}
-          </a>
+      {{- if and $meta (ne $pageMeta false) (default true $pageMeta.taxonomies) }}
+        <div class="hb-blog-post-meta d-block text-nowrap text-truncate mb-2">
+          {{ partialCached "hb/modules/blog/post/meta/taxonomies" $page $page }}
         </div>
       {{- end }}
-    {{- end }}
+      {{- if $showSummary }}
+        {{- $summary := $page.Summary }}
+        {{- $truncated := $page.Truncated }}
+        {{- with $page.Description }}
+          {{- $summary = . }}
+          {{- $truncated := true }}
+        {{- end }}
+        <div class="hb-blog-post-summary card-text text-secondary mb-auto">
+          {{- $summary -}}
+        </div>
+        {{- if and $readMore $truncated }}
+          <div class="mt-2">
+            <a
+              class="text-secondary" href="{{ $url }}"{{ if $external }}target="_blank" rel="external"{{ end }}>
+              {{- i18n "read_more_about" $page.Title -}}
+            </a>
+          </div>
+        {{- end }}
+      {{- end }}
+    </div>
   </div>
+  {{- if and $thumbnail (ne $thumbnailPos "top") }}
+    {{ printf `</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 }}