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
master
Will Faught 2 years ago
parent d2d5a5802a
commit c3796b9c50
3 changed files with 195 additions and 50 deletions
Show Stats Download Patch File Download Diff File

26
README.md
Unescape Escape View File

@ -524,15 +524,17 @@ The `paige/image` shortcode provides a figure with an image.
``` ```
{{< paige/image {{< paige/image
alt="My alt" >}} alt="My alt"
format="webp" breakpoints=true
densities="1x 1.5x 2x 2.5x 3x"
height="10rem" height="10rem"
link="https://github.com/willfaught/paige" link="https://github.com/willfaught/paige"
maxheight="10rem" maxheight="10rem"
maxwidth="10rem" maxwidth="10rem"
method="resize" process="resize 550x webp picture lanczos"
options="550x webp picture Lanczos" sizes="(max-width: 123px) 123px, 456px"
src="me.jpg" src="me.jpg"
srcset="pic-123.jpg 123w, pic-456.jpg 456w"
title="My title" title="My title"
width="10rem" width="10rem"
>}} >}}
@ -545,8 +547,10 @@ Parameters:
<dl> <dl>
<dt><code>alt</code></dt> <dt><code>alt</code></dt>
<dd>Optional. String. Plain text. Image alt.</dd> <dd>Optional. String. Plain text. Image alt.</dd>
<dt><code>format</code></dt> <dt><code>breakpoints</code></dt>
<dd>Optional. String. Image format. Must be <code>bmp</code>, <code>gif</code>, <code>jpg</code>, <code>png</code>, <code>tiff</code>, or <code>webp</code>. Must not be used with <code>method</code> or <code>options</code>.</dd> <dd>Optional. Boolean. Whether to generate copies of the image sized to each Bootstrap breakpoint.</dd>
<dt><code>densities</code></dt>
<dd>Optional. String. Float numbers suffixed with an "x", delimited by spaces. The pixel densities of the image to generate. There must be at least two. The largest density is the size of the original image. Examples: <code>1x 2x</code>, <code>1x 1.5x 2x 2.5x 3x</code>, <code>0.5x 1.33x 6x 10x</code>. Must not be set with <code>breakpoints</code>, <code>sizes</code>, or <code>srcset</code>.</dd>
<dt><code>height</code></dt> <dt><code>height</code></dt>
<dd>Optional. String. CSS value. Image height.</dd> <dd>Optional. String. CSS value. Image height.</dd>
<dt><code>link</code></dt> <dt><code>link</code></dt>
@ -555,12 +559,14 @@ Parameters:
<dd>Optional. String. CSS value. Image maximum height.</dd> <dd>Optional. String. CSS value. Image maximum height.</dd>
<dt><code>maxwidth</code></dt> <dt><code>maxwidth</code></dt>
<dd>Optional. String. CSS value. Image maximum width.</dd> <dd>Optional. String. CSS value. Image maximum width.</dd>
<dt><code>method</code></dt> <dt><code>process</code></dt>
<dd>Optional. String. Hugo image processing method. Must be <code>crop</code>, <code>fill</code>, <code>fit</code>, or <code>resize</code>. Must be specified with <code>options</code>. See the <a href="https://gohugo.io/content-management/image-processing/#image-processing-methods">methods</a>.</dd> <dd>Optional. String or boolean. If a string, it is the Hugo image processing <a href="https://gohugo.io/content-management/image-processing/#image-processing-methods">methods</a> and <a href="https://gohugo.io/content-management/image-processing/#image-processing-options">options</a>, mixed together. If no method is specified, resize is used. If no image dimensions are given, the originals are used. If a boolean that is true, the Hugo image processing method resize is used, and the default Hugo image processing options are used.</dd>
<dt><code>options</code></dt> <dt><code>sizes</code></dt>
<dd>Optional. String. Hugo image processing options. Must be specified with <code>method</code>. See the <a href="https://gohugo.io/content-management/image-processing/#image-processing-options">options</a>.</dd> <dd>Optional. String. The img sizes attribute value.</dd>
<dt><code>src</code></dt> <dt><code>src</code></dt>
<dd>Required. Position 0. String. URL. Image source.</dd> <dd>Required. Position 0. String. URL. Image source.</dd>
<dt><code>srcset</code></dt>
<dd>Optional. String. The img srcset attribute value.</dd>
<dt><code>title</code></dt> <dt><code>title</code></dt>
<dd>Optional. String. Plain text. Image title.</dd> <dd>Optional. String. Plain text. Image title.</dd>
<dt><code>width</code></dt> <dt><code>width</code></dt>

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

