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

@@ -31,15 +31,7 @@
 {{- $class = "post-entry tag-entry" }}
 {{- end }}
 <article class="{{ $class }}">
-  {{- if .Params.cover.image }}
+  {{- partial "cover.html" (dict "cxt" . "IsHome" true) }}
-  <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 }}
   <header class="entry-header">
     <h2>
       {{ .Title }}

layouts/_default/single.html

@@ -26,16 +26,7 @@
     </div>
     {{- end}}
   </header>
-  {{- if .Params.cover.image }}
+  {{- partial "cover.html" (dict "cxt" . "IsHome" false) }}
-  <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 }}
   {{- if .Params.ShowToc }}
   <div class="toc">
     <details {{if .Params.TocOpen }} open{{ end }}>

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 */}}