From 46afb013bc41c4047d75ef20e4be4c082dc49914 Mon Sep 17 00:00:00 2001 From: Will Faught Date: Mon, 3 Jun 2024 23:17:35 -0700 Subject: [PATCH] Change image shortcode to use div --- exampleSite/content/shortcodes/image.md | 84 ------------------------- layouts/partials/paige/image.html | 2 +- layouts/partials/paige/style.html | 4 -- layouts/shortcodes/paige/image.html | 44 ++++++------- 4 files changed, 24 insertions(+), 110 deletions(-) diff --git a/exampleSite/content/shortcodes/image.md b/exampleSite/content/shortcodes/image.md index f95afd16..69dbf3e2 100644 --- a/exampleSite/content/shortcodes/image.md +++ b/exampleSite/content/shortcodes/image.md @@ -19,345 +19,261 @@ Paige provides a `paige/image` shortcode for displaying an image. Code: ```go-html-template -

{{}} -

``` Result: -

{{< paige/image alt="Landscape" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}} -

## Breakpoints parameter Code: ```go-html-template -

{{}} -

``` Result: -

{{< paige/image breakpoints=true src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}} -

## Class parameter Code: ```go-html-template -

{{}} -

``` Result: -

{{< paige/image class="rounded-5" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}} -

## Densities parameter Code: ```go-html-template -

{{}} -

``` Result: -

{{< paige/image densities="1x 2x 3x" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}} -

## Fetchpriority parameter Code: ```go-html-template -

{{}} -

``` Result: -

{{< paige/image fetchpriority="high" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}} -

## Height parameter Code: ```go-html-template -

{{}} -

``` Result: -

{{< paige/image height="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}} -

## Link parameter Code: ```go-html-template -

{{}} -

``` Result: -

{{< paige/image link="https://github.com/willfaught/paige" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}} -

## Linked parameter Code: ```go-html-template -

{{}} -

``` Result: -

{{< paige/image linked="unprocessed" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}} -

--- Code: ```go-html-template -

{{}} -

``` Result: -

{{< paige/image linked="default" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}} -

--- Code: ```go-html-template -

{{}} -

``` Result: -

{{< paige/image linked="r180" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}} -

## Loading parameter Code: ```go-html-template -

{{}} -

``` Result: -

{{< paige/image loading="eager" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}} -

## Maxheight parameter Code: ```go-html-template -

{{}} -

``` Result: -

{{< paige/image maxheight="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}} -

## Maxwidth parameter Code: ```go-html-template -

{{}} -

``` Result: -

{{< paige/image maxwidth="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}} -

## Process parameter Code: ```go-html-template -

{{}} -

``` Result: -

{{< paige/image process="default" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}} -

--- Code: ```go-html-template -

{{}} -

``` Result: -

{{< paige/image process="550x lanczos picture resize webp" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}} -

## Sizes parameter Code: ```go-html-template -

{{}} -

``` Result: -

{{< paige/image sizes="(max-width: 576px) 550px, (max-width: 992px) 936px, 1296px" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}} -

## Src parameter Code: ```go-html-template -

{{}} -

``` Result: -

{{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}} -

## Srcset parameter Code: ```go-html-template -

{{}} -

``` Result: -

{{< 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" >}} -

## Style parameter Code: ```go-html-template -

{{}} -

``` Result: -

{{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" style="filter: grayscale(100%)" >}} -

## Title parameter Code: ```go-html-template -

{{}} -

``` Result: -

{{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" title="Landscape" >}} -

## Width parameter Code: ```go-html-template -

{{}} -

``` Result: -

{{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" width="50%" >}} -

## Figure diff --git a/layouts/partials/paige/image.html b/layouts/partials/paige/image.html index 21a0d081..77b3348f 100644 --- a/layouts/partials/paige/image.html +++ b/layouts/partials/paige/image.html @@ -288,4 +288,4 @@ {{ $content = partial "paige/a.html" (dict "content" $content "href" $link "page" $page) }} {{ end }} -{{ $content }} +{{ $content }} diff --git a/layouts/partials/paige/style.html b/layouts/partials/paige/style.html index 0834de38..f848bfce 100644 --- a/layouts/partials/paige/style.html +++ b/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; } diff --git a/layouts/shortcodes/paige/image.html b/layouts/shortcodes/paige/image.html index 6815e7fb..a68c14b2 100644 --- a/layouts/shortcodes/paige/image.html +++ b/layouts/shortcodes/paige/image.html @@ -17,24 +17,26 @@ {{ $title := .Get "title" }} {{ $width := .Get "width" }} -{{ 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 - "page" .Page - "process" $process - "sizes" $sizes - "src" $src - "srcset" $srcset - "style" $style - "title" $title - "width" $width -) }} +
+ {{ 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 + "page" .Page + "process" $process + "sizes" $sizes + "src" $src + "srcset" $srcset + "style" $style + "title" $title + "width" $width + ) }} +