@ -1,27 +1,32 @@
{{ $params := . }} {{ $params := . }}
{{ $alt := $params.alt }} {{ $alt := $params.alt }}
{{ $breakpoints := $params.breakpoints }}
{{ $class := $params.class }} {{ $class := $params.class }}
{{ $crossorigin := $params.crossorigin | default "anonymous" }} {{ $crossorigin := $params.crossorigin | default "anonymous" }}
{{ $densities := $params.densities }}
{{ $fetchpriority := $params.fetchpriority }} {{ $fetchpriority := $params.fetchpriority }}
{{ $fingerprint := $params.fingerprint | default true }} {{ $fingerprint := $params.fingerprint | default true }}
{{ $format := $params.format }}
{{ $height := $params.height }} {{ $height := $params.height }}
{{ $loading := $params.loading | default "lazy" }} {{ $loading := $params.loading | default "lazy" }}
{{ $maxheight := $params.maxheight }} {{ $maxheight := $params.maxheight }}
{{ $maxwidth := $params.maxwidth }} {{ $maxwidth := $params.maxwidth }}
{{ $method := $params.method }} {{ $process := $params.process }}
{{ $options := $params.options }}
{{ $page := $params.page }} {{ $page := $params.page }}
{{ $referrerpolicy := $params.referrerpolicy | default "no-referrer" }} {{ $referrerpolicy := $params.referrerpolicy | default "no-referrer" }}
{{ $resource := $params.resource }} {{ $resource := $params.resource }}
{{ $sizes := $params.sizes }}
{{ $src := $params.src }} {{ $src := $params.src }}
{{ $style := $params.style }} {{ $srcset := $params.srcset }}
{{ $title := $params.title }} {{ $title := $params.title }}
{{ $width := $params.width }} {{ $width := $params.width }}
{{ if and (not $src) (not $resource) }} {{ if and (not $resource) (not $src) }}
{{ errorf "paige/img: no src or resource" }} {{ errorf "paige/img: no resource or src" }}
{{ end }}
{{ if and $breakpoints $densities }}
{{ errorf "paige/img: cannot generate both breakpoint and density image sets" }}
{{ end }} {{ end }}
{{ $intrinsicheight := $height }} {{ $intrinsicheight := $height }}
@ -31,34 +36,170 @@
{{ $resource = partial "paige/resource.html" (dict "page" $page "url" $src) }} {{ $resource = partial "paige/resource.html" (dict "page" $page "url" $src) }}
{{ end }} {{ end }}
{{ with $resource }} {{ if $resource }}
{{ if and (not $method) (not $options) $format }} {{ $method := "" }}
{{ $method = "resize" }} {{ $newresource := $resource }}
{{ $options = printf "%dx%d %s" $resource.Width $resource.Height $format }} {{ $oldresource := $resource }}
{{ end }} {{ $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" }} {{ if eq $method "crop" }}
{{ $resource = $resource.Crop $options }} {{ $newresource = $oldresource.Crop $newoptions }}
{{ else if eq $method "fill" }} {{ else if eq $method "fill" }}
{{ $resource = $resource.Fill $options }} {{ $newresource = $oldresource.Fill $newoptions }}
{{ else if eq $method "fit" }} {{ else if eq $method "fit" }}
{{ $resource = $resource.Fit $options }} {{ $newresource = $oldresource.Fit $newoptions }}
{{ else if eq $method "resize" }} {{ else if eq $method "resize" }}
{{ $resource = $resource.Resize $options }} {{ $newresource = $oldresource.Resize $newoptions }}
{{ else }} {{ else }}
{{ errorf "paige/img: invalid method: %q" $method }} {{ errorf "paige/img: invalid method: %q" $method }}
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ $intrinsicheight = $resource.Height }}
{{ $intrinsicwidth = $resource.Width }}
{{ if $fingerprint }} {{ if $fingerprint }}
{{ $resource = $resource | fingerprint }} {{ $newresource = $newresource | fingerprint }}
{{ end }} {{ 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 }} {{ else }}
{{ $src = relLangURL $src }} {{ $src = relLangURL $src }}
{{ end }} {{ end }}
@ -71,30 +212,24 @@
{{ $height = "auto" }} {{ $height = "auto" }}
{{ end }} {{ end }}
{{ $styles := slice }} {{ $style := slice }}
{{ if $height }} {{ if $height }}
{{ $styles = $styles | append (print "height: " $height) }} {{ $style = $style | append (print "height: " $height) }}
{{ end }} {{ end }}
{{ if $maxheight }} {{ if $maxheight }}
{{ $styles = $styles | append (print "max-height: " $maxheight) }} {{ $style = $style | append (print "max-height: " $maxheight) }}
{{ end }} {{ end }}
{{ if $maxwidth }} {{ if $maxwidth }}
{{ $styles = $styles | append (print "max-width: " $maxwidth) }} {{ $style = $style | append (print "max-width: " $maxwidth) }}
{{ end }} {{ end }}
{{ if $width }} {{ if $width }}
{{ $styles = $styles | append (print "width: " $width) }} {{ $style = $style | append (print "width: " $width) }}
{{ end }} {{ 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 }}>

