Add maxheight, maxwidth params
This commit is contained in:
Will Faught
16
README.md
16
README.md
@@ -586,6 +586,8 @@ The `paige/image` shortcode provides a figure with a centered image.
|
||||
caption="My caption"
|
||||
height="10rem"
|
||||
link="https://github.com/willfaught/paige"
|
||||
maxheight="10rem"
|
||||
maxwidth="10rem"
|
||||
method="resize"
|
||||
options="550x webp picture Lanczos"
|
||||
src="me.jpg"
|
||||
@@ -604,6 +606,10 @@ Parameters:
|
||||
<dd>Optional. Image height in pixels.</dd>
|
||||
<dt><code>link</code></dt>
|
||||
<dd>Optional. URL. Image link.</dd>
|
||||
<dt><code>maxheight</code></dt>
|
||||
<dd>Optional. Maximum image height.</dd>
|
||||
<dt><code>maxwidth</code></dt>
|
||||
<dd>Optional. Maximum image width.</dd>
|
||||
<dt><code>method</code></dt>
|
||||
<dd>Optional. 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 <a href="https://gohugo.io/content-management/image-processing/#image-processing-methods">Image Processing Methods</a>.</dd>
|
||||
<dt><code>options</code></dt>
|
||||
@@ -631,6 +637,8 @@ The `paige/gallery` shortcode provides a figure with a centered list of images.
|
||||
height="10rem"
|
||||
images="*.jpg"
|
||||
justify="center"
|
||||
maxheight="10rem"
|
||||
maxwidth="10rem"
|
||||
method="resize"
|
||||
options="550x webp picture Lanczos"
|
||||
type="list"
|
||||
@@ -655,13 +663,17 @@ Parameters:
|
||||
<dt><code>caption</code></dt>
|
||||
<dd>Optional. Markdown. Descriptive text that appears centered below the images.</dd>
|
||||
<dt><code>height</code></dt>
|
||||
<dd>Optional. Height of the image or images.</dd>
|
||||
<dd>Optional. Height of the image or images in pixels.</dd>
|
||||
<dt><code>image</code></dt>
|
||||
<dd>Optional. Page, site, or remote image glob. Only used in the inner content of this shortcode.</dd>
|
||||
<dt><code>images</code></dt>
|
||||
<dd>Optional. Unnamed argument. Page, site, or remote images glob. Defaults to all image page resources.</dd>
|
||||
<dt><code>justify</code></dt>
|
||||
<dd>Optional. Flexbox main axis space distribution. Must be <code>start</code>, <code>center</code>, <code>end</code>, etc. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content"><code>justify-content</code></a>.</dd>
|
||||
<dt><code>maxheight</code></dt>
|
||||
<dd>Optional. Maximum height of the image or images.</dd>
|
||||
<dt><code>maxwidth</code></dt>
|
||||
<dd>Optional. Maximum width of the image or images.</dd>
|
||||
<dt><code>method</code></dt>
|
||||
<dd>Optional. Hugo image processing method. Must be <code>crop</code>, <code>fill</code>, <code>fit</code>, or <code>resize</code>. Default is <code>resize</code>. Must be specified with <code>options</code>. See <a href="https://gohugo.io/content-management/image-processing/#image-processing-methods">Image Processing Methods</a>.</dd>
|
||||
<dt><code>options</code></dt>
|
||||
@@ -669,7 +681,7 @@ Parameters:
|
||||
<dt><code>type</code></dt>
|
||||
<dd>Optional. Type of layout. Must be <code>grid</code> or <code>list</code>. Default is <code>list</code>.</dd>
|
||||
<dt><code>width</code></dt>
|
||||
<dd>Optional. Width of the image or images.</dd>
|
||||
<dd>Optional. Width of the image or images in pixels.</dd>
|
||||
</dl>
|
||||
|
||||
## Customization
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
{{ $caption := .caption }}
|
||||
{{ $height := .height }}
|
||||
{{ $link := .link }}
|
||||
{{ $maxheight := .maxheight }}
|
||||
{{ $maxwidth := .maxwidth }}
|
||||
{{ $method := .method }}
|
||||
{{ $options := .options }}
|
||||
{{ $page := .page }}
|
||||
@@ -20,6 +22,8 @@
|
||||
"alt" $alt
|
||||
"class" $class
|
||||
"height" $height
|
||||
"maxheight" $maxheight
|
||||
"maxwidth" $maxwidth
|
||||
"method" $method
|
||||
"options" $options
|
||||
"page" $page
|
||||
|
||||
@@ -51,4 +51,52 @@
|
||||
{{ $src = $resource.RelPermalink }}
|
||||
{{ 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 }}
|
||||
|
||||
{{ if $height }}
|
||||
{{ with printf "height: %v" $height }}
|
||||
{{ if $style }}
|
||||
{{ $style = printf "%v; %v" $style . }}
|
||||
{{ else }}
|
||||
{{ $style = . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ if $maxheight }}
|
||||
{{ with printf "max-height: %v" $maxheight }}
|
||||
{{ if $style }}
|
||||
{{ $style = printf "%v; %v" $style . }}
|
||||
{{ else }}
|
||||
{{ $style = . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ if $maxwidth }}
|
||||
{{ with printf "max-width: %v" $maxwidth }}
|
||||
{{ if $style }}
|
||||
{{ $style = printf "%v; %v" $style . }}
|
||||
{{ else }}
|
||||
{{ $style = . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ if $width }}
|
||||
{{ with printf "width: %v" $width }}
|
||||
{{ if $style }}
|
||||
{{ $style = printf "%v; %v" $style . }}
|
||||
{{ else }}
|
||||
{{ $style = . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ 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 }}>
|
||||
|
||||
@@ -4,6 +4,8 @@
|
||||
{{ $image := .Get "image" }}
|
||||
{{ $images := .Get 0 | default (.Get "images") }}
|
||||
{{ $justify := .Get "justify" | default "center" }}
|
||||
{{ $maxheight := .Get "maxheight" }}
|
||||
{{ $maxwidth := .Get "maxwidth" }}
|
||||
{{ $method := .Get "method" | default "resize" }}
|
||||
{{ $options := .Get "options" | default "550x webp picture Lanczos" }}
|
||||
{{ $type := .Get "type" | default "rows" }}
|
||||
@@ -17,13 +19,17 @@
|
||||
|
||||
{{ partial "paige/image-figure.html" (dict
|
||||
"caption" $caption
|
||||
"height" $height
|
||||
"link" $resource.RelPermalink
|
||||
"maxheight" $maxheight
|
||||
"maxwidth" $maxwidth
|
||||
"method" $method
|
||||
"options" $options
|
||||
"page" .Page
|
||||
"resource" $resource
|
||||
"src" $image
|
||||
"table" true
|
||||
"width" $width
|
||||
) }}
|
||||
{{ else }}
|
||||
{{ $inner := chomp .Inner }}
|
||||
@@ -52,29 +58,39 @@
|
||||
{{ else }}
|
||||
{{ range $resources }}
|
||||
{{ partial "paige/image-figure.html" (dict
|
||||
"height" $height
|
||||
"link" .RelPermalink
|
||||
"maxheight" $maxheight
|
||||
"maxwidth" $maxwidth
|
||||
"method" $method
|
||||
"options" $options
|
||||
"resource" .
|
||||
"table" true
|
||||
"width" $width
|
||||
) }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ else if eq $type "rows" }}
|
||||
{{ if not (or $height $maxheight) }}
|
||||
{{ $maxheight = $maxheight | default "10rem" }}
|
||||
{{ end }}
|
||||
<div class="align-items-{{ $align }} column-gap-3 d-flex{{ with $caption }} figure-img{{ end }} flex-wrap justify-content-{{ $justify }} row-gap-3">
|
||||
{{ with $inner }}
|
||||
{{ . }}
|
||||
{{ else }}
|
||||
{{ range $resources }}
|
||||
{{ partial "paige/image-figure.html" (dict
|
||||
"height" "10rem"
|
||||
"height" $height
|
||||
"link" .RelPermalink
|
||||
"maxheight" $maxheight
|
||||
"maxwidth" $maxwidth
|
||||
"method" $method
|
||||
"options" $options
|
||||
"resource" .
|
||||
"table" true
|
||||
"width" $width
|
||||
) }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
{{ $caption := .Get "caption" }}
|
||||
{{ $height := .Get "height" }}
|
||||
{{ $link := .Get "link" }}
|
||||
{{ $maxheight := .Get "maxheight" }}
|
||||
{{ $maxwidth := .Get "maxwidth" }}
|
||||
{{ $method := .Get "method" }}
|
||||
{{ $options := .Get "options" }}
|
||||
{{ $src := .Get 0 | default (.Get "src") }}
|
||||
@@ -13,6 +15,8 @@
|
||||
"caption" $caption
|
||||
"height" $height
|
||||
"link" $link
|
||||
"maxheight" $maxheight
|
||||
"maxwidth" $maxwidth
|
||||
"method" $method
|
||||
"options" $options
|
||||
"src" $src
|
||||
|
||||
Reference in New Issue
Block a user