tobias
/
tobiasmanske.de
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

generate avif on build

This commit is contained in:
Tobias Manske 2021-03-25 03:38:38 +01:00
parent 800a3f4a5e
commit 64d9cc7e4d
Signed by: tobias
GPG Key ID: D5914DC71F2F9352
3 changed files with 82 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -15,3 +15,5 @@ hugo.linux
# End of https://www.toptal.com/developers/gitignore/api/hugo
docs/
*.webp
*.avif

9
Jenkinsfile vendored
View File

@ -24,7 +24,16 @@ pipeline {
stage('Build HTML') {
steps {
script {
docker.withRegistry('https://registry.chaoswg.org:5000', 'docker-registry-credentials') {
def dockerImage = docker.image('registry.chaoswg.org:5000/alpine-avif-webp:latest')
dockerImage.pull()
}
}
sh 'docker pull klakegg/hugo:alpine'
sh 'docker run -u 108:116 -v "$PWD:/src" registry.chaoswg.org:5000/alpine-avif-webp:latest'
sh 'docker run -u 108:116 -v "$PWD:/src" klakegg/hugo:alpine'
}
}

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

@ -0,0 +1,71 @@
{{- with .cxt}} {{/* Apply proper context from dict */}}
{{- if (and .Params.cover.image (not $.isHidden)) }}
{{- $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"
rel="noopener noreferrer">{{ end -}}
{{- $sizes := (slice "360" "480" "720" "1080" "1500") }}
{{- $processableFormats := (slice "jpg" "jpeg" "png" "tif" "bmp" "gif") }}
{{- $prod := (hugo.IsProduction | or (eq .Site.Params.env "production")) }}
{{- if (and (in $processableFormats $cover.MediaType.SubType) (ne .Site.Params.cover.responsiveImages false) (eq $prod true)) }}
<img 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 }}" />
{{- 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"
rel="noopener noreferrer">{{ end -}}
<picture>
{{ $isJPG := eq (path.Ext .Params.cover.image) ".jpg" }}
{{ $isPNG := eq (path.Ext .Params.cover.image) ".png" }}
{{ if ($isJPG) -}}
{{ $avifPath:= replace .Params.cover.image ".jpg" ".avif" }}
{{ $avifPathStatic:= printf "static/%s" $avifPath }}
{{ if (fileExists $avifPathStatic) -}}
<source srcset="{{ $avifPath | safeURL }}" type="image/avif" >
{{- end }}
{{ $webpPath:= replace .Params.cover.image ".jpg" ".webp" }}
{{ $webpPathStatic:= printf "static/%s" $webpPath }}
{{ if (fileExists $webpPathStatic) -}}
<source srcset="{{ $webpPath | safeURL }}" type="image/webp" >
{{- end }}
{{- end }}
{{ if ($isPNG) -}}
{{ $avifPath:= replace .Params.cover.image ".png" ".avif" }}
{{ $avifPathStatic:= printf "static/%s" $avifPath }}
{{ if (fileExists $avifPathStatic) -}}
<source srcset="{{ $avifPath | safeURL }}" type="image/avif" >
{{- end }}
{{ $webpPath:= replace .Params.cover.image ".png" ".webp" }}
{{ $webpPathStatic:= printf "static/%s" $webpPath }}
{{ if (fileExists $webpPathStatic) -}}
<source srcset="{{ $webpPath | safeURL }}" type="image/webp" >
{{- end }}
{{- end }}
<img src="{{ (.Params.cover.image) | absURL }}" alt="{{ $alt }}">
</picture>
{{- 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 */}}