Skip to content

Commit

Permalink
Merge pull request #993 from gethinode/develop
Browse files Browse the repository at this point in the history
Use image helpers for SEO thumbnail
  • Loading branch information
markdumay authored Jun 12, 2024
2 parents e6586b5 + 15d0161 commit bcf9b8a
Show file tree
Hide file tree
Showing 5 changed files with 127 additions and 93 deletions.
94 changes: 13 additions & 81 deletions layouts/partials/assets/helpers/image-definition.html
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,8 @@
{{- $modes := .modes -}}
{{- $plain := .plain | default false }}

{{- $fallbackURL := "" -}}
{{- $anchor := "" -}}
{{- $imgset := "" -}}
{{- $isVector := false -}}

<!-- Split url into base and anchor when applicable (only relevant for vector images) -->
{{- $anchor := "" -}}
{{- $segments := split $url "#" -}}
{{- if gt (len $segments) 2 -}}
{{- errorf "Invalid path or url: %q" $url -}}
Expand All @@ -30,82 +26,18 @@
{{- $anchor = index $segments 1 -}}
{{- end -}}

<!-- Identify image provider -->
{{ $hook := "" }}
{{ $account := "" }}
{{ $container := "" }}
{{ $rewrite := false }}
{{ range $provider, $val := site.Params.images }}
{{ if not $hook }}
{{ with index $val "host" }}
{{ if (findRE . (urls.Parse $url).Hostname) }}
{{ $hook = $provider }}
{{ with index $val "account" }}{{ $account = . }}{{ end }}
{{ with index $val "rewrite" }}{{ $rewrite = . }}{{ end }}
{{ with index $val "container" }}{{ $container = . }}{{ end }}
{{ end }}
{{ end }}
{{ end }}
{{ end }}
{{ if not $hook }}{{ $hook = "hugo" }}{{ end }}

<!-- Rewrite the origin URL if applicable -->
{{ if $rewrite }}
{{ $url = partial "assets/helpers/image-rewrite.html" (dict "url" $url "account" $account "container" $container "hook" $hook) }}
{{ end }}

<!-- Define image dimensions -->
{{ $dims := slice }}
{{- $res := "" -}}
{{- $img := "" -}}
{{ $transform := "" }}
{{- if hasSuffix $url "svg" -}}
{{- $res = partial "utilities/GetResource.html" (dict "url" $url "page" $page) -}}
{{ if not $res }}
{{- if not (fileExists (path.Join "/static" $url)) -}}
{{ warnf "Cannot find vector image resource: %q" $url -}}
{{ else }}
{{ $width := string (partial "utilities/GetWidth.html" (dict "path" $url "height" 500)) }}
{{ $dims = $dims | append (printf "%sx500" $width) }}
{{ end }}
{{ end }}
{{ else if $ratio }}
{{ $transform = "fill" }}
{{ $dims = partial "assets/helpers/GetDimension.html" (dict "ratio" $ratio) }}
{{ if not $dims }}{{ errorf "partial [assets/image.html] - Cannot find dimension data: %s" $ratio }}{{ end }}
{{ else if not $plain }}
{{ $transform = "fit" }}
{{- $res := partial "utilities/GetImage.html" (dict "url" $url "page" $page) -}}
{{ if and $res $res.resource }}
{{ $img = $res.resource }}
{{ if $res.mirror }}{{ $class = printf "%s mirrorred" $class }}{{ end }}

{{ $widths := partial "assets/helpers/GetDimension.html" (dict "ratio" "auto") }}
{{ range $width := $widths -}}
{{- $dims = $dims | append (printf "%dx%d" (int $width) (int (math.Round (mul (div (float $width) $img.Width) $img.Height)))) -}}
{{- end -}}
{{ end }}
{{ end }}

<!-- Derive image width and height -->
{{ $width := "" }}
{{ $height := "" }}
{{ if not $plain }}
{{ with $dims }}
{{ range $dim := (. | last 1) }}
{{ $width = (int (index (split $dim "x") 0)) }}
{{ $height = (int (index (split $dim "x") 1)) }}
{{ end }}
{{ end }}
{{ end }}

<!-- Generate image urls -->
{{ if or (hasSuffix $url "svg") $plain }}
{{- $fallbackURL = partial "utilities/GetStaticURL" (dict "url" $url) -}}
{{ else }}
{{- $fallbackURL = partial "assets/helpers/image-set.html" (dict "url" $url "img" $img "dims" ($dims | last 1) "transform" $transform "hook" $hook "format" "jpg" "includeWidth" false) -}}
{{- $imgset = partial "assets/helpers/image-set.html" (dict "url" $url "img" $img "dims" $dims "transform" $transform "hook" $hook) -}}
{{ end }}
<!-- Obtain fallback URL and imageset definition -->
{{ $target := partial "assets/helpers/image-dimension.html" (dict
"page" $page
"url" .url
"ratio" $ratio
"plain" $plain
"imageset" true
) }}
{{ $fallbackURL := index $target "target" }}
{{ $imgset := index $target "set" }}
{{ $height := index $target "height" }}
{{ $width := index $target "width" }}

<!-- Add color modes -->
{{- range $none := $modes -}}
Expand Down
109 changes: 109 additions & 0 deletions layouts/partials/assets/helpers/image-dimension.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
<!-- Initialize arguments -->
{{- $page := .page -}}
{{- $url := .url -}}
{{- $ratio := .ratio -}}
{{- $height := .height -}}
{{- $width := .width -}}
{{- $plain := .plain | default false }}
{{- $targetURL := "" -}}
{{- $set := "" -}}
{{- $imageset := .imageset | default false }}

