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
This commit is contained in:
parent
3e92b5aa29
commit
21241c212e
|
@ -31,15 +31,7 @@
|
||||||
{{- $class = "post-entry tag-entry" }}
|
{{- $class = "post-entry tag-entry" }}
|
||||||
{{- end }}
|
{{- end }}
|
||||||
<article class="{{ $class }}">
|
<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">
|
<header class="entry-header">
|
||||||
<h2>
|
<h2>
|
||||||
{{ .Title }}
|
{{ .Title }}
|
||||||
|
@ -75,4 +67,4 @@
|
||||||
</footer>
|
</footer>
|
||||||
{{- end }}
|
{{- end }}
|
||||||
{{end}}{{/* end profileMode */}}
|
{{end}}{{/* end profileMode */}}
|
||||||
{{- end }}{{- /* end main */ -}}
|
{{- end }}{{- /* end main */ -}}
|
||||||
|
|
|
@ -26,16 +26,7 @@
|
||||||
</div>
|
</div>
|
||||||
{{- end}}
|
{{- end}}
|
||||||
</header>
|
</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 }}
|
{{- if .Params.ShowToc }}
|
||||||
<div class="toc">
|
<div class="toc">
|
||||||
<details {{if .Params.TocOpen }} open{{ end }}>
|
<details {{if .Params.TocOpen }} open{{ end }}>
|
||||||
|
@ -68,4 +59,4 @@
|
||||||
{{- end }}
|
{{- end }}
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
{{- end }}{{/* end main */}}
|
{{- end }}{{/* end main */}}
|
||||||
|
|
|
@ -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 */}}
|
Loading…
Reference in New Issue