Git/hugo-theme-wondermod
1
0
Fork 0
mirror of https://github.com/Wonderfall/hugo-WonderMod.git synced 2024-11-21 18:11:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

relative-cover: init Responsive cover images (#43)

Browse Source 
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:
Niek Blankers 2020-10-22 13:12:26 +02:00 committed by GitHub
parent 3e92b5aa29
commit 21241c212e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 36 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
layouts/_default/list.html
View File

@ -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 */ -}}
{{- end }}{{- /* end main */ -}}

13
layouts/_default/single.html
View File

@ -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 */}}
{{- end }}{{/* end main */}}

32
layouts/partials/cover.html Normal file
View File

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