From 21241c212ea9b6a7f8727564bd245bf3857e1a0d Mon Sep 17 00:00:00 2001
From: Niek Blankers <niek@niekproductions.com>
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 }}
 <article class="{{ $class }}">
-  {{- if .Params.cover.image }}
-  <figure class="entry-cover">
-    {{- if (ne .Params.cover.relative true) }}
-    <img src="{{ .Params.cover.image | absURL }}" alt="{{ .Params.cover.alt | plainify }}">
-    {{- else}}
-    <img src="{{ (path.Join .RelPermalink .Params.cover.image ) | absURL }}" alt="{{ .Params.cover.alt | plainify }}">
-    {{- end}}
-  </figure>
-  {{- end }}
+  {{- partial "cover.html" (dict "cxt" . "IsHome" true) }}
   <header class="entry-header">
     <h2>
       {{ .Title }}
@@ -75,4 +67,4 @@
 </footer>
 {{- 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 @@
     </div>
     {{- end}}
   </header>
-  {{- if .Params.cover.image }}
-  <figure class="entry-cover">
-    {{- if (ne .Params.cover.relative true) }}
-    <img src="{{ .Params.cover.image | absURL }}" alt="{{ .Params.cover.alt | plainify }}">
-    {{- else}}
-    <img src="{{ (path.Join .RelPermalink .Params.cover.image ) | absURL }}" alt="{{ .Params.cover.alt | plainify }}">
-    {{- end}}
-    <p>{{.Params.cover.caption | markdownify }}</p>
-  </figure>
-  {{- end }}
+  {{- partial "cover.html" (dict "cxt" . "IsHome" false) }}
   {{- if .Params.ShowToc }}
   <div class="toc">
     <details {{if .Params.TocOpen }} open{{ end }}>
@@ -68,4 +59,4 @@
   {{- end }}
 </article>
 
-{{- 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) }}
+<figure class="entry-cover">
+    {{- $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 }}<a href="{{ (path.Join .RelPermalink .Params.cover.image) | absURL }}" target="_blank">{{ 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)) }}
+        <img srcset="{{- range $size := $sizes -}}
+                        {{- if (ge $cover.Width $size) -}}
+                        {{ printf "%s %s" (($cover.Resize (printf "%sx q100" $size)).Permalink) (printf "%sw ," $size) -}}
+                        {{ end }}
+                    {{- end -}}{{$cover.Permalink }} {{printf "%dw" ($cover.Width)}}"
+            sizes="(min-width: 768px) 720px, 100vw" src="{{ $cover.Permalink }}" alt="{{ $alt }}" />
+        {{- else }}{{/* Unprocessable image or responsive images disabled */}}
+        <img src="{{ (path.Join .RelPermalink .Params.cover.image) | absURL }}" alt="{{ $alt }}">
+        {{- end }}
+    {{- else }}{{/* For absolute urls and external links, no img processing here */}}
+        {{- if $addLink }}<a href="{{ (.Params.cover.image) | absURL }}" target="_blank">{{ end -}}
+            <img src="{{ (.Params.cover.image) | absURL }}" alt="{{ $alt }}">
+    {{- end }}
+    {{- if $addLink }}</a>{{ end -}}
+    {{/*  Display Caption  */}}
+    {{- if not $.IsHome }}
+        {{ with .Params.cover.caption }}<p>{{ . | markdownify }}</p>{{- end }}
+    {{- end }}
+</figure>
+{{- end }}{{/* End image */}}
+{{- end -}}{{/* End context */}}