Merge pull request #1055 from gethinode/develop

Support image crop box placement

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,7 +47,7 @@
 {{ 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 }}

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/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/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.22",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.24.21",
+      "version": "0.24.22",
       "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.22",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",