Change image shortcode to use div

exampleSite/content/shortcodes/image.md

@@ -19,345 +19,261 @@ Paige provides a `paige/image` shortcode for displaying an image.
 Code:
 
 ```go-html-template
-<p>
 {{</* paige/image alt="Landscape" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}}
-</p>
 ```
 
 Result:
 
-<p>
 {{< paige/image alt="Landscape" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
-</p>
 
 ## Breakpoints parameter
 
 Code:
 
 ```go-html-template
-<p>
 {{</* paige/image breakpoints=true src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}}
-</p>
 ```
 
 Result:
 
-<p>
 {{< paige/image breakpoints=true src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
-</p>
 
 ## Class parameter
 
 Code:
 
 ```go-html-template
-<p>
 {{</* paige/image class="rounded-5" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}}
-</p>
 ```
 
 Result:
 
-<p>
 {{< paige/image class="rounded-5" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
-</p>
 
 ## Densities parameter
 
 Code:
 
 ```go-html-template
-<p>
 {{</* paige/image densities="1x 2x 3x" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}}
-</p>
 ```
 
 Result:
 
-<p>
 {{< paige/image densities="1x 2x 3x" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
-</p>
 
 ## Fetchpriority parameter
 
 Code:
 
 ```go-html-template
-<p>
 {{</* paige/image fetchpriority="high" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}}
-</p>
 ```
 
 Result:
 
-<p>
 {{< paige/image fetchpriority="high" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
-</p>
 
 ## Height parameter
 
 Code:
 
 ```go-html-template
-<p>
 {{</* paige/image height="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}}
-</p>
 ```
 
 Result:
 
-<p>
 {{< paige/image height="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
-</p>
 
 ## Link parameter
 
 Code:
 
 ```go-html-template
-<p>
 {{</* paige/image link="https://github.com/willfaught/paige" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}}
-</p>
 ```
 
 Result:
 
-<p>
 {{< paige/image link="https://github.com/willfaught/paige" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
-</p>
 
 ## Linked parameter
 
 Code:
 
 ```go-html-template
-<p>
 {{</* paige/image linked="unprocessed" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}}
-</p>
 ```
 
 Result:
 
-<p>
 {{< paige/image linked="unprocessed" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
-</p>
 
 ---
 
 Code:
 
 ```go-html-template
-<p>
 {{</* paige/image linked="default" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}}
-</p>
 ```
 
 Result:
 
-<p>
 {{< paige/image linked="default" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
-</p>
 
 ---
 
 Code:
 
 ```go-html-template
-<p>
 {{</* paige/image linked="r180" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}}
-</p>
 ```
 
 Result:
 
-<p>
 {{< paige/image linked="r180" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
-</p>
 
 ## Loading parameter
 
 Code:
 
 ```go-html-template
-<p>
 {{</* paige/image loading="eager" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}}
-</p>
 ```
 
 Result:
 
-<p>
 {{< paige/image loading="eager" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
-</p>
 
 ## Maxheight parameter
 
 Code:
 
 ```go-html-template
-<p>
 {{</* paige/image maxheight="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}}
-</p>
 ```
 
 Result:
 
-<p>
 {{< paige/image maxheight="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
-</p>
 
 ## Maxwidth parameter
 
 Code:
 
 ```go-html-template
-<p>
 {{</* paige/image maxwidth="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}}
-</p>
 ```
 
 Result:
 
-<p>
 {{< paige/image maxwidth="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
-</p>
 
 ## Process parameter
 
 Code:
 
 ```go-html-template
-<p>
 {{</* paige/image process="default" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}}
-</p>
 ```
 
 Result:
 
-<p>
 {{< paige/image process="default" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
-</p>
 
 ---
 
 Code:
 
 ```go-html-template
-<p>
 {{</* paige/image process="550x lanczos picture resize webp" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}}
-</p>
 ```
 
 Result:
 
-<p>
 {{< paige/image process="550x lanczos picture resize webp" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
-</p>
 
 ## Sizes parameter
 
 Code:
 
 ```go-html-template
-<p>
 {{</* paige/image
     sizes="(max-width: 576px) 550px, (max-width: 992px) 936px, 1296px"
     src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}}
-</p>
 ```
 
 Result:
 
-<p>
 {{< paige/image
     sizes="(max-width: 576px) 550px, (max-width: 992px) 936px, 1296px"
     src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
-</p>
 
 ## Src parameter
 
 Code:
 
 ```go-html-template
-<p>
 {{</* paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}}
-</p>
 ```
 
 Result:
 
-<p>
 {{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
-</p>
 
 ## Srcset parameter
 
 Code:
 
 ```go-html-template
-<p>
 {{</* paige/image
     src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296"
     srcset="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=550 550w,
         https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=936 936w" */>}}
-</p>
 ```
 
 Result:
 
-<p>
 {{< paige/image
     src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296"
     srcset="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=550 550w, https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=936 936w" >}}
-</p>
 
 ## Style parameter
 
 Code:
 
 ```go-html-template
-<p>
 {{</* paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" style="filter: grayscale(100%)" */>}}
-</p>
 ```
 
 Result:
 
-<p>
 {{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" style="filter: grayscale(100%)" >}}
-</p>
 
 ## Title parameter
 
 Code:
 
 ```go-html-template
-<p>
 {{</* paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" title="Landscape" */>}}
-</p>
 ```
 
 Result:
 
-<p>
 {{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" title="Landscape" >}}
-</p>
 
 ## Width parameter
 
 Code:
 
 ```go-html-template
-<p>
 {{</* paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" width="50%" */>}}
-</p>
 ```
 
 Result:
 
-<p>
 {{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" width="50%" >}}
-</p>
 
 ## Figure
 

layouts/partials/paige/image.html

@@ -288,4 +288,4 @@
     {{ $content = partial "paige/a.html" (dict "content" $content "href" $link "page" $page) }}
 {{ end }}
 
-<span class="paige-image">{{ $content }}</span>
+{{ $content }}

layouts/partials/paige/style.html

@@ -25,10 +25,6 @@ body, html {
     margin-bottom: 0;
 }
 
-.paige-figure .paige-image {
-    margin-bottom: 0;
-}
-
 .paige-figure .paige-quote > blockquote {
     margin-bottom: 0;
 }

layouts/shortcodes/paige/image.html

@@ -17,6 +17,7 @@
 {{ $title := .Get "title" }}
 {{ $width := .Get "width" }}
 
+<div class="paige-image">
     {{ partial "paige/image.html" (dict
         "alt" $alt
         "breakpoints" $breakpoints
@@ -38,3 +39,4 @@
         "title" $title
         "width" $width
     ) }}
+</div>