Rockingcool/paige-hugo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add breakpoints, densities, process, sizes, srcset params

Browse Source
This commit is contained in:
Will Faught
2023-03-27 20:23:07 -07:00
parent d2d5a5802a
commit c3796b9c50
3 changed files with 195 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
layouts/partials/paige/img.html
View File

@@ -1,27 +1,32 @@
{{ $params := . }}
{{ $alt := $params.alt }}
{{ $breakpoints := $params.breakpoints }}
{{ $class := $params.class }}
{{ $crossorigin := $params.crossorigin | default "anonymous" }}
{{ $densities := $params.densities }}
{{ $fetchpriority := $params.fetchpriority }}
{{ $fingerprint := $params.fingerprint | default true }}
{{ $format := $params.format }}
{{ $height := $params.height }}
{{ $loading := $params.loading | default "lazy" }}
{{ $maxheight := $params.maxheight }}
{{ $maxwidth := $params.maxwidth }}
{{ $method := $params.method }}
{{ $options := $params.options }}
{{ $process := $params.process }}
{{ $page := $params.page }}
{{ $referrerpolicy := $params.referrerpolicy | default "no-referrer" }}
{{ $resource := $params.resource }}
{{ $sizes := $params.sizes }}
{{ $src := $params.src }}
{{ $style := $params.style }}
{{ $srcset := $params.srcset }}
{{ $title := $params.title }}
{{ $width := $params.width }}
{{ if and (not $src) (not $resource) }}
{{ errorf "paige/img: no src or resource" }}
{{ if and (not $resource) (not $src) }}
{{ errorf "paige/img: no resource or src" }}
{{ end }}
{{ if and $breakpoints $densities }}
{{ errorf "paige/img: cannot generate both breakpoint and density image sets" }}
{{ end }}
{{ $intrinsicheight := $height }}
@@ -31,34 +36,170 @@
{{ $resource = partial "paige/resource.html" (dict "page" $page "url" $src) }}
{{ end }}
{{ with $resource }}
{{ if and (not $method) (not $options) $format }}
{{ $method = "resize" }}
{{ $options = printf "%dx%d %s" $resource.Width $resource.Height $format }}
{{ end }}
{{ if $resource }}
{{ $method := "" }}
{{ $newresource := $resource }}
{{ $oldresource := $resource }}
{{ $options := slice }}
{{ $quality := "" }}
{{ $size := "" }}
{{ if $process }}
{{ if ne $process true }}
{{ range split (lower $process) " " }}
{{ if or (eq . "crop") (eq . "fill") (eq . "fit") (eq . "resize") }}
{{ $method = . }}
{{ else }}
{{ with findRE `\d+x\d+|\d+x|x\d+` . 1 }}
{{ $size = index . 0 }}
{{ else }}
{{ with findRE `q\d+` . 1 }}
{{ $quality = index . 0 }}
{{ else }}
{{ $options = $options | append . }}
{{ end }}
{{ end }}
{{ end }}
{{ end }}
{{ end }}
{{ $options = delimit $options " " }}
{{ if not $method }}
{{ $method = "resize" }}
{{ end }}
{{ if not $size }}
{{ $size = print $oldresource.Width "x" $oldresource.Height }}
{{ end }}
{{ $newoptions := print $size " " $quality " " $options }}
{{ if and $method $options }}
{{ if eq $method "crop" }}
{{ $resource = $resource.Crop $options }}
{{ $newresource = $oldresource.Crop $newoptions }}
{{ else if eq $method "fill" }}
{{ $resource = $resource.Fill $options }}
{{ $newresource = $oldresource.Fill $newoptions }}
{{ else if eq $method "fit" }}
{{ $resource = $resource.Fit $options }}
{{ $newresource = $oldresource.Fit $newoptions }}
{{ else if eq $method "resize" }}
{{ $resource = $resource.Resize $options }}
{{ $newresource = $oldresource.Resize $newoptions }}
{{ else }}
{{ errorf "paige/img: invalid method: %q" $method }}
{{ end }}
{{ end }}
{{ $intrinsicheight = $resource.Height }}
{{ $intrinsicwidth = $resource.Width }}
{{ if $fingerprint }}
{{ $resource = $resource | fingerprint }}
{{ $newresource = $newresource | fingerprint }}
{{ end }}
{{ $src = $resource.RelPermalink }}
{{ $intrinsicheight = $newresource.Height }}
{{ $intrinsicwidth = $newresource.Width }}
{{ $src = $newresource.RelPermalink }}
{{ if and (not $sizes) (not $srcset) }}
{{ $partialresource := "" }}
{{ if and $process (or $breakpoints $densities) (ne $method "resize") }}
{{ $partialoptions := print $size " q100 " $options }}
{{ if eq $method "crop" }}
{{ $partialresource = $oldresource.Crop $partialoptions }}
{{ else if eq $method "fill" }}
{{ $partialresource = $oldresource.Fill $partialoptions }}
{{ else if eq $method "fit" }}
{{ $partialresource = $oldresource.Fit $partialoptions }}
{{ end }}
{{ end }}
{{ if $densities }}
{{ $densities = split $densities " " }}
{{ $srcset = slice }}
{{ $parseddensities := slice }}
{{ range $densities }}
{{ with findRE `^(\d+(\.\d+)?x|\.\d+x)$` . 1 }}
{{ $parseddensities = $parseddensities | append (strings.TrimSuffix "x" (index . 0) | float) }}
{{ else }}
{{ errorf "paige/img: invalid pixel density: %q" . }}
{{ end }}
{{ end }}
{{ $parseddensities = $parseddensities | uniq | sort }}
{{ if lt (len $parseddensities) 2 }}
{{ errorf "paige/img: must have at least two unique pixel densities" }}
{{ end }}
{{ $base := 0 }}
{{ $maxdensity := index $parseddensities (sub (len $parseddensities) 1) }}
{{ with $partialresource }}
{{ $base = div .Width $maxdensity | math.Round | int }}
{{ else }}
{{ $base = div $newresource.Width $maxdensity | math.Round | int }}
{{ end }}
{{ range $parseddensities }}
{{ if eq . $maxdensity }}
{{ continue }}
{{ end }}
{{ $imagewidth := mul $base . | math.Round | int }}
{{ $resized := "" }}
{{ with $partialresource }}
{{ $resized = .Resize (print $imagewidth "x " $quality " " $options) }}
{{ else }}
{{ $resized = $newresource.Resize (print $imagewidth "x q100 " $options) }}
{{ end }}
{{ if $fingerprint }}
{{ $resized = $resized | fingerprint }}
{{ end }}
{{ $srcset = $srcset | append (printf "%s %gx" $resized.RelPermalink .) }}
{{ end }}
{{ $srcset = $srcset | append (printf "%s %gx" $newresource.RelPermalink $maxdensity) }}
{{ $srcset = delimit $srcset ", " | string }}
{{ else if $breakpoints }}
{{ $sizes = slice }}
{{ $srcset = slice }}
{{ $maxwidth := 0 }}
{{ range slice (slice 550 576) (slice 696 768) (slice 936 992) (slice 1116 1200) (slice 1296 1400) }}
{{ $imagewidth := index . 0 }}
{{ $viewwidth := index . 1 }}
{{ if ge $imagewidth $newresource.Width }}
{{ continue }}
{{ end }}
{{ $resized := "" }}
{{ with $partialresource }}
{{ $resized = .Resize (print $imagewidth "x " $quality " " $options) }}
{{ else }}
{{ $resized = $newresource.Resize (print $imagewidth "x q100 " $options) }}
{{ end }}
{{ if $fingerprint }}
{{ $resized = $resized | fingerprint }}
{{ end }}
{{ $maxwidth = math.Max $maxwidth $imagewidth }}
{{ $sizes = $sizes | append (printf "(max-width: %dpx) %dpx" $viewwidth $imagewidth) }}
{{ $srcset = $srcset | append (printf "%s %dw" $resized.RelPermalink $imagewidth) }}
{{ end }}
{{ $sizes = $sizes | append (print $maxwidth "px") }}
{{ $sizes = delimit $sizes ", " }}
{{ $srcset = delimit $srcset ", " }}
{{ end }}
{{ end }}
{{ else }}
{{ $src = relLangURL $src }}
{{ end }}
@@ -71,30 +212,24 @@
{{ $height = "auto" }}
{{ end }}
{{ $styles := slice }}
{{ $style := slice }}
{{ if $height }}
{{ $styles = $styles | append (print "height: " $height) }}
{{ $style = $style | append (print "height: " $height) }}
{{ end }}
{{ if $maxheight }}
{{ $styles = $styles | append (print "max-height: " $maxheight) }}
{{ $style = $style | append (print "max-height: " $maxheight) }}
{{ end }}
{{ if $maxwidth }}
{{ $styles = $styles | append (print "max-width: " $maxwidth) }}
{{ $style = $style | append (print "max-width: " $maxwidth) }}
{{ end }}
{{ if $width }}
{{ $styles = $styles | append (print "width: " $width) }}
{{ $style = $style | append (print "width: " $width) }}
{{ end }}
{{ $styles = delimit $styles "; " }}
{{ $style = delimit $style "; " }}
{{ if $style }}
{{ $style = print $style "; " $styles }}
{{ else }}
{{ $style = $styles }}
{{ end }}
<img {{ with $alt }} alt="{{ . }}" {{ end }} {{ with $class }} class="{{ . }}" {{ end }} crossorigin="{{ $crossorigin }}" {{ with $fetchpriority }} fetchpriority="{{ . }}" {{ end }} {{ with $intrinsicheight }} height="{{ . }}" {{ end }} loading="{{ $loading }}" referrerpolicy="{{ $referrerpolicy }}" src="{{ $src }}" {{ with $style }} style="{{ . | safeCSS }}" {{ end }} {{ with $title }} title="{{ . }}" {{ end }} {{ with $intrinsicwidth }} width="{{ . }}" {{ end }}>
<img {{ with $alt }} alt="{{ . }}" {{ end }} {{ with $class }} class="{{ . }}" {{ end }} crossorigin="{{ $crossorigin }}" {{ with $fetchpriority }} fetchpriority="{{ . }}" {{ end }} {{ with $intrinsicheight }} height="{{ . }}" {{ end }} loading="{{ $loading }}" referrerpolicy="{{ $referrerpolicy }}" {{ with $sizes }} sizes="{{ . }}" {{ end }} src="{{ $src }}" {{ with $srcset }} {{ printf `srcset="%s"` . | safeHTMLAttr }} {{ end }} {{ with $style }} style="{{ . | safeCSS }}" {{ end }} {{ with $title }} title="{{ . }}" {{ end }} {{ with $intrinsicwidth }} width="{{ . }}" {{ end }}>