From 21241c212ea9b6a7f8727564bd245bf3857e1a0d Mon Sep 17 00:00:00 2001 From: Niek Blankers Date: Thu, 22 Oct 2020 13:12:26 +0200 Subject: [PATCH] relative-cover: init Responsive cover images (#43) Co-authored-by: Aditya Telange <21258296+adityatelange@users.noreply.github.com> - generates images of different sizes - browser can choose between set of images w.r.t viewport width - is enabled by default - supported image formats : https://gohugo.io/content-management/image-processing/#target-format - Customizing site config params: params: cover: responsiveImages: false # if want to disable it linkFullImages: true # if link original image on clicking cover --- layouts/_default/list.html | 12 ++---------- layouts/_default/single.html | 13 ++----------- layouts/partials/cover.html | 32 ++++++++++++++++++++++++++++++++ 3 files changed, 36 insertions(+), 21 deletions(-) create mode 100644 layouts/partials/cover.html diff --git a/layouts/_default/list.html b/layouts/_default/list.html index a92fe71d..3596a931 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -31,15 +31,7 @@ {{- $class = "post-entry tag-entry" }} {{- end }}
- {{- if .Params.cover.image }} -
- {{- if (ne .Params.cover.relative true) }} - {{ .Params.cover.alt | plainify }} - {{- else}} - {{ .Params.cover.alt | plainify }} - {{- end}} -
- {{- end }} + {{- partial "cover.html" (dict "cxt" . "IsHome" true) }}

{{ .Title }} @@ -75,4 +67,4 @@ {{- end }} {{end}}{{/* end profileMode */}} -{{- end }}{{- /* end main */ -}} \ No newline at end of file +{{- end }}{{- /* end main */ -}} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index ec8038e9..20c3bc93 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -26,16 +26,7 @@ {{- end}}

- {{- if .Params.cover.image }} -
- {{- if (ne .Params.cover.relative true) }} - {{ .Params.cover.alt | plainify }} - {{- else}} - {{ .Params.cover.alt | plainify }} - {{- end}} -

{{.Params.cover.caption | markdownify }}

-
- {{- end }} + {{- partial "cover.html" (dict "cxt" . "IsHome" false) }} {{- if .Params.ShowToc }}
@@ -68,4 +59,4 @@ {{- end }}
-{{- end }}{{/* end main */}} \ No newline at end of file +{{- end }}{{/* end main */}} diff --git a/layouts/partials/cover.html b/layouts/partials/cover.html new file mode 100644 index 00000000..7be43ea6 --- /dev/null +++ b/layouts/partials/cover.html @@ -0,0 +1,32 @@ +{{- with .cxt}} {{/* Apply proper context from dict */}} +{{- if .Params.cover.image }} +{{- $alt := (.Params.cover.alt | default .Params.cover.caption | plainify) }} +
+ {{- $addLink := (and .Site.Params.cover.linkFullImages (not $.IsHome)) }} + {{- $cover := (.Page.Resources.ByType "image").GetMatch (printf "*%s*" (.Params.cover.image)) }} + {{- if $cover -}}{{/* i.e it is present in page bundle */}} + {{- if $addLink }}{{ end -}} + {{- $sizes := (slice "360" "480" "720" "1080" "1500") }} + {{- $processableFormats := (slice "jpg" "jpeg" "png" "tif" "bmp" "gif") }} + {{- if (and (in $processableFormats $cover.MediaType.SubType) (ne .Site.Params.cover.responsiveImages false)) }} + {{ $alt }} + {{- else }}{{/* Unprocessable image or responsive images disabled */}} + {{ $alt }} + {{- end }} + {{- else }}{{/* For absolute urls and external links, no img processing here */}} + {{- if $addLink }}{{ end -}} + {{ $alt }} + {{- end }} + {{- if $addLink }}{{ end -}} + {{/* Display Caption */}} + {{- if not $.IsHome }} + {{ with .Params.cover.caption }}

{{ . | markdownify }}

{{- end }} + {{- end }} +
+{{- end }}{{/* End image */}} +{{- end -}}{{/* End context */}}