<!-- Split url into base and anchor when applicable (only relevant for vector images) -->
{{- $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 -}}
{{- end -}}

<!-- Identify image provider -->
{{ $hook := "" }}
{{ $account := "" }}
{{ $container := "" }}
{{ $rewrite := false }}
{{ range $provider, $val := site.Params.images }}
{{ if not $hook }}
{{ with index $val "host" }}
{{ if (findRE . (urls.Parse $url).Hostname) }}
{{ $hook = $provider }}
{{ with index $val "account" }}{{ $account = . }}{{ end }}
{{ with index $val "rewrite" }}{{ $rewrite = . }}{{ end }}
{{ with index $val "container" }}{{ $container = . }}{{ end }}
{{ end }}
{{ end }}
{{ end }}
{{ end }}
{{ if not $hook }}{{ $hook = "hugo" }}{{ end }}

<!-- Rewrite the origin URL if applicable -->
{{ if $rewrite }}
{{ $url = partial "assets/helpers/image-rewrite.html" (dict "url" $url "account" $account "container" $container "hook" $hook) }}
{{ end }}

<!-- Define image dimensions -->
{{ $dims := slice }}
{{- $res := "" -}}
{{- $img := "" -}}
{{ $transform := "" }}
{{- if hasSuffix $url "svg" -}}
{{- $res = partial "utilities/GetResource.html" (dict "url" $url "page" $page) -}}
{{ if not $res }}
{{- if not (fileExists (path.Join "/static" $url)) -}}
{{ warnf "Cannot find vector image resource: %q" $url -}}
{{ else }}
{{ $width := string (partial "utilities/GetWidth.html" (dict "path" $url "height" 500)) }}
{{ $dims = $dims | append (printf "%sx500" $width) }}
{{ end }}
{{ end }}
{{ else if $ratio }}
{{ $transform = "fill" }}
{{ $dims = partial "assets/helpers/GetDimension.html" (dict "ratio" $ratio) }}
{{ if not $dims }}{{ errorf "partial [assets/image.html] - Cannot find dimension data: %s" $ratio }}{{ end }}
{{ else if (and $height $width) }}
{{ $transform = "fill" }}
{{ $dims = slice (printf "%dx%d" $width $height) }}
{{ else if not $plain }}
{{ $transform = "fit" }}
{{- $res := partial "utilities/GetImage.html" (dict "url" $url "page" $page) -}}
{{ if and $res $res.resource }}
{{ $img = $res.resource }}
{{ if $res.mirror }}{{ $class = printf "%s mirrorred" $class }}{{ end }}

{{ $widths := partial "assets/helpers/GetDimension.html" (dict "ratio" "auto") }}
{{ range $w := $widths -}}
{{ $height = int (math.Round (mul (div (float $w) $img.Width) $img.Height)) }}
{{- $dims = $dims | append (printf "%dx%d" (int $w) $height ) -}}
{{- end -}}
{{ end }}
{{ end }}

<!-- Derive image width and height -->
{{ if not $plain }}
{{ with $dims }}
{{ range $dim := (. | last 1) }}
{{ $width = (int (index (split $dim "x") 0)) }}
{{ $height = (int (index (split $dim "x") 1)) }}
{{ end }}
{{ end }}
{{ end }}

<!-- Generate image url -->
{{ if or (hasSuffix $url "svg") $plain }}
{{- $targetURL = partial "utilities/GetStaticURL" (dict "url" $url) -}}
{{ else }}
{{- $targetURL = partial "assets/helpers/image-set.html" (dict
"url" $url
"img" $img
"dims" ($dims | last 1)
"transform" $transform
"hook" $hook
"format" "jpg"
"includeWidth" false
)}}
{{ if $imageset }}
{{- $set = partial "assets/helpers/image-set.html" (dict "url" $url "img" $img "dims" $dims "transform" $transform "hook" $hook) -}}
{{ end }}
{{ end }}

{{ return (dict "target" $targetURL "set" $set "height" $height "width" $width) }}
11 changes: 2 additions & 9 deletions layouts/partials/head/seo.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,8 @@

{{- $thumbnail := (or (and (reflect.IsMap .Params.Thumbnail) .Params.Thumbnail.url) .Params.Thumbnail) -}}
{{ with $thumbnail -}}
{{- $res := partial "utilities/GetImage.html" (dict "url" .) -}}
{{- $img := "" -}}
{{ with $res }}{{ $img = $res.resource }}{{ end }}
{{ with $img -}}
{{ $dim := "1280x640" -}}
{{ $scaled := (.Fill (printf "%s jpg" $dim)) -}}
{{- $scaled = $scaled | resources.Copy (replace $img.RelPermalink ".jpg" (printf "-%s.jpg" $dim)) -}}
{{ $.Scratch.Set "thumbnail" ($scaled.Permalink | absURL) -}}
{{ end -}}
{{ $imgURL := index (partial "assets/helpers/image-dimension.html" (dict "url" $thumbnail "width" 1280 "height" 640 "page" .)) "target" }}
{{ $.Scratch.Set "thumbnail" ($imgURL | absURL) -}}
{{ else -}}
{{ with .Site.Params.schema.image.url -}}
{{ $.Scratch.Set "thumbnail" (. | absURL) -}}
Expand Down
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@gethinode/hinode",
"version": "0.24.2",
"version": "0.24.3",
"description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
"keywords": [
"hugo",
Expand Down

0 comments on commit bcf9b8a

Please sign in to comment.