MyFavMirrors/hugo-PaperMod
1
0
Fork 0
mirror of https://github.com/adityatelange/hugo-PaperMod.git synced 2025-03-13 00:40:05 -04:00
Code Issues Packages Projects Releases Wiki Activity

Feat/improve cover image gen (#1628)

Browse Source 
* Refactor cover.html

* Refactor 2

* Refactor 3

* Refactor 4

* Refactor 5

* add comments and refactor more

* Refactor cover.html to use <figcaption> for image captions

* Add comments and manage whitespace

* Remove pointer-event prevention from entry-cover image
This commit is contained in:
Aditya Telange 2025-03-08 23:30:00 +05:30 committed by GitHub
parent e2e1011bde
commit 72615b6d49
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 53 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
assets/css/common/post-entry.css
View File

@ -97,7 +97,6 @@
.entry-cover img {
border-radius: var(--radius);
pointer-events: none;
width: 100%;
height: auto;
}

84
layouts/partials/cover.html
View File

@ -1,42 +1,64 @@
{{- with .cxt}} {{/* Apply proper context from dict */}}
{{- if (and .Params.cover.image (not $.isHidden)) }}
{{- $alt := (.Params.cover.alt | default .Params.cover.caption | plainify) }}
{{- $loading := cond $.IsSingle "eager" "lazy" }}
<figure class="entry-cover">
{{- $responsiveImages := (.Params.cover.responsiveImages | default site.Params.cover.responsiveImages) | default true }}
{{- $loading := cond $.IsSingle "eager" "lazy" }}
{{- $addLink := (and site.Params.cover.linkFullImages $.IsSingle) }}
{{- $pageBundleCover := (.Resources.ByType "image").GetMatch (printf "*%s*" (.Params.cover.image)) }}
{{- $prod := (hugo.IsProduction | or (eq site.Params.env "production")) }}
{{- $alt := (.Params.cover.alt | default .Params.cover.caption | plainify) }}
{{- $responsiveImages := (.Params.cover.responsiveImages | default site.Params.cover.responsiveImages) | default true }}
{{- $pageBundleCover := (.Resources.ByType "image").GetMatch (printf "*%s*" (.Params.cover.image)) }}
{{- $globalResourcesCover := (resources.ByType "image").GetMatch (printf "*%s*" (.Params.cover.image)) }}
{{- $cover := (or $pageBundleCover $globalResourcesCover)}}
{{- if $cover -}}{{/* i.e it is present in page bundle */}}
{{- if $addLink }}<a href="{{ (path.Join .RelPermalink .Params.cover.image) | absURL }}" target="_blank"
rel="noopener noreferrer">{{ end -}}
{{- $sizes := (slice "360" "480" "720" "1080" "1500") }}
{{- $processableFormats := (slice "jpg" "jpeg" "png" "tif" "bmp" "gif") -}}
{{- if hugo.IsExtended -}}
{{- $processableFormats = $processableFormats | append "webp" -}}
{{- end -}}
{{- $prod := (hugo.IsProduction | or (eq site.Params.env "production")) }}
{{- if (and (in $processableFormats $cover.MediaType.SubType) ($responsiveImages) (eq $prod true)) }}
<img loading="{{$loading}}" srcset="{{- range $size := $sizes -}}
{{- if (ge $cover.Width $size) -}}
{{ printf "%s %s" (($cover.Resize (printf "%sx" $size)).Permalink) (printf "%sw ," $size) -}}
{{ end }}
{{- end -}}{{$cover.Permalink }} {{printf "%dw" ($cover.Width)}}"
sizes="(min-width: 768px) 720px, 100vw" src="{{ $cover.Permalink }}" alt="{{ $alt }}"
width="{{ $cover.Width }}" height="{{ $cover.Height }}">
{{- else }}{{/* Unprocessable image or responsive images disabled */}}
<img loading="{{$loading}}" 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"
rel="noopener noreferrer">{{ end -}}
<img loading="{{$loading}}" src="{{ (.Params.cover.image) | absURL }}" alt="{{ $alt }}">
{{- /* We are not using the .Param.cover.relative to decide the location of image */}}
{{- /* If we have the image in pageBundle or globalResources we can process the image */}}
{{- $sizes := (slice "360" "480" "720" "1080" "1500") }}
{{- $processableFormats := (slice "jpg" "jpeg" "png" "tif" "bmp" "gif") -}}
{{- if hugo.IsExtended -}}
{{- $processableFormats = $processableFormats | append "webp" -}}
{{- end -}}
{{- $imgdl := (.Params.cover.image) | absURL }}
{{- if $cover -}}
{{- $imgdl = $cover.Permalink }}
{{- end -}}
{{- if $addLink }}
<a href="{{ $imgdl }}" target="_blank" rel="noopener noreferrer">
{{- end }}
{{- if $addLink }}</a>{{ end -}}
{{/* Display Caption */}}
{{- if $cover -}}
{{/* i.e it is present in page bundle */}}
{{- if (and (in $processableFormats $cover.MediaType.SubType) ($responsiveImages) (eq $prod true)) }}
<img loading="{{$loading}}"
srcset='{{- range $size := $sizes -}}
{{- if (ge $cover.Width $size) }}
{{- printf "%s %s" (($cover.Resize (printf "%sx" $size)).Permalink) (printf "%sw," $size) }}
{{- end }}
{{- end }}
{{- printf "%s %dw" ($cover.Permalink) ($cover.Width) }}'
src="{{ $cover.Permalink }}"
sizes="(min-width: 768px) 720px, 100vw"
width="{{ $cover.Width }}" height="{{ $cover.Height }}"
alt="{{ $alt }}">
{{- else }}{{/* Unprocessable image or responsive images disabled */}}
<img loading="{{ $loading }}" src="{{ $imgdl }}" alt="{{ $alt }}">
{{- end }}
{{- else }}
{{- /* For absolute urls and external links, no img processing here */}}
<img loading="{{ $loading }}" src="{{ $imgdl }}" alt="{{ $alt }}">
{{- end }}
{{- if $addLink }}
</a>
{{- end -}}
{{- /* Display Caption */}}
{{- if $.IsSingle }}
{{ with .Params.cover.caption }}<p>{{ . | markdownify }}</p>{{- end }}
{{ with .Params.cover.caption -}}
<figcaption>{{ . | markdownify }}</figcaption>
{{- end }}
{{- end }}
</figure>
{{- end }}{{/* End image */}}