diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 1071c32..496a8ce 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" @@ -37,9 +38,21 @@ DefaultContentLanguage = "en" # Theme i18n support [params.widgets.tagCloud] limit = 10 [params.opengraph] - defaultImage = "" [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 + src = "" [menu] [[menu.main]] diff --git a/layouts/_default/term.html b/layouts/_default/term.html index cae47d1..0b63549 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" (dict "Context" . "Type" "taxonomy") }} + {{ if $image.exists }} <div class="taxonomy-image"> - <img src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}" - height="{{ $thumbnail.Height }}" loading="lazy"> + {{ if $image.resource }} + {{- $thumbnail := $image.resource.Fill "120x120" -}} + <img src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}" + height="{{ $thumbnail.Height }}" loading="lazy"> + {{ else }} + <img src="{{ $image.permalink }}" loading="lazy"> + {{ end }} </div> {{ end }} </div> diff --git a/layouts/partials/article-list/compact.html b/layouts/partials/article-list/compact.html index 3988b83..1a71318 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" (dict "Context" . "Type" "articleList") }} - <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.resource }} + {{- $thumbnail := $image.resource.Fill "120x120" -}} + <img src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}" + height="{{ $thumbnail.Height }}" loading="lazy"> + {{ else }} + <img src="{{ $image.permalink }}" 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..8c59ff7 100644 --- a/layouts/partials/article-list/default.html +++ b/layouts/partials/article-list/default.html @@ -1,17 +1,21 @@ -<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" (dict "Context" . "Type" "articleList") }} +<article class="{{ if $image.exists }}has-image{{ end }}"> + {{ if $image.exists }} + <div class="article-image"> + <a href="{{ .Permalink }}"> + {{ if $image.resource }} + {{- $thumbnail := $image.resource.Fill "800x250" -}} + {{- $thumbnailRetina := $image.resource.Fill "1600x500" -}} - <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> + <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.permalink }}" 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..ea38a83 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" (dict "Context" .context "Type" .Type) }} +<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.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.permalink }}" loading="lazy" data-key="{{ .context.Slug }}" data-hash="{{ $image.permalink }}"/> + {{ 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..0a8f777 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" (dict "Context" .) }} {{ $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.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="{{ $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..df7c764 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" (dict "Context" . "Type" "article") }} - {{- $tablet := $image.Resize "1024x" -}} - {{- $desktop := $image.Resize "2000x" -}} + {{ if $image.exists }} + <div class="article-image"> + {{ if $image.resource }} + {{- $tablet := $image.resource.Resize "1024x" -}} + {{- $desktop := $image.resource.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.resource.Width }}" height="{{ $image.resource.Height }}" loading="lazy" + alt="Featured image of post {{ .Title }}" /> + {{ else }} + <img src="{{ $image.permalink }}" 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..9410693 100644 --- a/layouts/partials/head/opengraph.html +++ b/layouts/partials/head/opengraph.html @@ -40,13 +40,9 @@ {{- end -}} {{- end -}} -{{- if .Params.image -}} - {{ $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='{{ absURL $image.RelPermalink }}' /> - <meta name="twitter:image" content='{{ absURL $image.RelPermalink }}' /> -{{- 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 308a36c..5276f2e 100644 --- a/layouts/partials/helper/image.html +++ b/layouts/partials/helper/image.html @@ -1,2 +1,63 @@ -{{- $image := .Resources.GetMatch (printf "%s" (.Params.image | safeURL)) -}} -{{ return $image }} \ No newline at end of file +{{ $result := dict "exists" false "permalink" nil "resource" nil "isDefault" false }} +{{ $imageField := default "image" .Context.Site.Params.featuredImageField }} +{{ $imageValue := index .Context.Params $imageField }} + +{{ 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) }} + {{ else }} + {{ $pageResourceImage := .Context.Resources.GetMatch (printf "%s" ($imageValue | safeURL)) }} + {{ $siteResourceImage := resources.GetMatch (printf "%s" ($imageValue | safeURL)) }} + + {{ if $pageResourceImage }} + <!-- If image is found under page bundle --> + {{ $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 "permalink" $siteResourceImage.RelPermalink) }} + {{ $result = merge $result (dict "resource" $siteResourceImage) }} + {{ else }} + <!-- Can not find the image --> + {{ 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 }} + {{ $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 }} + <!-- External image --> + {{ $result = merge $result (dict "permalink" $defaultImageSetting.src) }} + {{ end }} + + {{ end }} + +{{ end }} + +{{ return $result }} \ No newline at end of file