Sync/hugo-theme-stack
1
0
Fork 1
mirror of https://github.com/CaiJimmy/hugo-theme-stack.git synced 2025-06-18 03:53:31 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

support srcset for webp for cover/content images

Browse Source
This commit is contained in:
provos 2023-01-16 01:36:47 +00:00
parent 4272da7ee4
commit 1f2702d769
3 changed files with 40 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/ts/gallery.ts
View File

@ -61,7 +61,7 @@ class StackGallery {
/// because it can not detect whether image is being wrapped by a link or not
/// and it lead to a invalid HTML construction (<a><figure><img></figure></a>)
const images = container.querySelectorAll('img.gallery-image');
const images = container.querySelectorAll('picture.gallery-image');
for (const img of Array.from(images)) {
/// Images are wrapped with figure tag if the paragraph has only images without texts
/// This is done to allow inline images within paragraphs

41
layouts/_default/_markup/render-image.html
View File

@ -8,6 +8,8 @@
{{/* SVG and external images won't work with gallery layout, because their width and height attributes are unknown */}}
{{- $galleryImage := false -}}
<picture
{{- if $image -}}
{{- $notSVG := ne (path.Ext .Destination) ".svg" -}}
{{- $Permalink = $image.RelPermalink -}}
@ -16,8 +18,33 @@
{{- $Width = $image.Width -}}
{{- $Height = $image.Height -}}
{{- $galleryImage = true -}}
{{- end -}}
{{ if $galleryImage }}
class="gallery-image"
data-flex-grow="{{ div (mul $image.Width 100) $image.Height }}"
data-flex-basis="{{ div (mul $image.Width 240) $image.Height }}px"
{{ with $alt }}
alt="{{ . }}"
{{ end }}
{{ end }}
{{- end -}}
>
{{- if $image -}}
{{- $notSVG := ne (path.Ext .Destination) ".svg" -}}
{{- $Permalink = $image.RelPermalink -}}
{{- if $notSVG -}}
{{- if (default true .Page.Site.Params.imageProcessing.content.enabled) -}}
{{- $small := $image.Resize `webp 480x` -}}
{{- $big := $image.Resize `webp 1024x` -}}
{{- $Srcset = printf `%s 480w, %s 1024w` $small.RelPermalink $big.RelPermalink -}}
<source type="image/webp"
srcset="{{ $Srcset }}"
>
{{- $small := $image.Resize `480x` -}}
{{- $big := $image.Resize `1024x` -}}
{{- $Srcset = printf `%s 480w, %s 1024w` $small.RelPermalink $big.RelPermalink -}}
@ -25,17 +52,13 @@
{{- end -}}
{{- end -}}
<img src="{{ $Permalink }}"
{{ with $Width }}width="{{ . }}"{{ end }}
{{ with $Height }}height="{{ . }}"{{ end }}
{{ with $Srcset }}srcset="{{ . }}"{{ end }}
loading="lazy"
{{ with $alt }}
alt="{{ . }}"
{{ end }}
{{ if $galleryImage }}
class="gallery-image"
data-flex-grow="{{ div (mul $image.Width 100) $image.Height }}"
data-flex-basis="{{ div (mul $image.Width 240) $image.Height }}px"
{{ end }}
>
decoding="async"
>
</picture>

8
layouts/partials/article/components/header.html
View File

@ -9,7 +9,12 @@
{{- $Height := $image.resource.Height -}}
{{- $Srcset := "" -}}
<picture>
{{- if (default true .Page.Site.Params.imageProcessing.cover.enabled) -}}
{{- $thumbnail := $image.resource.Resize "webp 800x" -}}
{{- $thumbnailRetina := $image.resource.Resize "webp 1600x" -}}
{{- $Srcset = printf "%s 800w, %s 1600w" $thumbnail.RelPermalink $thumbnailRetina.RelPermalink -}}
<source type="image/webp" srcset="{{ $Srcset }}" />
{{- $thumbnail := $image.resource.Resize "800x" -}}
{{- $thumbnailRetina := $image.resource.Resize "1600x" -}}
{{- $Srcset = printf "%s 800w, %s 1600w" $thumbnail.RelPermalink $thumbnailRetina.RelPermalink -}}
@ -22,8 +27,9 @@
{{ with $Srcset }}srcset="{{ . }}"{{ end }}
width="{{ $Width }}"
height="{{ $Height }}"
loading="lazy"
decoding="async"
alt="Featured image of post {{ .Title }}" />
</picture>
{{ else }}
<img src="{{ $image.permalink }}" loading="lazy" alt="Featured image of post {{ .Title }}" />
{{ end }}