qnpati/website
1
0
Fork 0
forked from IT-Syndikat/website
Code Pull requests Activity

better responsive images

Browse source
This commit is contained in:
dark_hash 2025-01-26 14:13:12 +01:00
parent ec4ef9f533
commit c12f6e41a7
2 changed files with 61 additions and 53 deletions
hugo.toml
layouts/_default/_markup
render-image.html

6
hugo.toml
View file

@ -43,11 +43,7 @@ defaultContentLanguageInSubdir = false
mathjax = false # Enable MathJax
customCSS = ["css/its.css"] # Include custom CSS files
customJS = ["js/its.js"] # Include custom JS files
landscapePhotoWidths = [2080, 1920, 1700, 1600, 1280, 1024, 768, 550, 480, 430, 360, 320]
portraitPhotoWidths = [1500, 1000, 750, 600]
[imaging]
quality = 75
imageSizes = [ 320, 640, 960, 1280, 1600, 1920 ]
[Params.style.vars]
highlightColor = "#109c11" # matrix green

108
layouts/_default/_markup/render-image.html
View file

@ -1,52 +1,64 @@
<!-- Fallback -->
{{ $originalImage := resources.Get "images/glider.png" }}
{{ $myTitle := i18n "image not found" }}
{{ with .Destination }}
{{ $myTitle := $.Title }}
<!-- Page-Resources -->
{{ with $.Page.Resources.Get . }}
{{ $originalImage = . }}
{{ else }}
<!-- Static-Resources -->
{{ with resources.Get . }}
{{ $originalImage = . }}
{{ end }}
{{ end }}
{{ end }}
{{- $image_file := .Destination -}}
{{- $image := $.Page.Resources.Get $image_file -}}
<!-- Page-Resources -->
{{- with $image -}}
{{- $image = . -}}
{{- else -}}
<!-- Static-Resources -->
{{- with resources.Get $image_file -}}
{{- $image = . -}}
{{- end -}}
{{- end -}}
<p class="md-image">
<picture>
<!-- Set size from original size -->
{{ $width := $originalImage.Width }}
{{- $background_colour := "#020221" -}}
{{- $alt := .Text -}}
{{- $label := .Text -}}
{{- $caption := "" -}}
{{- if ne .Title "" -}}
{{- $caption = .Title | $.Page.RenderString -}}
{{- $label = $caption -}}
{{- end -}}
{{- $imageSizes := site.Params.imageSizes -}}
{{ if gt $width 800 }}
{{ with $originalImage.Resize "800x" }}
<source media="(min-width:800px)" srcset="{{ .RelPermalink | safeURL }}" />
{{ end}}
{{ end }}
{{- with $image -}}
{{- $image_width := $image.Width -}}
{{- $image_height := $image.Height -}}
{{- $fallback_image := ($image.Resize (print "640x jpg " $background_colour)) -}}
{{ if gt $width 1200 }}
{{ with $originalImage.Resize "1200x" }}
<source media="(min-width:1200px)" srcset="{{ .RelPermalink | safeURL }}" />
{{ end}}
<figure role="figure" aria-label="{{- $label | plainify -}}">
<a href="{{- $image.RelPermalink -}}">
<div class="image-wrapper">
<img
alt="{{- $alt -}}"
title="{{- $label | plainify -}}"
width="{{- $image_width -}}"
height="{{- $image_height -}}"
{{- if (or (strings.HasSuffix $image ".gif") (strings.HasSuffix $image ".svg")) -}}
src="{{- $image.RelPermalink -}}"
{{ else }}
srcset="
{{- if le $image.Width (index $imageSizes 0) }}
{{- with $image.Resize (print $image.Width "x webp " $background_colour) -}}
{{- print .RelPermalink " " .Width "w, " -}}
{{- end -}}
{{- end -}}
{{- with $imageSizes -}}
{{- range $index, $size := . -}}
{{- if ge $image.Width $size -}}
{{- with $image.Resize (print $size "x webp " $background_colour) -}}
{{- print .RelPermalink " " $size "w, " -}}
{{- end -}}
{{- end -}}
{{- end -}}
{{- end -}}"
sizes="(min-width: 1024px) 100vw, 50vw"
src="{{- $fallback_image.RelPermalink -}}"
decoding="async"
{{- end }}
loading="lazy"
/>
</div>
</a>
<figcaption>{{- $caption -}}</figcaption>
</figure>
{{ end }}
{{ if gt $width 1500 }}
{{ with $originalImage.Resize "1500x" }}
<source media="(min-width:1500px)" srcset="{{ .RelPermalink | safeURL }}" />
{{ end}}
{{ end }}
{{ if gt $width 2200 }}
{{ with $originalImage.Resize "2200x" }}
<source media="(min-width:2200px)" srcset="{{ .RelPermalink | safeURL }}" />
{{ end}}
{{ end }}
{{ $tinyImage := $originalImage }}
{{ if gt $width 500 }}
{{ $tinyImage = $originalImage.Resize "500x" }}
{{ end }}
<img src="{{ $tinyImage.RelPermalink | safeURL }}" alt="{{ $myTitle }}" title="{{ $myTitle }}" />
</picture>
</p>