Add breakpoints, densities, process, sizes, srcset params

README.md

@@ -524,15 +524,17 @@ The `paige/image` shortcode provides a figure with an image.
 
 ```
 {{< paige/image
-    alt="My alt" >}}
+    alt="My alt"
-    format="webp"
+    breakpoints=true
+    densities="1x 1.5x 2x 2.5x 3x"
     height="10rem"
     link="https://github.com/willfaught/paige"
     maxheight="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"
+    srcset="pic-123.jpg 123w, pic-456.jpg 456w"
     title="My title"
     width="10rem"
 >}}
@@ -545,8 +547,10 @@ Parameters:
 <dl>
     <dt><code>alt</code></dt>
     <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>
     <dd>Optional. String. CSS value. Image height.</dd>
     <dt><code>link</code></dt>
@@ -555,12 +559,14 @@ Parameters:
     <dd>Optional. String. CSS value. Image maximum height.</dd>
     <dt><code>maxwidth</code></dt>
     <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>
     <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>
     <dd>Optional. String. Plain text. Image title.</dd>
     <dt><code>width</code></dt>

layouts/partials/paige/img.html

@@ -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 }}
+{{ $process := $params.process }}
-{{ $options := $params.options }}
 {{ $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) }}
+{{ 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 }}
 
 {{ $intrinsicheight := $height }}
@@ -31,34 +36,170 @@
     {{ $resource = partial "paige/resource.html" (dict "page" $page "url" $src) }}
 {{ 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 }}
+    {{ $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 }}
 
-    {{ if and $method $options }}
+        {{ $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 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 }}
+<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 }}>
-    {{ $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 }}>

layouts/shortcodes/paige/image.html

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