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

Add layouts/partials/paige/image.html

Browse Source
This commit is contained in:
Will Faught
2023-04-23 21:10:35 -07:00
parent e6d5010efe
commit a79d337674
7 changed files with 518 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
README.md
View File

@@ -38,6 +38,7 @@ It's a versatile canvas that serves most web needs.
- Image pixel densities
- Image shortcode
- Image size breakpoints
- Image thumbnails
- Landing page
- Languages
- Light color scheme
@@ -434,9 +435,12 @@ The `paige/gallery` shortcode provides a figure with a collection of images.
```
{{< paige/gallery
align=""
fetchpriority=""
height=""
images=""
justify=""
linked=""
loading=""
maxheight=""
maxwidth=""
process=""
@@ -453,18 +457,24 @@ Parameters:
<dl>
<dt><code>align</code></dt>
<dd>Optional. String. Cross axis alignment. Must be <code>baseline</code>, <code>center</code>, <code>end</code>, <code>start</code>, or <code>stretch</code>.</dd>
<dt><code>fetchpriority</code></dt>
<dd>Optional. String. Must be <code>high</code> or <code>low</code>.</dd>
<dt><code>height</code></dt>
<dd>Optional. String. CSS value. Image height.</dd>
<dt><code>images</code></dt>
<dd>Optional. Position 0. String. Page, site, or remote images glob. Default is all image page resources.</dd>
<dt><code>justify</code></dt>
<dd>Optional. String. Main axis space distribution. Must be <code>around</code>, <code>between</code>, <code>center</code>, <code>end</code>, <code>evenly</code>, or <code>start</code>.</dd>
<dt><code>linked</code></dt>
<dd>Optional. String. 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, for the linked image. If no method is specified, resize is used. If no image dimensions are specified, the originals are used. If it is <code>unprocessed</code>, it is unprocessed. If it is <code>default</code>, the <a href="https://gohugo.io/content-management/image-processing/#processing-options">default options</a> are used.</dd>
<dt><code>loading</code></dt>
<dd>Optional. String. Must be <code>eager</code> or <code>lazy</code> (default).</dd>
<dt><code>maxheight</code></dt>
<dd>Optional. String. CSS value. Maximum image height.</dd>
<dt><code>maxwidth</code></dt>
<dd>Optional. String. CSS value. Maximum image width.</dd>
<dt><code>process</code></dt>
<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>
<dd>Optional. String. 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, for the displayed image. If no method is specified, resize is used. If no image dimensions are specified, the originals are used. If it is <code>default</code>, the <a href="https://gohugo.io/content-management/image-processing/#processing-options">default options</a> are used.</dd>
<dt><code>type</code></dt>
<dd>Optional. String. Type of layout. Grid and list layouts use the horizontal axis as the main axis, and the vertical axis as the cross axis. Must be <code>grid</code> or <code>list</code>. Default is <code>list</code>.</dd>
<dt><code>width</code></dt>
@@ -503,9 +513,13 @@ The `paige/image` shortcode provides a figure with an image.
{{< paige/image
alt=""
breakpoints=false
class=""
densities=""
fetchpriority=""
height=""
link=""
linked=""
loading=""
maxheight=""
maxwidth=""
process=""
@@ -525,18 +539,26 @@ Parameters:
<dd>Optional. String. Plain text. Image alt.</dd>
<dt><code>breakpoints</code></dt>
<dd>Optional. Boolean. Whether to generate copies of the image sized to each Bootstrap breakpoint. Must not be set with <code>densities</code>, <code>sizes</code>, or <code>srcset</code>.</dd>
<dt><code>class</code></dt>
<dd>Optional. String. Class attribute value.</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 matches the original image. Examples are <code>1x 2x</code>, <code>1x 1.5x 2x 2.5x 3x</code>, and <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>fetchpriority</code></dt>
<dd>Optional. String. Must be <code>high</code> or <code>low</code>.</dd>
<dt><code>height</code></dt>
<dd>Optional. String. CSS value. Image height.</dd>
<dt><code>link</code></dt>
<dd>Optional. String. URL. Image link.</dd>
<dd>Optional. String. URL. Image link. Must not use with <code>linked</code>.</dd>
<dt><code>linked</code></dt>
<dd>Optional. String. 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, for the linked image. If no method is specified, resize is used. If no image dimensions are specified, the originals are used. If it is <code>unprocessed</code>, it is unprocessed. If it is <code>default</code>, the <a href="https://gohugo.io/content-management/image-processing/#processing-options">default options</a> are used. Must not use with <code>link</code>.</dd>
<dt><code>loading</code></dt>
<dd>Optional. String. Must be <code>eager</code> or <code>lazy</code> (default).</dd>
<dt><code>maxheight</code></dt>
<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>process</code></dt>
<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>
<dd>Optional. String. 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, for the displayed image. If no method is specified, resize is used. If no image dimensions are specified, the originals are used. If it is <code>default</code>, the <a href="https://gohugo.io/content-management/image-processing/#processing-options">default options</a> are used.</dd>
<dt><code>sizes</code></dt>
<dd>Optional. String. Image sizes. Must not be set with <code>breakpoints</code> or <code>densities</code>.</dd>
<dt><code>src</code></dt>
@@ -554,7 +576,8 @@ Parameters:
The `paige/quote` shortcode provides a figure with a quotation.
```
{{< paige/quote cite="" >}}
{{< paige/quote
cite="" >}}
{{< /paige/quote >}}
```

100
exampleSite/content/shortcodes/gallery/index.md
View File

@@ -65,6 +65,30 @@ Result:
{{< paige/image height="10rem" src="2-2.jpg" >}}
{{< /paige/gallery >}}
## Fetchpriority parameter
Code:
```go-text-template
{{</* paige/gallery fetchpriority="high" images="*-2.jpg" /*/>}}
```
Result:
{{< paige/gallery fetchpriority="high" images="*-2.jpg" />}}
---
Code:
```go-text-template
{{</* paige/gallery fetchpriority="low" images="*-2.jpg" /*/>}}
```
Result:
{{< paige/gallery fetchpriority="low" images="*-2.jpg" />}}
## Height parameter
Code:
@@ -149,6 +173,66 @@ Result:
{{< paige/gallery images="*-2.jpg" justify="end" />}}
## Linked parameter
Code:
```go-text-template
{{</* paige/gallery images="*-2.jpg" linked="unprocessed" /*/>}}
```
Result:
{{< paige/gallery images="*-2.jpg" linked="unprocessed" />}}
---
Code:
```go-text-template
{{</* paige/gallery images="*-2.jpg" linked="default" /*/>}}
```
Result:
{{< paige/gallery images="*-2.jpg" linked="default" />}}
---
Code:
```go-text-template
{{</* paige/gallery images="*-2.jpg" linked="r180" /*/>}}
```
Result:
{{< paige/gallery images="*-2.jpg" linked="r180" />}}
## Loading parameter
Code:
```go-text-template
{{</* paige/gallery images="*-2.jpg" loading="eager" /*/>}}
```
Result:
{{< paige/gallery images="*-2.jpg" loading="eager" />}}
---
Code:
```go-text-template
{{</* paige/gallery images="*-2.jpg" loading="lazy" /*/>}}
```
Result:
{{< paige/gallery images="*-2.jpg" loading="lazy" />}}
## Maxheight parameter
Code:
@@ -202,12 +286,24 @@ Result:
Code:
```go-text-template
{{</* paige/gallery images="*-2.jpg" process="300x300 center crop lanczos picture r90 webp" /*/>}}
{{</* paige/gallery images="*-2.jpg" process="default" /*/>}}
```
Result:
{{< paige/gallery images="*-2.jpg" process="300x300 center crop lanczos picture r90 webp" />}}
{{< paige/gallery images="*-2.jpg" process="default" />}}
---
Code:
```go-text-template
{{</* paige/gallery images="*-2.jpg" process="300x300 center crop lanczos picture r180 webp" /*/>}}
```
Result:
{{< paige/gallery images="*-2.jpg" process="300x300 center crop lanczos picture r180 webp" />}}
## Type

84
exampleSite/content/shortcodes/image.md
View File

@@ -23,6 +23,30 @@ Result:
{{< paige/image alt="Landscape" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
## Class parameter
Code:
```go-text-template
{{</* paige/image class="rounded-5" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}}
```
Result:
{{< paige/image class="rounded-5" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
## Fetchpriority parameter
Code:
```go-text-template
{{</* paige/image fetchpriority="high" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}}
```
Result:
{{< paige/image fetchpriority="high" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
## Height parameter
Code:
@@ -47,6 +71,54 @@ Result:
{{< paige/image link="https://github.com/willfaught/paige" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
## Linked parameter
Code:
```go-text-template
{{</* paige/image linked="unprocessed" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}}
```
Result:
{{< paige/image linked="unprocessed" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
---
Code:
```go-text-template
{{</* paige/image linked="default" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}}
```
Result:
{{< paige/image linked="default" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
---
Code:
```go-text-template
{{</* paige/image linked="r180" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}}
```
Result:
{{< paige/image linked="r180" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
## Loading parameter
Code:
```go-text-template
{{</* paige/image loading="eager" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}}
```
Result:
{{< paige/image loading="eager" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
## Maxheight parameter
Code:
@@ -75,6 +147,18 @@ Result:
Code:
```go-text-template
{{</* paige/image process="default" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}}
```
Result:
{{< paige/image process="default" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
---
Code:
```go-text-template
{{</* paige/image process="550x lanczos picture resize webp" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}}
```

280
layouts/partials/paige/image.html Normal file
View File

@@ -0,0 +1,280 @@
{{ $params := . }}
{{ $alt := $params.alt }}
{{ $breakpoints := $params.breakpoints }}
{{ $class := $params.class }}
{{ $densities := $params.densities }}
{{ $fetchpriority := $params.fetchpriority }}
{{ $height := $params.height }}
{{ $link := $params.link }}
{{ $linked := $params.linked }}
{{ $loading := $params.loading }}
{{ $maxheight := $params.maxheight }}
{{ $maxwidth := $params.maxwidth }}
{{ $process := $params.process }}
{{ $resource := $params.resource }}
{{ $sizes := $params.sizes }}
{{ $src := $params.src }}
{{ $srcset := $params.srcset }}
{{ $title := $params.title }}
{{ $width := $params.width }}
{{ $intrinsicheight := "" }}
{{ $intrinsicwidth := "" }}
{{ if $class }}
{{ $class = split $class " " }}
{{ else }}
{{ $class = slice }}
{{ end }}
{{ $class = $class | append "img-fluid" | uniq | sort }}
{{ $class = delimit $class " " }}
{{ if and (or $height $maxheight) (not (or $maxwidth $width)) }}
{{ $width = "auto" }}
{{ end }}
{{ if and (or $maxwidth $width) (not (or $height $maxheight)) }}
{{ $height = "auto" }}
{{ end }}
{{ $style := slice }}
{{ if $height }}
{{ $style = $style | append (print "height: " $height) }}
{{ end }}
{{ if $maxheight }}
{{ $style = $style | append (print "max-height: " $maxheight) }}
{{ end }}
{{ if $maxwidth }}
{{ $style = $style | append (print "max-width: " $maxwidth) }}
{{ end }}
{{ if $width }}
{{ $style = $style | append (print "width: " $width) }}
{{ end }}
{{ $style = delimit $style "; " }}
{{ if and (not $resource) $src }}
{{ $resource = partial "paige/resource.html" (dict "page" page "url" $src) }}
{{ end }}
{{ if $resource }}
{{ $method := "" }}
{{ $options := slice }}
{{ $quality := "" }}
{{ $size := "" }}
{{ $smallerresource := $resource }}
{{ if $process }}
{{ range split (lower (cond (eq $process "default") "" $process)) " " }}
{{ if or (eq . "crop") (eq . "fill") (eq . "fit") (eq . "resize") }}
{{ $method = . }}
{{ else }}
{{ with findRE `q\d+` . 1 }}
{{ $quality = index . 0 }}
{{ else }}
{{ with findRE `\d+x\d+|\d+x|x\d+` . 1 }}
{{ $size = index . 0 }}
{{ else }}
{{ $options = $options | append . }}
{{ end }}
{{ end }}
{{ end }}
{{ end }}
{{ $options = delimit $options " " }}
{{ if not $method }}
{{ $method = "resize" }}
{{ end }}
{{ if not $size }}
{{ $size = print $resource.Width "x" $resource.Height }}
{{ end }}
{{ $smalleroptions := print $size " " $quality " " $options }}
{{ if eq $method "crop" }}
{{ $smallerresource = $resource.Crop $smalleroptions }}
{{ else if eq $method "fill" }}
{{ $smallerresource = $resource.Fill $smalleroptions }}
{{ else if eq $method "fit" }}
{{ $smallerresource = $resource.Fit $smalleroptions }}
{{ else if eq $method "resize" }}
{{ $smallerresource = $resource.Resize $smalleroptions }}
{{ end }}
{{ end }}
{{ $smallerresource = $smallerresource | fingerprint }}
{{ $intrinsicheight = $smallerresource.Height }}
{{ $intrinsicwidth = $smallerresource.Width }}
{{ $src = $smallerresource.RelPermalink }}
{{ if and (not $sizes) (not $srcset) }}
{{ $partialresource := "" }}
{{ if and $method (or $breakpoints $densities) (ne $method "resize") }}
{{ $partialoptions := print $size " q100 " $options }}
{{ if eq $method "crop" }}
{{ $partialresource = $resource.Crop $partialoptions }}
{{ else if eq $method "fill" }}
{{ $partialresource = $resource.Fill $partialoptions }}
{{ else if eq $method "fit" }}
{{ $partialresource = $resource.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 "layouts/partials/paige/image.html: invalid pixel density: %q" . }}
{{ end }}
{{ end }}
{{ $parseddensities = $parseddensities | uniq | sort }}
{{ if lt (len $parseddensities) 2 }}
{{ errorf "layouts/partials/paige/image.html: must have at least two unique pixel densities" }}
{{ end }}
{{ $base := 0 }}
{{ $maxdensity := index $parseddensities (sub (len $parseddensities) 1) }}
{{ with $partialresource }}
{{ $base = div .Width $maxdensity }}
{{ else }}
{{ $base = div $smallerresource.Width $maxdensity }}
{{ 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 = $smallerresource.Resize (print $imagewidth "x q100 " $options) }}
{{ end }}
{{ $resized = $resized | fingerprint }}
{{ $srcset = $srcset | append (printf "%s %gx" $resized.RelPermalink .) }}
{{ end }}
{{ $srcset = $srcset | append (printf "%s %gx" $smallerresource.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 $smallerresource.Width }}
{{ continue }}
{{ end }}
{{ $resized := "" }}
{{ with $partialresource }}
{{ $resized = .Resize (print $imagewidth "x " $quality " " $options) }}
{{ else }}
{{ $resized = $smallerresource.Resize (print $imagewidth "x q100 " $options) }}
{{ end }}
{{ $resized = $resized | fingerprint }}
{{ $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 }}
{{ $content := partial "paige/img.html" (dict
"alt" $alt
"class" $class
"fetchpriority" $fetchpriority
"height" $intrinsicheight
"loading" $loading
"sizes" $sizes
"src" $src
"srcset" $srcset
"style" $style
"title" $title
"width" $intrinsicwidth
) }}
{{ if $linked }}
{{ if ne $linked "unprocessed" }}
{{ $method := "" }}
{{ $options := slice }}
{{ $size := "" }}
{{ range split (lower (cond (eq $linked "default") "" $linked)) " " }}
{{ 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 }}
{{ $options = $options | append . }}
{{ end }}
{{ end }}
{{ end }}
{{ $options = delimit $options " " }}
{{ if not $method }}
{{ $method = "resize" }}
{{ end }}
{{ if not $size }}
{{ $size = print $resource.Width "x" $resource.Height }}
{{ end }}
{{ $options = print $size " " $options }}
{{ if eq $method "crop" }}
{{ $resource = $resource.Crop $options }}
{{ else if eq $method "fill" }}
{{ $resource = $resource.Fill $options }}
{{ else if eq $method "fit" }}
{{ $resource = $resource.Fit $options }}
{{ else if eq $method "resize" }}
{{ $resource = $resource.Resize $options }}
{{ end }}
{{ end }}
{{ $resource = $resource | fingerprint }}
{{ $content = partial "paige/a.html" (dict "content" $content "href" $resource.RelPermalink) }}
{{ else if $link }}
{{ $content = partial "paige/a.html" (dict "content" $content "href" $link) }}
{{ end }}
<div class="paige-image">{{ $content }}</div>

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

@@ -1,235 +1,17 @@
{{ $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 }}
{{ $height := $params.height }}
{{ $loading := $params.loading | default "lazy" }}
{{ $maxheight := $params.maxheight }}
{{ $maxwidth := $params.maxwidth }}
{{ $process := $params.process }}
{{ $page := $params.page }}
{{ $referrerpolicy := $params.referrerpolicy | default "no-referrer" }}
{{ $resource := $params.resource }}
{{ $sizes := $params.sizes }}
{{ $src := $params.src }}
{{ $srcset := $params.srcset }}
{{ $style := $params.style }}
{{ $title := $params.title }}
{{ $width := $params.width }}
{{ 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 }}
{{ $intrinsicwidth := $width }}
{{ if not $resource }}
{{ $resource = partial "paige/resource.html" (dict "page" $page "url" $src) }}
{{ 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 eq $method "crop" }}
{{ $newresource = $oldresource.Crop $newoptions }}
{{ else if eq $method "fill" }}
{{ $newresource = $oldresource.Fill $newoptions }}
{{ else if eq $method "fit" }}
{{ $newresource = $oldresource.Fit $newoptions }}
{{ else if eq $method "resize" }}
{{ $newresource = $oldresource.Resize $newoptions }}
{{ else }}
{{ errorf "paige/img: invalid method: %q" $method }}
{{ end }}
{{ end }}
{{ if $fingerprint }}
{{ $newresource = $newresource | fingerprint }}
{{ end }}
{{ $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 }}
{{ if and (or $height $maxheight) (not (or $maxwidth $width)) }}
{{ $width = "auto" }}
{{ end }}
{{ if and (or $maxwidth $width) (not (or $height $maxheight)) }}
{{ $height = "auto" }}
{{ end }}
{{ $style := slice }}
{{ if $height }}
{{ $style = $style | append (print "height: " $height) }}
{{ end }}
{{ if $maxheight }}
{{ $style = $style | append (print "max-height: " $maxheight) }}
{{ end }}
{{ if $maxwidth }}
{{ $style = $style | append (print "max-width: " $maxwidth) }}
{{ end }}
{{ if $width }}
{{ $style = $style | append (print "width: " $width) }}
{{ end }}
{{ $style = delimit $style "; " }}
<img {{ with $alt }} alt="{{ . }}" {{ end }} {{ with $class }} class="{{ . }}" {{ end }} crossorigin="{{ $crossorigin }}" {{ with $fetchpriority }} fetchpriority="{{ . }}" {{ end }} {{ with $intrinsicheight }} height="{{ . }}" {{ end }} {{ if ne $loading "eager" }} loading="{{ $loading }}" {{ end }} 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 }}>
<img {{ with $alt }} alt="{{ . }}" {{ end }} {{ with $class }} class="{{ . }}" {{ end }} crossorigin="{{ $crossorigin }}" {{ if ne $fetchpriority "auto" }} fetchpriority="{{ $fetchpriority }}" {{ end }} {{ with $height }} height="{{ . }}" {{ end }} {{ if ne $loading "eager" }} loading="{{ $loading }}" {{ end }} 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 $width }} width="{{ . }}" {{ end }}>

45
layouts/shortcodes/paige/gallery.html
View File

@@ -1,7 +1,10 @@
{{ $align := .Get "align" | default "center" }}
{{ $fetchpriority := .Get "fetchpriority" }}
{{ $height := .Get "height" }}
{{ $images := .Get 0 | default (.Get "images") }}
{{ $justify := .Get "justify" | default "center" }}
{{ $linked := .Get "linked" }}
{{ $loading := .Get "loading" }}
{{ $maxheight := .Get "maxheight" }}
{{ $maxwidth := .Get "maxwidth" }}
{{ $process := .Get "process" }}
@@ -40,17 +43,16 @@
{{ else }}
{{ range $resources }}
<div class="col">
{{ partial "paige/a.html" (dict
"content" (partial "paige/img.html" (dict
"class" "img-fluid"
"height" $height
"maxheight" $maxheight
"maxwidth" $maxwidth
"process" $process
"resource" .
"width" $width
))
"href" .RelPermalink
{{ partial "paige/image.html" (dict
"fetchpriority" $fetchpriority
"height" $height
"linked" $linked
"loading" $loading
"maxheight" $maxheight
"maxwidth" $maxwidth
"process" $process
"resource" .
"width" $width
) }}
</div>
{{ end }}
@@ -63,17 +65,16 @@
{{ . }}
{{ else }}
{{ range $resources }}
{{ partial "paige/a.html" (dict
"content" (partial "paige/img.html" (dict
"class" "img-fluid"
"height" $height
"maxheight" $maxheight
"maxwidth" $maxwidth
"process" $process
"resource" .
"width" $width
))
"href" .RelPermalink
{{ partial "paige/image.html" (dict
"fetchpriority" $fetchpriority
"height" $height
"linked" $linked
"loading" $loading
"maxheight" $maxheight
"maxwidth" $maxwidth
"process" $process
"resource" .
"width" $width
) }}
{{ end }}
{{ end }}

28
layouts/shortcodes/paige/image.html
View File

@@ -5,6 +5,7 @@
{{ $fetchpriority := .Get "fetchpriority" }}
{{ $height := .Get "height" }}
{{ $link := .Get "link" }}
{{ $linked := .Get "linked" }}
{{ $loading := .Get "loading" }}
{{ $maxheight := .Get "maxheight" }}
{{ $maxwidth := .Get "maxwidth" }}
@@ -15,43 +16,22 @@
{{ $title := .Get "title" }}
{{ $width := .Get "width" }}
{{ if not $src }}
{{ errorf "paige/image: no src" }}
{{ end }}
{{ if $class }}
{{ $class = split $class " " }}
{{ else }}
{{ $class = slice }}
{{ end }}
{{ $class = $class | append "img-fluid" | uniq | sort }}
{{ $class = delimit $class " " }}
{{ $content := partial "paige/img.html" (dict
{{ partial "paige/image.html" (dict
"alt" $alt
"breakpoints" $breakpoints
"class" $class
"densities" $densities
"fetchpriority" $fetchpriority
"height" $height
"link" $link
"linked" $linked
"loading" $loading
"maxheight" $maxheight
"maxwidth" $maxwidth
"process" $process
"page" .Page
"sizes" $sizes
"src" $src
"srcset" $srcset
"title" $title
"width" $width
) }}
{{ if $link }}
{{ $content = partial "paige/a.html" (dict
"content" $content
"href" $link
) }}
{{ end }}
<div class="paige-image">{{ $content }}</div>