diff --git a/README.md b/README.md index f3c1ab6c..3f70a7f3 100644 --- a/README.md +++ b/README.md @@ -436,13 +436,14 @@ The `paige/image` shortcode provides a figure with an image. ``` {{< paige/image alt="My alt" >}} - caption="My caption" + height="10rem" link="https://github.com/willfaught/paige" method="resize" options="550x webp picture Lanczos" raw=false src="me.jpg" title="My title" + width="10rem" >}} ``` @@ -453,8 +454,8 @@ Parameters:
alt
Optional. String. Plain text. Image alt.
-
caption
-
Optional. String. Markdown. Descriptive text below the image.
+
height
+
Optional. String. CSS value. Image height.
link
Optional. String. URL. Image link.
method
@@ -467,10 +468,10 @@ Parameters:
Required. Position 0. String. URL. Image source.
title
Optional. String. Plain text. Image title.
+
width
+
Optional. String. CSS value. Image width.
-It has the other parameters of the `paige/figure` shortcode. - ### Gallery The `paige/gallery` shortcode provides a figure with a collection of images. diff --git a/exampleSite/content/shortcodes/image.md b/exampleSite/content/shortcodes/image.md index 794450b8..e072a6fb 100644 --- a/exampleSite/content/shortcodes/image.md +++ b/exampleSite/content/shortcodes/image.md @@ -11,44 +11,126 @@ Paige provides a `paige/image` shortcode for displaying an image. +## Alt parameter + Code: ```go-text-template -{{}} +{{}} ``` Result: -{{< paige/image src="landscape.webp" >}} +{{< paige/image alt="Landscape" src="landscape.webp" >}} ---- +## Height parameter + +Code: + +```go-text-template +{{}} +``` + +Result: + +{{< paige/image height="10rem" src="landscape.webp" >}} + +## Link parameter + +Code: + +```go-text-template +{{}} +``` + +Result: + +{{< paige/image link="https://github.com/willfaught/paige" src="landscape.webp" >}} + +## Method and options parameters Code: ```go-text-template -{{}} +{{}} ``` Result: -{{< paige/image src="landscape.webp" caption="Landscape" width="50%" link="https://github.com/willfaught/paige" >}} +{{< paige/image link="https://github.com/willfaught/paige" method="resize" options="550x webp picture Lanczos" src="landscape.webp" >}} + +## Raw parameter + +Code: + +```go-text-template +{{}} +``` + +Result: + +{{< paige/image raw=false src="https://picsum.photos/1296/600.webp" >}} --- Code: ```go-text-template -{{}} +{{}} +``` + +Result: -{{}} +{{< paige/image raw=true src="https://picsum.photos/1296/600.webp" >}} -Michael was having brunch with Sally Sitwell at a restaurant called Skip Church's Bistro. In addition to brunch, the restaurant was known for an item on the menu called the "Skip's Scramble", an omelet that contained everything on the menu. Do not order the Skip's Scramble. You might enjoy this. Oh. Em. Gee. That's amazing. It feels good to be back in a queen! I need a tea to give my dingle less tingle. Teamocil. Heyyyyyy Uncle Father Oscar. Let's see some bananas and nuts! So Ann, the question is, do you want a man or a boy? I know how I would answer. Never once touched my per diem. I'd go to Craft Service, get some raw veggies, bacon, Cup-A-Soup…baby, I got a stew goin'. You might enjoy this. Oh. Em. Gee. That's amazing. I've always been deeply passionate about nature. Perhaps you remember Neuterfest? I'll never forget your wedding. But I did finally get into Dad's pants. Although I had to have the crotch taken in a little bit. She's a girl, I need to teach her how to be a woman. Within her lies a queen. Let me out that queen. There are dozens of us! Dozens! Oh please. They didn't sneak into this country to be your friends. No one's called him Baby Buster since high school. I mean, it's one banana, Michael. What could it cost, ten dollars? "Circumvent." It means "to go around." Gob: The old "reach around." Mom always taught us to curl up in a ball and remain motionless when confronted. You're Killing Me, Buster. +## Src parameter + +Code: + +```go-text-template +{{}} ``` Result: -{{< paige/image src="landscape.webp" caption="Landscape" width="25%" link="https://github.com/willfaught/paige" float="start" >}} +{{< paige/image src="landscape.webp" >}} + +## Title parameter + +Code: -{{< paige/image src="landscape.webp" caption="Landscape" width="25%" link="https://github.com/willfaught/paige" float="end" >}} +```go-text-template +{{}} +``` + +Result: + +{{< paige/image src="landscape.webp" title="Landscape" >}} + +## Width parameter + +Code: -Michael was having brunch with Sally Sitwell at a restaurant called Skip Church's Bistro. In addition to brunch, the restaurant was known for an item on the menu called the "Skip's Scramble", an omelet that contained everything on the menu. Do not order the Skip's Scramble. You might enjoy this. Oh. Em. Gee. That's amazing. It feels good to be back in a queen! I need a tea to give my dingle less tingle. Teamocil. Heyyyyyy Uncle Father Oscar. Let's see some bananas and nuts! So Ann, the question is, do you want a man or a boy? I know how I would answer. Never once touched my per diem. I'd go to Craft Service, get some raw veggies, bacon, Cup-A-Soup…baby, I got a stew goin'. You might enjoy this. Oh. Em. Gee. That's amazing. I've always been deeply passionate about nature. Perhaps you remember Neuterfest? I'll never forget your wedding. But I did finally get into Dad's pants. Although I had to have the crotch taken in a little bit. She's a girl, I need to teach her how to be a woman. Within her lies a queen. Let me out that queen. There are dozens of us! Dozens! Oh please. They didn't sneak into this country to be your friends. No one's called him Baby Buster since high school. I mean, it's one banana, Michael. What could it cost, ten dollars? "Circumvent." It means "to go around." Gob: The old "reach around." Mom always taught us to curl up in a ball and remain motionless when confronted. You're Killing Me, Buster. +```go-text-template +{{}} +``` + +Result: + +{{< paige/image src="landscape.webp" width="50%" >}} + +## Figure + +Code: + +```go-text-template +{{}} +{{}} +{{}} +``` + +Result: + +{{< paige/figure caption="Landscape" >}} +{{< paige/image src="landscape.webp" >}} +{{< /paige/figure >}} diff --git a/layouts/partials/paige/style.html b/layouts/partials/paige/style.html index ab87687a..7becb774 100644 --- a/layouts/partials/paige/style.html +++ b/layouts/partials/paige/style.html @@ -47,6 +47,10 @@ body, html { margin-bottom: 0; } +.paige-figure .paige-image { + margin-bottom: 0; +} + .paige-figure .paige-quote > blockquote { margin-bottom: 0; } @@ -69,6 +73,10 @@ body, html { opacity: 1; } +.paige-image { + margin-bottom: 1rem; +} + {{ with $page.Param "paige.max_width" }} #paige-root { max-width: {{ . | safeCSS }}; diff --git a/layouts/shortcodes/paige/image.html b/layouts/shortcodes/paige/image.html index e29d4acb..9979ac67 100644 --- a/layouts/shortcodes/paige/image.html +++ b/layouts/shortcodes/paige/image.html @@ -1,36 +1,31 @@ {{ $alt := .Get "alt" }} -{{ $caption := .Get "caption" }} -{{ $float := .Get "float" }} -{{ $height := .Get "height" }} -{{ $horizontal := .Get "horizontal" }} {{ $link := .Get "link" }} -{{ $maxwidth := .Get "maxwidth" }} +{{ $height := .Get "height" }} {{ $method := .Get "method" }} -{{ $number := .Get "number" }} -{{ $numbered := .Get "numbered" }} {{ $options := .Get "options" }} {{ $raw := .Get "raw" }} {{ $src := .Get 0 | default (.Get "src") }} {{ $title := .Get "title" }} -{{ $vertical := .Get "vertical" }} {{ $width := .Get "width" }} -{{ partial "paige/image-figure.html" (dict +{{ $content := partial "paige/img.html" (dict "alt" $alt - "caption" $caption - "float" $float - "gap" 2 + "class" "img-fluid" "height" $height - "horizontal" $horizontal - "link" $link - "maxwidth" $maxwidth "method" $method - "number" $number - "numbered" $numbered "options" $options + "page" .Page "raw" $raw "src" $src "title" $title - "vertical" $vertical "width" $width ) }} + +{{ if $link }} + {{ $content = partial "paige/a.html" (dict + "content" $content + "href" $link + ) }} +{{ end }} + +
{{ $content }}