Merge pull request #1056 from gethinode/develop

Add anchor support to cards

data/structures/card.yml

@@ -271,6 +271,25 @@ arguments:
       One or more strings separated by commas, indicating the source sizes of an
       image set.
     group: partial
+  anchor:
+    type: select
+    optional: true
+    comment: 
+      Anchor of the thumbnail's crop box, defaults to anchor value set in
+      `imaging` section of the site configuration (usually `Smart`).
+    options:
+      values:
+        - TopLeft
+        - Top
+        - TopRight
+        - Left
+        - Center
+        - Right
+        - BottomLeft
+        - Bottom
+        - BottomRight
+        - Smart
+    release: v0.24.23
 body:
   optional: true
   comment: >-

layouts/partials/assets/adapters/hugo.html

@@ -53,7 +53,14 @@
     {{ end }}
 
     {{- $clean := path.Ext $img.RelPermalink -}}
-    {{- $scaled = $scaled | resources.Copy (replace $img.RelPermalink $clean (printf "-%dx%d.%s" $width $height $format)) -}}
+    {{ $destination := "" }}
+    {{ if $anchor }}
+        {{ $destination = printf "-%dx%d-%s.%s" $width $height (lower $anchor) $format }}
+    {{ else }}
+        {{ $destination = printf "-%dx%d.%s" $width $height $format }}
+    {{ end }}
+
+    {{- $scaled = $scaled | resources.Copy (replace $img.RelPermalink $clean $destination) -}}
     {{- if $absoluteURL -}}
         {{- $element = $scaled.Permalink -}}
     {{- else -}}

layouts/partials/assets/card-group.html

@@ -71,11 +71,13 @@
         <!-- headless page -->
         {{- else -}}
             {{- $thumbnail := (or (and (reflect.IsMap $element.Params.Thumbnail) $element.Params.Thumbnail.url) $element.Params.Thumbnail) -}}
+            {{- $anchor := (or (and (reflect.IsMap $element.Params.Thumbnail) $element.Params.Thumbnail.anchor) "") -}}
             {{- $params = merge $params (dict
                 "title" $element.Title
                 "href" $element.RelPermalink
                 "description" (partial "utilities/GetDescription.html" (dict "page" $element "raw" true))
                 "thumbnail" $thumbnail
+                "anchor" $anchor
                 "icon" $element.Params.icon
             ) -}}
         {{- end -}}

layouts/partials/assets/card.html

@@ -32,6 +32,7 @@
 {{- $ratio := .ratio -}}
 {{- $portrait := .portrait | default false -}}
 {{- $thumbnail := .thumbnail -}}
+{{- $anchor := .anchor | default "" -}}
 {{- $title := .title -}}
 {{- $subtle := .subtle -}}
 {{- $button := .button -}}
@@ -64,6 +65,7 @@
         {{- if and (reflect.IsMap .Params.Thumbnail) .Params.Thumbnail.ratio }}{{ $ratio = .Params.Thumbnail.ratio }}{{ end -}}
     {{ end }}
     {{- if not $icon }}{{ $icon = .Params.icon }}{{ end -}}
+    {{- if not $anchor }}{{ $anchor = (or (and (reflect.IsMap .Params.Thumbnail) .Params.Thumbnail.anchor) "") }}{{ end -}}
 {{- end -}}
 
 {{ if (hasPrefix $orientation "horizontal") }}
@@ -167,7 +169,7 @@
         <div class="row g-0 row-cols-2 h-100{{ if $button }} pb-5{{ end }}">
             {{- if $thumbnail -}}
                 <div class="{{ $col1 }}">
-                    {{- partial $hook (dict "url" $thumbnail "ratio" (or $ratio "1x1") "portrait" $portrait "sizes" $sizes "wrapper" "h-100 card-img-wrap" "class" "rounded-start card-img-h100 card-img-bg" "title" $title "loading" $loading) -}}
+                    {{- partial $hook (dict "url" $thumbnail "ratio" (or $ratio "1x1") "portrait" $portrait "sizes" $sizes "anchor" $anchor "wrapper" "h-100 card-img-wrap" "class" "rounded-start card-img-h100 card-img-bg" "title" $title "loading" $loading) -}}
                 </div>
             {{- else if $icon -}}
                 <div class="{{ $col1 }} p-{{ $padding }}">
@@ -212,7 +214,7 @@
     <!-- Render stacked / default card -->
     <div class="card {{ $colorStyle }} {{ $class }} text-{{ $align }}">
         {{- if $thumbnail -}}
-            {{- partial $hook (dict "url" $thumbnail "ratio" (or $ratio "16x9") "portrait" $portrait "sizes" $sizes "wrapper" "card-img-wrap" "class" "card-img-top card-img-bg" "title" (or $alt $title) "loading" $loading) -}}
+            {{- partial $hook (dict "url" $thumbnail "ratio" (or $ratio "16x9") "portrait" $portrait "anchor" $anchor "sizes" $sizes "wrapper" "card-img-wrap" "class" "card-img-top card-img-bg" "title" (or $alt $title) "loading" $loading) -}}
         {{- else if $icon -}}
             <div class="card-icon p-{{ $padding }} {{ $iconStyle }} text-{{ $align }} {{ if $iconRounded }}fa-stack {{ $stack }}{{ end }} w-100">
                 {{ if $iconRounded }}

layouts/shortcodes/card.html

@@ -32,6 +32,7 @@
 {{- $page := .Page -}}
 {{- $path := .Get "path" -}}
 {{- $thumbnail := .Get "thumbnail" -}}
+{{- $anchor := .Get "anchor" -}}
 {{- $title := .Get "title" -}}
 {{- $button := partial "utilities/GetArgParent" (dict "page" . "arg" "button") | default false -}}
 {{- $buttonType := partial "utilities/GetArgParent" (dict "page" . "arg" "buttonType") | default "" -}}
@@ -81,6 +82,7 @@
         "wrapper" $wrapper
         "thumbnail" $thumbnail
         "loading" $loading
+        "anchor" $anchor
         "alt" $alt
         "button" $button
         "buttonType" $buttonType

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.24.22",
+  "version": "0.24.23",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",