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: >-

data/structures/image-adapter.yml

@@ -60,3 +60,20 @@ arguments:
     type: int
     optional: false
     comment: Width of the image in pixels.
+  anchor:
+    type: select
+    optional: true
+    comment: Anchor of the crop box.
+    options:
+      values:
+        - TopLeft
+        - Top
+        - TopRight
+        - Left
+        - Center
+        - Right
+        - BottomLeft
+        - Bottom
+        - BottomRight
+        - Smart
+

data/structures/image.yml

@@ -138,3 +138,22 @@ arguments:
       Flag to indicate if the image should render a plain image instead of an
       image set. When set, no transformations are applied to the image.
     release: v0.24.0
+  anchor:
+    type: select
+    optional: true
+    comment: 
+      Anchor of the 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.22

exampleSite/content/en/blog/image.md

@@ -26,7 +26,7 @@ As an example, the following shortcode displays an image with rounded corners an
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
 {{</* image src="https://ik.imagekit.io/demo/default-image.jpg"
-    ratio="21x9" caption="ImageKit.io image" class="rounded" */>}}
+    ratio="21x9" caption="ImageKit.io image" class="rounded" anchor="Center" */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
@@ -37,6 +37,6 @@ As an example, the following shortcode displays an image with rounded corners an
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
 {{</* image src="https://assets.imgix.net/examples/bluehat.jpg"
-    ratio="21x9" caption="imgix image" class="rounded" */>}}
+    ratio="21x9" caption="imgix image" class="rounded" anchor="Top" */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->

layouts/partials/assets/adapters/cloudinary.html

@@ -6,6 +6,19 @@
 
 {{ $error := false }}
 
+{{ $anchorMap := dict
+    "TopLeft" "north_west"
+    "Top" "north"
+    "TopRight" "north_east"
+    "Left" "west"
+    "Center" "center"
+    "Right" "east"
+    "BottomLeft" "south_west"
+    "Bottom" "south"
+    "BottomRight" "south_east"
+    "Smart" "auto"
+}}
+
 <!-- Validate arguments -->
 {{ if partial "utilities/IsInvalidArgs.html" (dict "structure" "image-adapter" "args" . "group" "partial") }}
     {{ errorf "partial [assets/adapter/cloudinary.html] - Invalid arguments" -}}
@@ -20,6 +33,8 @@
 {{ $transform := .transform }}
 {{ $height := .height }}
 {{ $width := .width }}
+{{ $anchor := "" }}
+{{ with .anchor }}{{ $anchor = index $anchorMap . }}{{ end }}
 {{ if eq $transform "fill" }}{{ $transform = "c_fill" }}{{ else }}{{ $transform = "c_fit" }}{{ end }}
 {{ $element := "" }}
 
@@ -37,6 +52,9 @@
     {{ else }}
         {{ $operation = printf "f_auto,%s,h_%d,w_%d" $transform $height $width }}
     {{ end }}
+    {{ with $anchor }}
+        {{ $operation = printf "%s,g_%s" $operation . }}
+    {{ end }}
     {{- $element = urls.JoinPath (slice "https://" $host $dir $operation $file) -}}
 {{ end }}
 

layouts/partials/assets/adapters/hugo.html

@@ -20,6 +20,7 @@
 {{ $transform := .transform }}
 {{ $height := .height }}
 {{ $width := .width }}
+{{ $anchor := .anchor | default "" }}
 {{ $element := "" }}
 {{ $absoluteURL := .absoluteURL }}
 {{ $url := urls.JoinPath $dir $file }}
@@ -46,13 +47,20 @@
 {{ if not $error }}
     {{ $scaled := "" }}
     {{ if eq $transform "fill" }}
