diff options
author | Jimmy Cai <jimmehcai@gmail.com> | 2020-09-10 19:53:36 +0300 |
---|---|---|
committer | Jimmy Cai <jimmehcai@gmail.com> | 2020-09-10 19:53:36 +0300 |
commit | 28c06ef8ae29d615b7c5c2ba6ebe81400b123a96 (patch) | |
tree | 6ac75548fe65bd2c11055b8d5882d1716ed6c602 /layouts/partials | |
parent | 62b0da64df00de49f71cd9f03cff406fd7f1e656 (diff) |
feat(helper/image): new image helper (WIP)
Diffstat (limited to 'layouts/partials')
-rw-r--r-- | layouts/partials/article-list/compact.html | 18 | ||||
-rw-r--r-- | layouts/partials/article-list/default.html | 29 | ||||
-rw-r--r-- | layouts/partials/article-list/tile.html | 23 | ||||
-rw-r--r-- | layouts/partials/article/components/details.html | 11 | ||||
-rw-r--r-- | layouts/partials/article/components/header.html | 23 | ||||
-rw-r--r-- | layouts/partials/head/opengraph.html | 12 | ||||
-rw-r--r-- | 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 |