feat: add cascade list style for posts list and terms list (#915)

```yaml // params.yaml hb: terms: list_style: cascade blog: list_style: cascade ``` Closes #914
hbstack · Jun 21, 2024 · 993bae7 · 993bae7
1 parent 8abb32c
commit 993bae7
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 8 deletions.
diff --git a/hugo.toml b/hugo.toml
@@ -19,14 +19,17 @@ path = "github.com/hugomods/icons/vendors/bootstrap"
 [[module.imports]]
 path = "github.com/hugomods/images"
 
+[[module.imports]]
+path = "github.com/hugomods/masonry-js"
+
 [params.hb.terms]
 paginate = 12
 profile = true
 profile_metrics = true
-list_style = "" # available options: minimalist.
+list_style = "" # available options: minimalist, cascade.
 
 [params.hb.blog]
-list_style = "" # available options: minimalist.
+list_style = "" # available options: minimalist, cascade.
 full_width = false
 paginate = 12
 post_date_format = ':date_long'

diff --git a/layouts/_default/term.html b/layouts/_default/term.html
@@ -11,7 +11,8 @@
  {{- if default true site.Params.hb.terms.profile }}
  {{ partialCached "hb/modules/blog/term/profile" . . }}
  {{- end }}
- {{- if eq site.Params.hb.terms.list_style "minimalist" }}
+ {{- $listStyle := site.Params.hb.terms.list_style }}
+ {{- if eq $listStyle "minimalist" }}
  <div class="hb-blog-posts hb-terms-posts hb-module">
  {{- range .Paginator.Pages }}
  <div class="hb-blog-post hb-terms-post">
@@ -34,10 +35,17 @@
  {{- if not (partialCached "hb/modules/blog/functions/has-sidebar" .) }}
  {{- $cols = printf "%s row-cols-lg-3" $cols }}
  {{- end }}
- <div class="hb-terms-posts row {{ $cols }}">
+ {{- if eq $listStyle "cascade" }}
+ {{ partialCached "hugomods/masonry-js/assets/js" . }}
+ {{- end }}
+ <div
+ {{ if eq $listStyle "cascade" }}
+ data-masonry="{&quot;percentPosition&quot;: true }"
+ {{ end }}
+ class="hb-terms-posts row {{ $cols }}">
  {{- range .Paginator.Pages }}
  <div class="mb-3 mb-lg-4">
- {{ partial "hb/modules/blog/post/card" (dict "Page" .) }}
+ {{ partial "hb/modules/blog/post/card" (dict "Page" . "ListStyle" $listStyle "Caller" "list") }}
  </div>
  {{- end }}
  </div>

diff --git a/layouts/partials/hb/modules/blog/post/card.html b/layouts/partials/hb/modules/blog/post/card.html
@@ -11,10 +11,15 @@
 {{- $meta := default true .Meta }}
 {{- $pageMeta := default dict $page.Params.meta }}
 {{- $modularize := default true .Modularize }}
+{{- $listStyle := default "" .ListStyle }}
 {{- $thumbnail := true }}
 {{- $thumbnailPos := "top" }}
 {{- if eq .Caller "list" }}
  {{- $thumbnail = default true site.Params.hb.blog.post_thumbnail }}
+ {{- $imgs := partialCached "_funcs/get-page-images" $page $page }}
+ {{- if eq $listStyle "cascade" }}
+ {{- $thumbnail = (gt (len $imgs) 0) }}
+ {{- end }}
  {{- $thumbnailPos = site.Params.hb.blog.post_thumbnail_position }}
 {{- end }}
 <div

diff --git a/layouts/partials/hb/modules/blog/posts.html b/layouts/partials/hb/modules/blog/posts.html
@@ -1,10 +1,18 @@
 {{- $cols := default "row-cols-1 row-cols-lg-2 row-cols-xl-3" .Cols }}
-{{- $readMore := default (default true site.Params.hb.blog.post_read_more) .ReadMore }}
+{{- $readMore := default site.Params.hb.blog.post_read_more .ReadMore }}
 {{- $modularize := default true .Modularize }}
-<div class="hb-blog-posts row {{ $cols }} g-3 mb-3">
+{{- $listStyle := site.Params.hb.blog.list_style }}
+{{- if eq $listStyle "cascade" }}
+ {{ partialCached "hugomods/masonry-js/assets/js" . }}
+{{- end }}
+<div
+ {{ if eq $listStyle "cascade" }}
+ data-masonry="{&quot;percentPosition&quot;: true }"
+ {{ end }}
+ class="hb-blog-posts row {{ $cols }} g-3 mb-3">
  {{ range .Pages }}
  <div class="col">
- {{- $ctx := dict "Page" . "ReadMore" $readMore "Modularize" $modularize "Caller" "list" }}
+ {{- $ctx := dict "Page" . "ReadMore" $readMore "Modularize" $modularize "Caller" "list" "ListStyle" $listStyle }}
  {{ partial "hb/modules/blog/post/card" $ctx }}
  </div>
  {{ end }}