-        {{- $scaled = $img.Fill (printf "%dx%d %s" $width $height $format) -}}
+        {{- $scaled = $img.Fill (printf "%dx%d %s %s" $width $height $anchor $format) -}}
     {{ else }}
         {{- $scaled = $img.Fit (printf "%dx%d %s" $width $height $format) -}}
     {{ 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/adapters/imagekit.html

@@ -6,6 +6,19 @@
 
 {{ $error := false }}
 
+{{ $anchorMap := dict
+    "TopLeft" "top_left"
+    "Top" "top"
+    "TopRight" "top_right"
+    "Left" "left"
+    "Center" "center"
+    "Right" "right"
+    "BottomLeft" "bottom_left"
+    "Bottom" "bottom"
+    "BottomRight" "bottom_right"
+    "Smart" "auto"
+}}
+
 <!-- Validate arguments -->
 {{ if partial "utilities/IsInvalidArgs.html" (dict "structure" "image-adapter" "args" . "group" "partial") }}
     {{ errorf "partial [assets/adapter/imagekit.html] - Invalid arguments" -}}
@@ -20,6 +33,8 @@
 {{ $transform := .transform }}
 {{ $height := .height }}
 {{ $width := .width }}
+{{ $anchor := "" }}
+{{ with .anchor }}{{ $anchor = index $anchorMap . }}{{ end }}
 {{ if eq $transform "fill" }}{{ $transform = "c-maintain_ratio" }}{{ else }}{{ $transform = "c-at_max" }}{{ end }}
 {{ $element := "" }}
 
@@ -42,6 +57,9 @@
     {{ else }}
         {{ $operation = printf "tr:f-auto,%s,h-%d,w-%d" $transform $height $width }}
     {{ end }}
+    {{ with $anchor }}
+        {{ $operation = printf "%s,fo-%s" $operation . }}
+    {{ end }}
     {{- $element = urls.JoinPath (slice "https://" $host $dir $operation $file) -}}
 {{ end }}
 

layouts/partials/assets/adapters/imgix.html

@@ -6,6 +6,19 @@
 
 {{ $error := false }}
 
+{{ $anchorMap := dict
+    "TopLeft" "top,left"
+    "Top" "top"
+    "TopRight" "top,right"
+    "Left" "left"
+    "Center" "center"
+    "Right" "right"
+    "BottomLeft" "bottom,left"
+    "Bottom" "bottom"
+    "BottomRight" "bottom,right"
+    "Smart" "faces,edges,center"
+}}
+
 <!-- Validate arguments -->
 {{ if partial "utilities/IsInvalidArgs.html" (dict "structure" "image-adapter" "args" . "group" "partial") }}
     {{ errorf "partial [assets/adapter/imgix.html] - Invalid arguments" -}}
@@ -20,6 +33,8 @@
 {{ $transform := .transform }}
 {{ $height := .height }}
 {{ $width := .width }}
+{{ $anchor := "" }}
+{{ with .anchor }}{{ $anchor = index $anchorMap . }}{{ end }}
 {{ if eq $transform "fill" }}{{ $transform = "crop" }}{{ else }}{{ $transform = "max" }}{{ end }}
 {{ $element := "" }}
 
@@ -37,6 +52,9 @@
     {{ else }}
         {{ $operation = printf "f_auto&fit=%s&h=%d&w=%d" $transform $height $width }}
     {{ end }}
+    {{ with $anchor }}
+        {{ $operation = printf "%s&crop=%s" $operation . }}
+    {{ end }}
     {{- $element = printf "%s?%s" (urls.JoinPath (slice "https://" $host $dir $file)) $operation -}}
 {{ end }}
 

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/partials/assets/helpers/image-definition.html

@@ -15,15 +15,16 @@
 {{- $mode := .mode -}}
 {{- $modes := .modes -}}
 {{- $plain := .plain | default false }}
+{{- $anchor := .anchor }}
 
 <!-- Split url into base and anchor when applicable (only relevant for vector images) -->
-{{- $anchor := "" -}}
+{{- $fileAnchor := "" -}}
 {{- $segments := split $url "#" -}}
 {{- if gt (len $segments) 2 -}}
     {{- errorf "Invalid path or url: %q" $url -}}
 {{- else if eq (len $segments) 2 }}
     {{- $url = index $segments 0 -}}
-    {{- $anchor = index $segments 1 -}}
+    {{- $fileAnchor = index $segments 1 -}}
 {{- end -}}
 
 <!-- Obtain fallback URL and imageset definition -->
@@ -34,6 +35,7 @@
     "portrait" $portrait
     "plain" $plain 
     "imageset" true
+    "anchor" $anchor
 ) }}
 {{ $fallbackURL := index $target "target" }}
 {{ $imgset := index $target "set" }}
@@ -53,7 +55,7 @@
 {{ else }}
     {{ with $wrapper }}<div class="{{ . }}">{{ end }}
 {{ end }}
