From 28c06ef8ae29d615b7c5c2ba6ebe81400b123a96 Mon Sep 17 00:00:00 2001
From: Jimmy Cai <jimmehcai@gmail.com>
Date: Thu, 10 Sep 2020 18:53:36 +0200
Subject: [PATCH 1/8] feat(helper/image): new image helper (WIP)
---
layouts/partials/article-list/compact.html | 18 ++++++----
layouts/partials/article-list/default.html | 29 +++++++++-------
layouts/partials/article-list/tile.html | 23 ++++++++-----
.../partials/article/components/details.html | 11 +++----
.../partials/article/components/header.html | 23 +++++++------
layouts/partials/head/opengraph.html | 12 ++++---
layouts/partials/helper/image.html | 33 +++++++++++++++++--
7 files changed, 100 insertions(+), 49 deletions(-)
diff --git a/layouts/partials/article-list/compact.html b/layouts/partials/article-list/compact.html
index 3988b83..dfcc276 100644
--- a/layouts/partials/article-list/compact.html
+++ b/layouts/partials/article-list/compact.html
@@ -12,13 +12,17 @@
</footer>
</div>
- {{ if .Params.image }}
- {{- $image := partial "helper/image" . -}}
- {{- $thumbnail := $image.Fill "120x120" -}}
+ {{ $image := partial "helper/image" . }}
- <div class="article-image">
- <img src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}"
- height="{{ $thumbnail.Height }}" loading="lazy">
- </div>
+ {{ if $image.exists }}
+ <div class="article-image">
+ {{ if $image.local }}
+ {{- $thumbnail := $image.src.Fill "120x120" -}}
+ <img src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}"
+ height="{{ $thumbnail.Height }}" loading="lazy">
+ {{ else }}
+ <img src="{{ $image.src }}" loading="lazy" alt="Featured image of post {{ .Title }}" />
+ {{ end }}
+ </div>
{{ end }}
</article>
\ No newline at end of file
diff --git a/layouts/partials/article-list/default.html b/layouts/partials/article-list/default.html
index 25fcbc2..45f00d1 100644
--- a/layouts/partials/article-list/default.html
+++ b/layouts/partials/article-list/default.html
@@ -1,17 +1,22 @@
<article class="{{ if .Params.image }}has-image{{ end }}">
- {{ if .Params.image }}
- {{- $image := partial "helper/image" . -}}
- {{- $thumbnail := $image.Fill "800x250" -}}
- {{- $thumbnailRetina := $image.Fill "1600x500" -}}
+ {{ $image := partial "helper/image" . }}
- <div class="article-image">
- <a href="{{ .Permalink }}">
- <img src="{{ $thumbnail.RelPermalink }}"
- srcset="{{ $thumbnail.RelPermalink }} 1x, {{ $thumbnailRetina.RelPermalink }} 2x"
- width="{{ $thumbnail.Width }}" height="{{ $thumbnail.Height }}" loading="lazy"
- alt="Featured image of post {{ .Title }}" />
- </a>
- </div>
+ {{ if $image.exists }}
+ <div class="article-image">
+ <a href="{{ .Permalink }}">
+ {{ if $image.local }}
+ {{- $thumbnail := $image.src.Fill "800x250" -}}
+ {{- $thumbnailRetina := $image.src.Fill "1600x500" -}}
+
+ <img src="{{ $thumbnail.RelPermalink }}"
+ srcset="{{ $thumbnail.RelPermalink }} 1x, {{ $thumbnailRetina.RelPermalink }} 2x"
+ width="{{ $thumbnail.Width }}" height="{{ $thumbnail.Height }}" loading="lazy"
+ alt="Featured image of post {{ .Title }}" />
+ {{ else }}
+ <img src="{{ $image.src }}" loading="lazy" alt="Featured image of post {{ .Title }}" />
+ {{ end }}
+ </a>
+ </div>
{{ end }}
{{ partial "article/components/details" . }}
diff --git a/layouts/partials/article-list/tile.html b/layouts/partials/article-list/tile.html
index 9a58d4b..6b4375a 100644
--- a/layouts/partials/article-list/tile.html
+++ b/layouts/partials/article-list/tile.html
@@ -1,12 +1,19 @@
-<article class="{{ if .context.Params.image }}has-image{{ end }}">
+{{ $image := partial "helper/image" .context }}
+<article class="{{ if $image.exists }}has-image{{ end }}">
<a href="{{ .context.Permalink }}">
- {{ if .context.Params.image }}
- {{- $image := partial "helper/image" .context | resources.Fingerprint "md5" -}}
- {{- $thumbnail := $image.Fill .size -}}
- <div class="article-image">
- <img src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}" height="{{ $thumbnail.Height }}"
- loading="lazy" data-key="{{ .context.Slug }}" data-hash="{{ $image.Data.Integrity }}">
- </div>
+
+ {{ if $image.exists }}
+ <div class="article-image">
+ {{ if $image.local }}
+ {{- $imageRaw := $image.src | resources.Fingerprint "md5" -}}
+ {{- $thumbnail := $imageRaw.Fill .size -}}
+
+ <img src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}" height="{{ $thumbnail.Height }}"
+ loading="lazy" data-key="{{ .context.Slug }}" data-hash="{{ $imageRaw.Data.Integrity }}">
+ {{ else }}
+ <img src="{{ $image.src }}" loading="lazy" data-key="{{ .context.Slug }}" data-hash="{{ $image.src }}"/>
+ {{ end }}
+ </div>
{{ end }}
<div class="article-details">
diff --git a/layouts/partials/article/components/details.html b/layouts/partials/article/components/details.html
index 4349d61..0e3ff50 100644
--- a/layouts/partials/article/components/details.html
+++ b/layouts/partials/article/components/details.html
@@ -1,15 +1,14 @@
-{{ $i := .Params.image }}
+{{ $image := partial "helper/image" . }}
{{ $context := . }}
-
<div class="article-details">
{{ with $categories := .Params.categories }}
<header class="article-category">
{{ range $categories }}
- {{ if $i }}
- {{- $image := partial "helper/image" $context | resources.Fingerprint "md5" -}}
- {{- $20x := $image.Fill "20x20 smart" -}}
+ {{ if and $image.exists $image.local }}
+ {{- $imageRaw := $image.src | resources.Fingerprint "md5" -}}
+ {{- $20x := $imageRaw.Fill "20x20 smart" -}}
<a href="/categories/{{ . | urlize }}" class="color-tag"
- data-image="{{ $20x.RelPermalink }}" data-key="{{ $context.Slug }}" data-hash="{{ $image.Data.Integrity }}">{{ . | humanize }}</a>
+ data-image="{{ $20x.RelPermalink }}" data-key="{{ $context.Slug }}" data-hash="{{ $imageRaw.Data.Integrity }}">{{ . | humanize }}</a>
{{ else }}
<a href="/categories/{{ . | urlize }}">{{ . | humanize }}</a>
{{ end }}
diff --git a/layouts/partials/article/components/header.html b/layouts/partials/article/components/header.html
index 1bd5663..14f6da2 100644
--- a/layouts/partials/article/components/header.html
+++ b/layouts/partials/article/components/header.html
@@ -1,16 +1,19 @@
<header class="article-header">
- {{ if .Params.image }}
- {{- $image := partial "helper/image" . -}}
+ {{ $image := partial "helper/image" . }}
- {{- $tablet := $image.Resize "1024x" -}}
- {{- $desktop := $image.Resize "2000x" -}}
+ {{ if $image.exists }}
+ <div class="article-image">
+ {{ if $image.local }}
+ {{- $tablet := $image.src.Resize "1024x" -}}
+ {{- $desktop := $image.src.Resize "2000x" -}}
- <div class="article-image">
- <img srcset="{{ $tablet.RelPermalink }} 1024w, {{ $desktop.RelPermalink }} 2000w"
- src="{{ $desktop.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}"
- loading="lazy"
- alt="Featured image of post {{ .Title }}" />
- </div>
+ <img srcset="{{ $tablet.RelPermalink }} 1024w, {{ $desktop.RelPermalink }} 2000w"
+ src="{{ $desktop.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" loading="lazy"
+ alt="Featured image of post {{ .Title }}" />
+ {{ else }}
+ <img src="{{ $image.src }}" loading="lazy" alt="Featured image of post {{ .Title }}" />
+ {{ end }}
+ </div>
{{ end }}
{{ partial "article/components/details" . }}
diff --git a/layouts/partials/head/opengraph.html b/layouts/partials/head/opengraph.html
index dd298c2..654c55c 100644
--- a/layouts/partials/head/opengraph.html
+++ b/layouts/partials/head/opengraph.html
@@ -40,11 +40,15 @@
{{- end -}}
{{- end -}}
-{{- if .Params.image -}}
- {{ $image := partial "helper/image" . }}
+{{ $image := partial "helper/image" . }}
+{{- if $image.exists -}}
+ {{ $imagePermalink := $image.src }}
+ {{ if $image.local }}
+ {{ $imagePermalink = absURL $image.src.RelPermalink }}
+ {{ end }}
<meta name="twitter:card" content="summary_large_image">
- <meta property='og:image' content='{{ absURL $image.RelPermalink }}' />
- <meta name="twitter:image" content='{{ absURL $image.RelPermalink }}' />
+ <meta property='og:image' content='{{ $imagePermalink }}' />
+ <meta name="twitter:image" content='{{ $imagePermalink }}' />
{{- else if .Site.Params.opengraph.defaultImage -}}
{{ $image := resources.Get .Site.Params.opengraph.defaultImage }}
<meta property='og:image' content='{{ absURL $image.RelPermalink }}' />
diff --git a/layouts/partials/helper/image.html b/layouts/partials/helper/image.html
index 308a36c..4136e67 100644
--- a/layouts/partials/helper/image.html
+++ b/layouts/partials/helper/image.html
@@ -1,2 +1,31 @@
-{{- $image := .Resources.GetMatch (printf "%s" (.Params.image | safeURL)) -}}
-{{ return $image }}
\ No newline at end of file
+{{ $result := dict "exists" false "local" false "isDefault" false }}
+{{ $imageField := .Params.image }}
+{{ if $imageField }}
+ <!-- If page has `image` field set -->
+ {{ $result = merge $result (dict "exists" true) }}
+
+ {{ if strings.HasPrefix $imageField "http" }}
+ <!-- Is a external image -->
+ {{ $result = merge $result (dict "src" $imageField) }}
+ {{ else }}
+ {{ $pageResourceImage := .Resources.GetMatch (printf "%s" ($imageField | safeURL)) }}
+ {{ $siteResourceImage := resources.GetMatch (printf "%s" ($imageField | safeURL)) }}
+
+ {{ if $pageResourceImage }}
+ <!-- If image is found under page bundle -->
+ {{ $result = merge $result (dict "local" true) }}
+ {{ $result = merge $result (dict "src" $pageResourceImage) }}
+ {{ else if $siteResourceImage }}
+ <!-- Try search image under site's assets folder -->
+ {{ $result = merge $result (dict "local" true) }}
+ {{ $result = merge $result (dict "src" $siteResourceImage) }}
+ {{ else }}
+ <!-- Can not find the image -->
+ {{ errorf "Failed loading image: %q" $imageField }}
+ {{ $result = merge $result (dict "exists" false) }}
+ {{ end }}
+ {{ end }}
+
+{{ end }}
+
+{{ return $result }}
\ No newline at end of file
From 19ff7a46bb2043c10c519adbdad3620678120d54 Mon Sep 17 00:00:00 2001
From: Jimmy Cai <jimmehcai@gmail.com>
Date: Thu, 10 Sep 2020 18:58:41 +0200
Subject: [PATCH 2/8] fix(_default/term): switch to new image helper
---
layouts/_default/term.html | 14 +++++++++-----
1 file changed, 9 insertions(+), 5 deletions(-)
diff --git a/layouts/_default/term.html b/layouts/_default/term.html
index cae47d1..d0f9471 100644
--- a/layouts/_default/term.html
+++ b/layouts/_default/term.html
@@ -15,12 +15,16 @@
{{ end }}
</div>
- {{ if .Params.image }}
- {{- $image := partial "helper/image" . -}}
- {{- $thumbnail := $image.Fill "120x120" -}}
+ {{ $image := partial "helper/image" . }}
+ {{ if $image.exists }}
<div class="taxonomy-image">
- <img src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}"
- height="{{ $thumbnail.Height }}" loading="lazy">
+ {{ if $image.local }}
+ {{- $thumbnail := $image.src.Fill "120x120" -}}
+ <img src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}"
+ height="{{ $thumbnail.Height }}" loading="lazy">
+ {{ else }}
+ <img src="{{ $image.src }}" loading="lazy">
+ {{ end }}
</div>
{{ end }}
</div>
From 3e18e165e0dbc10ea1e81c745a04ea7ae82c6e47 Mon Sep 17 00:00:00 2001
From: Jimmy Cai <jimmehcai@gmail.com>
Date: Thu, 10 Sep 2020 23:24:19 +0200
Subject: [PATCH 3/8] feat(helper/image): better detection of external image
By using strings.HasPrefix, it matches any images which name starts with http
---
layouts/partials/helper/image.html | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/layouts/partials/helper/image.html b/layouts/partials/helper/image.html
index 4136e67..c8371b4 100644
--- a/layouts/partials/helper/image.html
+++ b/layouts/partials/helper/image.html
@@ -4,7 +4,8 @@
<!-- If page has `image` field set -->
{{ $result = merge $result (dict "exists" true) }}
- {{ if strings.HasPrefix $imageField "http" }}
+ {{ $url := urls.Parse $imageField }}
+ {{ if or (eq $url.Scheme "http") (eq $url.Scheme "https") }}
<!-- Is a external image -->
{{ $result = merge $result (dict "src" $imageField) }}
{{ else }}
From cfd4cdb731750786f787b7aaea6a9f411caa5af2 Mon Sep 17 00:00:00 2001
From: Jimmy Cai <jimmehcai@gmail.com>
Date: Fri, 11 Sep 2020 16:01:01 +0200
Subject: [PATCH 4/8] feat(helper/image): new return format
---
layouts/_default/term.html | 6 +++---
layouts/partials/article-list/compact.html | 6 +++---
layouts/partials/article-list/default.html | 13 ++++++-------
layouts/partials/article-list/tile.html | 6 +++---
layouts/partials/article/components/details.html | 4 ++--
layouts/partials/article/components/header.html | 10 +++++-----
layouts/partials/head/opengraph.html | 8 ++------
layouts/partials/helper/image.html | 12 ++++++------
8 files changed, 30 insertions(+), 35 deletions(-)
diff --git a/layouts/_default/term.html b/layouts/_default/term.html
index d0f9471..4ca37da 100644
--- a/layouts/_default/term.html
+++ b/layouts/_default/term.html
@@ -18,12 +18,12 @@
{{ $image := partial "helper/image" . }}
{{ if $image.exists }}
<div class="taxonomy-image">
- {{ if $image.local }}
- {{- $thumbnail := $image.src.Fill "120x120" -}}
+ {{ if $image.resource }}
+ {{- $thumbnail := $image.resource.Fill "120x120" -}}
<img src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}"
height="{{ $thumbnail.Height }}" loading="lazy">
{{ else }}
- <img src="{{ $image.src }}" loading="lazy">
+ <img src="{{ $image.permalink }}" loading="lazy">
{{ end }}
</div>
{{ end }}
diff --git a/layouts/partials/article-list/compact.html b/layouts/partials/article-list/compact.html
index dfcc276..bebb573 100644
--- a/layouts/partials/article-list/compact.html
+++ b/layouts/partials/article-list/compact.html
@@ -16,12 +16,12 @@
{{ if $image.exists }}
<div class="article-image">
- {{ if $image.local }}
- {{- $thumbnail := $image.src.Fill "120x120" -}}
+ {{ if $image.resource }}
+ {{- $thumbnail := $image.resource.Fill "120x120" -}}
<img src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}"
height="{{ $thumbnail.Height }}" loading="lazy">
{{ else }}
- <img src="{{ $image.src }}" loading="lazy" alt="Featured image of post {{ .Title }}" />
+ <img src="{{ $image.permalink }}" loading="lazy" alt="Featured image of post {{ .Title }}" />
{{ end }}
</div>
{{ end }}
diff --git a/layouts/partials/article-list/default.html b/layouts/partials/article-list/default.html
index 45f00d1..0beaeca 100644
--- a/layouts/partials/article-list/default.html
+++ b/layouts/partials/article-list/default.html
@@ -1,19 +1,18 @@
-<article class="{{ if .Params.image }}has-image{{ end }}">
- {{ $image := partial "helper/image" . }}
-
+{{ $image := partial "helper/image" . }}
+<article class="{{ if $image.exists }}has-image{{ end }}">
{{ if $image.exists }}
<div class="article-image">
<a href="{{ .Permalink }}">
- {{ if $image.local }}
- {{- $thumbnail := $image.src.Fill "800x250" -}}
- {{- $thumbnailRetina := $image.src.Fill "1600x500" -}}
+ {{ if $image.resource }}
+ {{- $thumbnail := $image.resource.Fill "800x250" -}}
+ {{- $thumbnailRetina := $image.resource.Fill "1600x500" -}}
<img src="{{ $thumbnail.RelPermalink }}"
srcset="{{ $thumbnail.RelPermalink }} 1x, {{ $thumbnailRetina.RelPermalink }} 2x"
width="{{ $thumbnail.Width }}" height="{{ $thumbnail.Height }}" loading="lazy"
alt="Featured image of post {{ .Title }}" />
{{ else }}
- <img src="{{ $image.src }}" loading="lazy" alt="Featured image of post {{ .Title }}" />
+ <img src="{{ $image.permalink }}" loading="lazy" alt="Featured image of post {{ .Title }}" />
{{ end }}
</a>
</div>
diff --git a/layouts/partials/article-list/tile.html b/layouts/partials/article-list/tile.html
index 6b4375a..a6a29a0 100644
--- a/layouts/partials/article-list/tile.html
+++ b/layouts/partials/article-list/tile.html
@@ -4,14 +4,14 @@
{{ if $image.exists }}
<div class="article-image">
- {{ if $image.local }}
- {{- $imageRaw := $image.src | resources.Fingerprint "md5" -}}
+ {{ if $image.resource }}
+ {{- $imageRaw := $image.resource | resources.Fingerprint "md5" -}}
{{- $thumbnail := $imageRaw.Fill .size -}}
<img src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}" height="{{ $thumbnail.Height }}"
loading="lazy" data-key="{{ .context.Slug }}" data-hash="{{ $imageRaw.Data.Integrity }}">
{{ else }}
- <img src="{{ $image.src }}" loading="lazy" data-key="{{ .context.Slug }}" data-hash="{{ $image.src }}"/>
+ <img src="{{ $image.permalink }}" loading="lazy" data-key="{{ .context.Slug }}" data-hash="{{ $image.permalink }}"/>
{{ end }}
</div>
{{ end }}
diff --git a/layouts/partials/article/components/details.html b/layouts/partials/article/components/details.html
index 0e3ff50..9ba972c 100644
--- a/layouts/partials/article/components/details.html
+++ b/layouts/partials/article/components/details.html
@@ -4,8 +4,8 @@
{{ with $categories := .Params.categories }}
<header class="article-category">
{{ range $categories }}
- {{ if and $image.exists $image.local }}
- {{- $imageRaw := $image.src | resources.Fingerprint "md5" -}}
+ {{ if and $image.exists $image.resource }}
+ {{- $imageRaw := $image.resource | resources.Fingerprint "md5" -}}
{{- $20x := $imageRaw.Fill "20x20 smart" -}}
<a href="/categories/{{ . | urlize }}" class="color-tag"
data-image="{{ $20x.RelPermalink }}" data-key="{{ $context.Slug }}" data-hash="{{ $imageRaw.Data.Integrity }}">{{ . | humanize }}</a>
diff --git a/layouts/partials/article/components/header.html b/layouts/partials/article/components/header.html
index 14f6da2..fabeaea 100644
--- a/layouts/partials/article/components/header.html
+++ b/layouts/partials/article/components/header.html
@@ -3,15 +3,15 @@
{{ if $image.exists }}
<div class="article-image">
- {{ if $image.local }}
- {{- $tablet := $image.src.Resize "1024x" -}}
- {{- $desktop := $image.src.Resize "2000x" -}}
+ {{ if $image.resource }}
+ {{- $tablet := $image.resource.Resize "1024x" -}}
+ {{- $desktop := $image.resource.Resize "2000x" -}}
<img srcset="{{ $tablet.RelPermalink }} 1024w, {{ $desktop.RelPermalink }} 2000w"
- src="{{ $desktop.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" loading="lazy"
+ src="{{ $desktop.RelPermalink }}" width="{{ $image.resource.Width }}" height="{{ $image.resource.Height }}" loading="lazy"
alt="Featured image of post {{ .Title }}" />
{{ else }}
- <img src="{{ $image.src }}" loading="lazy" alt="Featured image of post {{ .Title }}" />
+ <img src="{{ $image.permalink }}" loading="lazy" alt="Featured image of post {{ .Title }}" />
{{ end }}
</div>
{{ end }}
diff --git a/layouts/partials/head/opengraph.html b/layouts/partials/head/opengraph.html
index 654c55c..26c987a 100644
--- a/layouts/partials/head/opengraph.html
+++ b/layouts/partials/head/opengraph.html
@@ -42,13 +42,9 @@
{{ $image := partial "helper/image" . }}
{{- if $image.exists -}}
- {{ $imagePermalink := $image.src }}
- {{ if $image.local }}
- {{ $imagePermalink = absURL $image.src.RelPermalink }}
- {{ end }}
<meta name="twitter:card" content="summary_large_image">
- <meta property='og:image' content='{{ $imagePermalink }}' />
- <meta name="twitter:image" content='{{ $imagePermalink }}' />
+ <meta property='og:image' content='{{ $image.permalink }}' />
+ <meta name="twitter:image" content='{{ $image.permalink }}' />
{{- else if .Site.Params.opengraph.defaultImage -}}
{{ $image := resources.Get .Site.Params.opengraph.defaultImage }}
<meta property='og:image' content='{{ absURL $image.RelPermalink }}' />
diff --git a/layouts/partials/helper/image.html b/layouts/partials/helper/image.html
index c8371b4..3a78d6d 100644
--- a/layouts/partials/helper/image.html
+++ b/layouts/partials/helper/image.html
@@ -1,4 +1,4 @@
-{{ $result := dict "exists" false "local" false "isDefault" false }}
+{{ $result := dict "exists" false "permalink" nil "resource" nil "isDefault" false }}
{{ $imageField := .Params.image }}
{{ if $imageField }}
<!-- If page has `image` field set -->
@@ -7,19 +7,19 @@
{{ $url := urls.Parse $imageField }}
{{ if or (eq $url.Scheme "http") (eq $url.Scheme "https") }}
<!-- Is a external image -->
- {{ $result = merge $result (dict "src" $imageField) }}
+ {{ $result = merge $result (dict "permalink" $imageField) }}
{{ else }}
{{ $pageResourceImage := .Resources.GetMatch (printf "%s" ($imageField | safeURL)) }}
{{ $siteResourceImage := resources.GetMatch (printf "%s" ($imageField | safeURL)) }}
{{ if $pageResourceImage }}
<!-- If image is found under page bundle -->
- {{ $result = merge $result (dict "local" true) }}
- {{ $result = merge $result (dict "src" $pageResourceImage) }}
+ {{ $result = merge $result (dict "permalink" $pageResourceImage.RelPermalink) }}
+ {{ $result = merge $result (dict "resource" $pageResourceImage) }}
{{ else if $siteResourceImage }}
<!-- Try search image under site's assets folder -->
- {{ $result = merge $result (dict "local" true) }}
- {{ $result = merge $result (dict "src" $siteResourceImage) }}
+ {{ $result = merge $result (dict "permalink" $siteResourceImage.RelPermalink) }}
+ {{ $result = merge $result (dict "resource" $siteResourceImage) }}
{{ else }}
<!-- Can not find the image -->
{{ errorf "Failed loading image: %q" $imageField }}
From a2662603dfda86d2be2ba0de06809a7e7e7b4f65 Mon Sep 17 00:00:00 2001
From: Jimmy Cai <jimmehcai@gmail.com>
Date: Fri, 11 Sep 2020 16:27:23 +0200
Subject: [PATCH 5/8] feat(helper/image): new way to set default image
---
exampleSite/config.toml | 6 +++-
layouts/_default/term.html | 2 +-
layouts/partials/article-list/compact.html | 2 +-
layouts/partials/article-list/default.html | 2 +-
layouts/partials/article-list/tile.html | 2 +-
.../partials/article/components/details.html | 2 +-
.../partials/article/components/header.html | 2 +-
layouts/partials/head/opengraph.html | 10 ++----
layouts/partials/helper/image.html | 33 +++++++++++++++++--
9 files changed, 45 insertions(+), 16 deletions(-)
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 1071c32..4ffe263 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -37,9 +37,13 @@ DefaultContentLanguage = "en" # Theme i18n support
[params.widgets.tagCloud]
limit = 10
[params.opengraph]
- defaultImage = ""
[params.opengraph.twitter]
site = ""
+ [params.defaultImage]
+ [params.defaultImage.opengraph]
+ enabled = false
+ local = false
+ src = ""
[menu]
[[menu.main]]
diff --git a/layouts/_default/term.html b/layouts/_default/term.html
index 4ca37da..b3d2cce 100644
--- a/layouts/_default/term.html
+++ b/layouts/_default/term.html
@@ -15,7 +15,7 @@
{{ end }}
</div>
- {{ $image := partial "helper/image" . }}
+ {{ $image := partial "helper/image" (dict "Context" .) }}
{{ if $image.exists }}
<div class="taxonomy-image">
{{ if $image.resource }}
diff --git a/layouts/partials/article-list/compact.html b/layouts/partials/article-list/compact.html
index bebb573..61c1f29 100644
--- a/layouts/partials/article-list/compact.html
+++ b/layouts/partials/article-list/compact.html
@@ -12,7 +12,7 @@
</footer>
</div>
- {{ $image := partial "helper/image" . }}
+ {{ $image := partial "helper/image" (dict "Context" .) }}
{{ if $image.exists }}
<div class="article-image">
diff --git a/layouts/partials/article-list/default.html b/layouts/partials/article-list/default.html
index 0beaeca..879d848 100644
--- a/layouts/partials/article-list/default.html
+++ b/layouts/partials/article-list/default.html
@@ -1,4 +1,4 @@
-{{ $image := partial "helper/image" . }}
+{{ $image := partial "helper/image" (dict "Context" .) }}
<article class="{{ if $image.exists }}has-image{{ end }}">
{{ if $image.exists }}
<div class="article-image">
diff --git a/layouts/partials/article-list/tile.html b/layouts/partials/article-list/tile.html
index a6a29a0..4af3028 100644
--- a/layouts/partials/article-list/tile.html
+++ b/layouts/partials/article-list/tile.html
@@ -1,4 +1,4 @@
-{{ $image := partial "helper/image" .context }}
+{{ $image := partial "helper/image" (dict "Context" .context) }}
<article class="{{ if $image.exists }}has-image{{ end }}">
<a href="{{ .context.Permalink }}">
diff --git a/layouts/partials/article/components/details.html b/layouts/partials/article/components/details.html
index 9ba972c..0a8f777 100644
--- a/layouts/partials/article/components/details.html
+++ b/layouts/partials/article/components/details.html
@@ -1,4 +1,4 @@
-{{ $image := partial "helper/image" . }}
+{{ $image := partial "helper/image" (dict "Context" .) }}
{{ $context := . }}
<div class="article-details">
{{ with $categories := .Params.categories }}
diff --git a/layouts/partials/article/components/header.html b/layouts/partials/article/components/header.html
index fabeaea..702e923 100644
--- a/layouts/partials/article/components/header.html
+++ b/layouts/partials/article/components/header.html
@@ -1,5 +1,5 @@
<header class="article-header">
- {{ $image := partial "helper/image" . }}
+ {{ $image := partial "helper/image" (dict "Context" .) }}
{{ if $image.exists }}
<div class="article-image">
diff --git a/layouts/partials/head/opengraph.html b/layouts/partials/head/opengraph.html
index 26c987a..9410693 100644
--- a/layouts/partials/head/opengraph.html
+++ b/layouts/partials/head/opengraph.html
@@ -40,13 +40,9 @@
{{- end -}}
{{- end -}}
-{{ $image := partial "helper/image" . }}
+{{ $image := partial "helper/image" (dict "Context" . "Type" "opengraph") }}
{{- if $image.exists -}}
<meta name="twitter:card" content="summary_large_image">
- <meta property='og:image' content='{{ $image.permalink }}' />
- <meta name="twitter:image" content='{{ $image.permalink }}' />
-{{- else if .Site.Params.opengraph.defaultImage -}}
- {{ $image := resources.Get .Site.Params.opengraph.defaultImage }}
- <meta property='og:image' content='{{ absURL $image.RelPermalink }}' />
- <meta name="twitter:image" content='{{ absURL $image.RelPermalink }}' />
+ <meta property='og:image' content='{{ absURL $image.permalink }}' />
+ <meta name="twitter:image" content='{{ absURL $image.permalink }}' />
{{- end -}}
\ No newline at end of file
diff --git a/layouts/partials/helper/image.html b/layouts/partials/helper/image.html
index 3a78d6d..fc9925f 100644
--- a/layouts/partials/helper/image.html
+++ b/layouts/partials/helper/image.html
@@ -1,5 +1,6 @@
{{ $result := dict "exists" false "permalink" nil "resource" nil "isDefault" false }}
-{{ $imageField := .Params.image }}
+{{ $imageField := .Context.Params.image }}
+
{{ if $imageField }}
<!-- If page has `image` field set -->
{{ $result = merge $result (dict "exists" true) }}
@@ -9,7 +10,7 @@
<!-- Is a external image -->
{{ $result = merge $result (dict "permalink" $imageField) }}
{{ else }}
- {{ $pageResourceImage := .Resources.GetMatch (printf "%s" ($imageField | safeURL)) }}
+ {{ $pageResourceImage := .Context.Resources.GetMatch (printf "%s" ($imageField | safeURL)) }}
{{ $siteResourceImage := resources.GetMatch (printf "%s" ($imageField | safeURL)) }}
{{ if $pageResourceImage }}
@@ -27,6 +28,34 @@
{{ end }}
{{ end }}
+{{ else if and (ne .Type nil) (index .Context.Site.Params.defaultImage .Type) }}
+ <!-- Type arg is set, check for defaultImage setting -->
+
+ {{ $defaultImageSetting := index .Context.Site.Params.defaultImage .Type }}
+
+ {{ if $defaultImageSetting.enabled }}
+ {{ $result = merge $result (dict "isDefault" true) }}
+ {{ $result = merge $result (dict "exists" true) }}
+
+ {{ if $defaultImageSetting.local }}
+ {{ $siteResourceImage := resources.GetMatch (printf "%s" ($defaultImageSetting.src | safeURL)) }}
+
+ {{ if $siteResourceImage }}
+ <!-- Try search image under site's assets folder -->
+ {{ $result = merge $result (dict "permalink" $siteResourceImage.RelPermalink) }}
+ {{ $result = merge $result (dict "resource" $siteResourceImage) }}
+ {{ else }}
+ <!-- Can not find the image -->
+ {{ errorf "Failed loading image: %q" $defaultImageSetting.src }}
+ {{ $result = merge $result (dict "exists" false) }}
+ {{ end }}
+
+ {{ else }}
+
+ {{ $result = merge $result (dict "permalink" $defaultImageSetting.src) }}
+
+ {{ end }}
+ {{ end }}
{{ end }}
{{ return $result }}
\ No newline at end of file
From 2acd380e98e705801eb90e8c6dee4395e4381aa8 Mon Sep 17 00:00:00 2001
From: Jimmy Cai <jimmehcai@gmail.com>
Date: Fri, 11 Sep 2020 17:54:16 +0200
Subject: [PATCH 6/8] feat(helper/image): customize field used to get featured
image
---
exampleSite/config.toml | 1 +
layouts/partials/helper/image.html | 15 ++++++++-------
2 files changed, 9 insertions(+), 7 deletions(-)
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 4ffe263..294742c 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -13,6 +13,7 @@ DefaultContentLanguage = "en" # Theme i18n support
[params]
mainSections = ["post"]
favicon = ""
+ featuredImageField = "image"
[params.dateFormat]
published = "Jan 02, 2006"
lastUpdated = "Jan 02, 2006 15:04 MST"
diff --git a/layouts/partials/helper/image.html b/layouts/partials/helper/image.html
index fc9925f..f73e985 100644
--- a/layouts/partials/helper/image.html
+++ b/layouts/partials/helper/image.html
@@ -1,17 +1,18 @@
{{ $result := dict "exists" false "permalink" nil "resource" nil "isDefault" false }}
-{{ $imageField := .Context.Params.image }}
+{{ $imageField := default "image" .Context.Site.Params.featuredImageField }}
+{{ $imageValue := index .Context.Params $imageField }}
-{{ if $imageField }}
+{{ if $imageValue }}
<!-- If page has `image` field set -->
{{ $result = merge $result (dict "exists" true) }}
- {{ $url := urls.Parse $imageField }}
+ {{ $url := urls.Parse $imageValue }}
{{ if or (eq $url.Scheme "http") (eq $url.Scheme "https") }}
<!-- Is a external image -->
- {{ $result = merge $result (dict "permalink" $imageField) }}
+ {{ $result = merge $result (dict "permalink" $imageValue) }}
{{ else }}
- {{ $pageResourceImage := .Context.Resources.GetMatch (printf "%s" ($imageField | safeURL)) }}
- {{ $siteResourceImage := resources.GetMatch (printf "%s" ($imageField | safeURL)) }}
+ {{ $pageResourceImage := .Context.Resources.GetMatch (printf "%s" ($imageValue | safeURL)) }}
+ {{ $siteResourceImage := resources.GetMatch (printf "%s" ($imageValue | safeURL)) }}
{{ if $pageResourceImage }}
<!-- If image is found under page bundle -->
@@ -23,7 +24,7 @@
{{ $result = merge $result (dict "resource" $siteResourceImage) }}
{{ else }}
<!-- Can not find the image -->
- {{ errorf "Failed loading image: %q" $imageField }}
+ {{ errorf "Failed loading image: %q" $imageValue }}
{{ $result = merge $result (dict "exists" false) }}
{{ end }}
{{ end }}
From a2732a312a0ab8e2533eaf9c571d521354690b4b Mon Sep 17 00:00:00 2001
From: Jimmy Cai <jimmehcai@gmail.com>
Date: Fri, 11 Sep 2020 18:07:29 +0200
Subject: [PATCH 7/8] feat(image): add article and article list default image
settings
---
exampleSite/config.toml | 8 ++++++++
layouts/_default/term.html | 2 +-
layouts/partials/article-list/compact.html | 2 +-
layouts/partials/article-list/default.html | 2 +-
layouts/partials/article-list/tile.html | 2 +-
layouts/partials/article/components/header.html | 2 +-
6 files changed, 13 insertions(+), 5 deletions(-)
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 294742c..496a8ce 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -41,6 +41,14 @@ DefaultContentLanguage = "en" # Theme i18n support
[params.opengraph.twitter]
site = ""
[params.defaultImage]
+ [params.defaultImage.article]
+ enabled = false
+ local = false
+ src = ""
+ [params.defaultImage.articleList]
+ enabled = false
+ local = true
+ src = ""
[params.defaultImage.opengraph]
enabled = false
local = false
diff --git a/layouts/_default/term.html b/layouts/_default/term.html
index b3d2cce..0b63549 100644
--- a/layouts/_default/term.html
+++ b/layouts/_default/term.html
@@ -15,7 +15,7 @@
{{ end }}
</div>
- {{ $image := partial "helper/image" (dict "Context" .) }}
+ {{ $image := partial "helper/image" (dict "Context" . "Type" "taxonomy") }}
{{ if $image.exists }}
<div class="taxonomy-image">
{{ if $image.resource }}
diff --git a/layouts/partials/article-list/compact.html b/layouts/partials/article-list/compact.html
index 61c1f29..1a71318 100644
--- a/layouts/partials/article-list/compact.html
+++ b/layouts/partials/article-list/compact.html
@@ -12,7 +12,7 @@
</footer>
</div>
- {{ $image := partial "helper/image" (dict "Context" .) }}
+ {{ $image := partial "helper/image" (dict "Context" . "Type" "articleList") }}
{{ if $image.exists }}
<div class="article-image">
diff --git a/layouts/partials/article-list/default.html b/layouts/partials/article-list/default.html
index 879d848..8c59ff7 100644
--- a/layouts/partials/article-list/default.html
+++ b/layouts/partials/article-list/default.html
@@ -1,4 +1,4 @@
-{{ $image := partial "helper/image" (dict "Context" .) }}
+{{ $image := partial "helper/image" (dict "Context" . "Type" "articleList") }}
<article class="{{ if $image.exists }}has-image{{ end }}">
{{ if $image.exists }}
<div class="article-image">
diff --git a/layouts/partials/article-list/tile.html b/layouts/partials/article-list/tile.html
index 4af3028..ea38a83 100644
--- a/layouts/partials/article-list/tile.html
+++ b/layouts/partials/article-list/tile.html
@@ -1,4 +1,4 @@
-{{ $image := partial "helper/image" (dict "Context" .context) }}
+{{ $image := partial "helper/image" (dict "Context" .context "Type" .Type) }}
<article class="{{ if $image.exists }}has-image{{ end }}">
<a href="{{ .context.Permalink }}">
diff --git a/layouts/partials/article/components/header.html b/layouts/partials/article/components/header.html
index 702e923..df7c764 100644
--- a/layouts/partials/article/components/header.html
+++ b/layouts/partials/article/components/header.html
@@ -1,5 +1,5 @@
<header class="article-header">
- {{ $image := partial "helper/image" (dict "Context" .) }}
+ {{ $image := partial "helper/image" (dict "Context" . "Type" "article") }}
{{ if $image.exists }}
<div class="article-image">
From 2079174aa951d66d80597d5b8a18d1f151718284 Mon Sep 17 00:00:00 2001
From: Jimmy Cai <jimmehcai@gmail.com>
Date: Fri, 11 Sep 2020 18:13:39 +0200
Subject: [PATCH 8/8] style(helper/image): code formatting
---
layouts/partials/helper/image.html | 9 +++++----
1 file changed, 5 insertions(+), 4 deletions(-)
diff --git a/layouts/partials/helper/image.html b/layouts/partials/helper/image.html
index f73e985..5276f2e 100644
--- a/layouts/partials/helper/image.html
+++ b/layouts/partials/helper/image.html
@@ -5,8 +5,8 @@
{{ if $imageValue }}
<!-- If page has `image` field set -->
{{ $result = merge $result (dict "exists" true) }}
-
{{ $url := urls.Parse $imageValue }}
+
{{ if or (eq $url.Scheme "http") (eq $url.Scheme "https") }}
<!-- Is a external image -->
{{ $result = merge $result (dict "permalink" $imageValue) }}
@@ -27,11 +27,11 @@
{{ errorf "Failed loading image: %q" $imageValue }}
{{ $result = merge $result (dict "exists" false) }}
{{ end }}
+
{{ end }}
{{ else if and (ne .Type nil) (index .Context.Site.Params.defaultImage .Type) }}
<!-- Type arg is set, check for defaultImage setting -->
-
{{ $defaultImageSetting := index .Context.Site.Params.defaultImage .Type }}
{{ if $defaultImageSetting.enabled }}
@@ -52,11 +52,12 @@
{{ end }}
{{ else }}
-
+ <!-- External image -->
{{ $result = merge $result (dict "permalink" $defaultImageSetting.src) }}
-
{{ end }}
+
{{ end }}
+
{{ end }}
{{ return $result }}
\ No newline at end of file