16
layouts/shortcodes/paige/image.html
Unescape Escape View File

@ -1,12 +1,14 @@
{{ $alt := .Get "alt" }} {{ $alt := .Get "alt" }}
{{ $format := .Get "format" }} {{ $breakpoints := .Get "breakpoints" }}
{{ $densities := .Get "densities" }}
{{ $height := .Get "height" }} {{ $height := .Get "height" }}
{{ $link := .Get "link" }} {{ $link := .Get "link" }}
{{ $maxheight := .Get "maxheight" }} {{ $maxheight := .Get "maxheight" }}
{{ $maxwidth := .Get "maxwidth" }} {{ $maxwidth := .Get "maxwidth" }}
{{ $method := .Get "method" }} {{ $process := .Get "process" }}
{{ $options := .Get "options" }} {{ $sizes := .Get "sizes" }}
{{ $src := .Get 0 | default (.Get "src") }} {{ $src := .Get 0 | default (.Get "src") }}
{{ $srcset := .Get "srcset" }}
{{ $title := .Get "title" }} {{ $title := .Get "title" }}
{{ $width := .Get "width" }} {{ $width := .Get "width" }}
@ -16,15 +18,17 @@
{{ $content := partial "paige/img.html" (dict {{ $content := partial "paige/img.html" (dict
"alt" $alt "alt" $alt
"breakpoints" $breakpoints
"class" "img-fluid" "class" "img-fluid"
"format" $format "densities" $densities
"height" $height "height" $height
"maxheight" $maxheight "maxheight" $maxheight
"maxwidth" $maxwidth "maxwidth" $maxwidth
"method" $method "process" $process
"options" $options
"page" .Page "page" .Page
"sizes" $sizes
"src" $src "src" $src
"srcset" $srcset
"title" $title "title" $title
"width" $width "width" $width
) }} ) }}

Write Preview
Loading…
Cancel
Save