-{{- if not $anchor -}}
+{{- if not $fileAnchor -}}
     <img class="img-fluid {{ $class }}"
         src="{{ $fallbackURL }}"
         {{ if $lazy }}loading="lazy"{{ end }}
@@ -64,7 +66,7 @@
         {{ with (or $title $caption) }}alt="{{ . }}"{{ end }}>
 {{- else }}
     <svg class="{{ $class }}">
-        <use href="{{ $fallbackURL }}#{{ $anchor }}"></use>
+        <use href="{{ $fallbackURL }}#{{ $fileAnchor }}"></use>
     </svg>
 {{ end }}
 {{- if $caption -}}

layouts/partials/assets/helpers/image-dimension.html

@@ -9,6 +9,7 @@
 {{- $targetURL := "" -}}
 {{- $set := "" -}}
 {{- $imageset := .imageset | default false }}
+{{- $anchor := .anchor | default "" -}}
 
 <!-- Split url into base and anchor when applicable (only relevant for vector images) -->
 {{- $segments := split $url "#" -}}
@@ -118,13 +119,21 @@
         "url" $url
         "img" $img
         "dims" ($dims | last 1)
+        "anchor" $anchor
         "transform" $transform
         "hook" $hook
-        "format" "jpg"
+        "format" "png"
         "includeWidth" false
     )}}
     {{ if $imageset }}
-        {{- $set = partial "assets/helpers/image-set.html" (dict "url" $url "img" $img "dims" $dims "transform" $transform "hook" $hook) -}}
+        {{- $set = partial "assets/helpers/image-set.html" (dict 
+            "url" $url
+            "img" $img
+            "dims" $dims
+            "anchor" $anchor
+            "transform" $transform
+            "hook" $hook
+        ) -}}
     {{ end }}
 {{ end }}
 

layouts/partials/assets/helpers/image-set.html

@@ -7,6 +7,7 @@
 {{ $transform := .transform }}
 {{ $format := .format }}
 {{ $includeWidth := .includeWidth | default true }}
+{{ $anchor := .anchor | default "" }}
 
 {{ $host := (urls.Parse $url).Hostname }}
 {{ $dir := (urls.Parse $url).Path }}
@@ -35,6 +36,7 @@
         "width" $width
         "height" $height
         "format" $format
+        "anchor" $anchor
     )}}
     {{ if $includeWidth }}
         {{ $imgset = $imgset | append (printf "%s %dw" $element $width) }}

layouts/partials/assets/image.html

@@ -27,6 +27,7 @@
 {{- if eq $priority "auto" }}{{ $priority = "" }}{{ end -}}
 {{- $sizes := .sizes | default "100vw" -}}
 {{- $plain := .plain | default false -}}
+{{- $anchor := .anchor | default "" -}}
 
 {{- $absoluteURL := site.Params.main.canonifyAssetsURLs | default false -}}
 {{- $url := .url -}}
@@ -49,6 +50,7 @@
     "sizes" $sizes
     "absoluteURL" $absoluteURL
     "plain" $plain
+    "anchor" $anchor
     )
 -}}
 

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

layouts/shortcodes/image.html

@@ -25,6 +25,7 @@
 {{- $loading := "" -}}
 {{- $error := false -}}
 {{- $plain := false -}}
+{{- $anchor := "" -}}
 
 {{- if .IsNamedParams -}}
     {{ $url = .Get "src" | default "" -}}
@@ -39,6 +40,7 @@
     {{ with .Get "mode" }}{{ $mode = partial "utilities/CastBool.html" . }}{{ end -}}
     {{ with .Get "portrait" }}{{ $portrait = partial "utilities/CastBool.html" . }}{{ end -}}
     {{ with .Get "plain" }}{{ $plain = partial "utilities/CastBool.html" . }}{{ end -}}
+    {{ $anchor = .Get "anchor" | default "" -}}
 {{ else -}}
     {{ $url = .Get 0 }}
 {{ end -}}
@@ -61,6 +63,7 @@
         "mode" $mode
         "portrait" $portrait
         "plain" $plain
+        "anchor" $anchor
         "loading" $loading
         "page" .Page)
     -}} 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.24.21",
+  "version": "0.24.23",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.24.21",
+      "version": "0.24.23",
       "license": "MIT",
       "dependencies": {
         "@fullhuman/postcss-purgecss": "^6.0.0",

package.json

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