diff --git a/README.md b/README.md index 1d59033c..13058b7e 100644 --- a/README.md +++ b/README.md @@ -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:
align
Optional. String. Cross axis alignment. Must be baseline, center, end, start, or stretch.
+
fetchpriority
+
Optional. String. Must be high or low.
height
Optional. String. CSS value. Image height.
images
Optional. Position 0. String. Page, site, or remote images glob. Default is all image page resources.
justify
Optional. String. Main axis space distribution. Must be around, between, center, end, evenly, or start.
+
linked
+
Optional. String. Hugo image processing methods and options, 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 unprocessed, it is unprocessed. If it is default, the default options are used.
+
loading
+
Optional. String. Must be eager or lazy (default).
maxheight
Optional. String. CSS value. Maximum image height.
maxwidth
Optional. String. CSS value. Maximum image width.
process
-
Optional. String or boolean. If a string, it is the Hugo image processing methods and options, 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.
+
Optional. String. Hugo image processing methods and options, 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 default, the default options are used.
type
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 grid or list. Default is list.
width
@@ -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:
Optional. String. Plain text. Image alt.
breakpoints
Optional. Boolean. Whether to generate copies of the image sized to each Bootstrap breakpoint. Must not be set with densities, sizes, or srcset.
+
class
+
Optional. String. Class attribute value.
densities
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 1x 2x, 1x 1.5x 2x 2.5x 3x, and 0.5x 1.33x 6x 10x. Must not be set with breakpoints, sizes, or srcset.
+
fetchpriority
+
Optional. String. Must be high or low.
height
Optional. String. CSS value. Image height.
link
-
Optional. String. URL. Image link.
+
Optional. String. URL. Image link. Must not use with linked.
+
linked
+
Optional. String. Hugo image processing methods and options, 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 unprocessed, it is unprocessed. If it is default, the default options are used. Must not use with link.
+
loading
+
Optional. String. Must be eager or lazy (default).
maxheight
Optional. String. CSS value. Image maximum height.
maxwidth
Optional. String. CSS value. Image maximum width.
process
-
Optional. String or boolean. If a string, it is the Hugo image processing methods and options, 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.
+
Optional. String. Hugo image processing methods and options, 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 default, the default options are used.
sizes
Optional. String. Image sizes. Must not be set with breakpoints or densities.
src
@@ -554,7 +576,8 @@ Parameters: The `paige/quote` shortcode provides a figure with a quotation. ``` -{{< paige/quote cite="" >}} +{{< paige/quote + cite="" >}} {{< /paige/quote >}} ``` diff --git a/exampleSite/content/shortcodes/gallery/index.md b/exampleSite/content/shortcodes/gallery/index.md index 187b23ca..ab25878a 100644 --- a/exampleSite/content/shortcodes/gallery/index.md +++ b/exampleSite/content/shortcodes/gallery/index.md @@ -65,6 +65,30 @@ Result: {{< paige/image height="10rem" src="2-2.jpg" >}} {{< /paige/gallery >}} +## Fetchpriority parameter + +Code: + +```go-text-template +{{}} +``` + +Result: + +{{< paige/gallery fetchpriority="high" images="*-2.jpg" />}} + +--- + +Code: + +```go-text-template +{{}} +``` + +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 +{{}} +``` + +Result: + +{{< paige/gallery images="*-2.jpg" linked="unprocessed" />}} + +--- + +Code: + +```go-text-template +{{}} +``` + +Result: + +{{< paige/gallery images="*-2.jpg" linked="default" />}} + +--- + +Code: + +```go-text-template +{{}} +``` + +Result: + +{{< paige/gallery images="*-2.jpg" linked="r180" />}} + +## Loading parameter + +Code: + +```go-text-template +{{}} +``` + +Result: + +{{< paige/gallery images="*-2.jpg" loading="eager" />}} + +--- + +Code: + +```go-text-template +{{}} +``` + +Result: + +{{< paige/gallery images="*-2.jpg" loading="lazy" />}} + ## Maxheight parameter Code: @@ -202,12 +286,24 @@ Result: Code: ```go-text-template -{{}} +{{}} +``` + +Result: + +{{< paige/gallery images="*-2.jpg" process="default" />}} + +--- + +Code: + +```go-text-template +{{}} ``` Result: -{{< paige/gallery images="*-2.jpg" process="300x300 center crop lanczos picture r90 webp" />}} +{{< paige/gallery images="*-2.jpg" process="300x300 center crop lanczos picture r180 webp" />}} ## Type diff --git a/exampleSite/content/shortcodes/image.md b/exampleSite/content/shortcodes/image.md index e6fccd89..5e7e584c 100644 --- a/exampleSite/content/shortcodes/image.md +++ b/exampleSite/content/shortcodes/image.md @@ -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 +{{}} +``` + +Result: + +{{< paige/image class="rounded-5" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}} + +## Fetchpriority parameter + +Code: + +```go-text-template +{{}} +``` + +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 +{{}} +``` + +Result: + +{{< paige/image linked="unprocessed" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}} + +--- + +Code: + +```go-text-template +{{}} +``` + +Result: + +{{< paige/image linked="default" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}} + +--- + +Code: + +```go-text-template +{{}} +``` + +Result: + +{{< paige/image linked="r180" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}} + +## Loading parameter + +Code: + +```go-text-template +{{}} +``` + +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 +{{}} +``` + +Result: + +{{< paige/image process="default" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}} + +--- + +Code: + ```go-text-template {{}} ``` diff --git a/layouts/partials/paige/image.html b/layouts/partials/paige/image.html new file mode 100644 index 00000000..0919cea8 --- /dev/null +++ b/layouts/partials/paige/image.html @@ -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 }} + +
{{ $content }}
diff --git a/layouts/partials/paige/img.html b/layouts/partials/paige/img.html index 3053169b..b0b8480e 100644 --- a/layouts/partials/paige/img.html +++ b/layouts/partials/paige/img.html @@ -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 "; " }} - -{{ . }} +{{ . }} diff --git a/layouts/shortcodes/paige/gallery.html b/layouts/shortcodes/paige/gallery.html index 5d07bb52..55a81d71 100644 --- a/layouts/shortcodes/paige/gallery.html +++ b/layouts/shortcodes/paige/gallery.html @@ -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 }}
- {{ 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 }} @@ -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 }} diff --git a/layouts/shortcodes/paige/image.html b/layouts/shortcodes/paige/image.html index 0883f4e3..71e4f2da 100644 --- a/layouts/shortcodes/paige/image.html +++ b/layouts/shortcodes/paige/image.html @@ -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 }} - -
{{ $content }}