MyFavMirrors/hugo-PaperMod
1
0
Fork 0
mirror of https://github.com/adityatelange/hugo-PaperMod.git synced 2025-03-20 04:24:12 -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 { .entry-cover img {
border-radius: var(--radius); border-radius: var(--radius);
pointer-events: none;
width: 100%; width: 100%;
height: auto; height: auto;
} }

84
layouts/partials/cover.html
View File

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