diff --git a/exampleSite/content/shortcodes/gallery/index.md b/exampleSite/content/shortcodes/gallery/index.md index 1e0d84a2..6349bd89 100644 --- a/exampleSite/content/shortcodes/gallery/index.md +++ b/exampleSite/content/shortcodes/gallery/index.md @@ -64,6 +64,42 @@ Result: {{< paige/image height="10rem" src="2-2.jpg" >}} {{< /paige/gallery >}} +## Breakpoints parameter + +Code: + +```go-html-template +{{* paige/gallery breakpoints=true images="*-2.jpg" /*/>}} +``` + +Result: + +{{< paige/gallery breakpoints=true images="*-2.jpg" />}} + +## Class parameter + +Code: + +```go-html-template +{{* paige/gallery class="rounded-5" images="*-2.jpg" /*/>}} +``` + +Result: + +{{< paige/gallery class="rounded-5" images="*-2.jpg" />}} + +## Densities parameter + +Code: + +```go-html-template +{{* paige/gallery densities="1x 2x 3x" images="*-2.jpg" /*/>}} +``` + +Result: + +{{< paige/gallery densities="1x 2x 3x" images="*-2.jpg" />}} + ## Fetchpriority parameter Code: @@ -304,6 +340,18 @@ Result: {{< paige/gallery images="*-2.jpg" process="300x300 center crop lanczos picture r180 webp" />}} +## Style parameter + +Code: + +```go-html-template +{{* paige/gallery images="*-2.jpg" style="filter: grayscale(100%)" /*/>}} +``` + +Result: + +{{< paige/gallery images="*-2.jpg" style="filter: grayscale(100%)" />}} + ## Type Code: diff --git a/exampleSite/content/shortcodes/image.md b/exampleSite/content/shortcodes/image.md index d2996362..f16cd72c 100644 --- a/exampleSite/content/shortcodes/image.md +++ b/exampleSite/content/shortcodes/image.md @@ -26,6 +26,22 @@ Result: {{< paige/image alt="Landscape" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
+## Breakpoints parameter + +Code: + +```go-html-template ++{{* paige/image breakpoints=true src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}} +
+``` + +Result: + ++{{< paige/image breakpoints=true src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}} +
+ ## Class parameter Code: @@ -42,6 +58,22 @@ Result: {{< paige/image class="rounded-5" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}} +## Densities parameter + +Code: + +```go-html-template ++{{* paige/image densities="1x 2x 3x" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}} +
+``` + +Result: + ++{{< paige/image densities="1x 2x 3x" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}} +
+ ## Fetchpriority parameter Code: @@ -218,6 +250,26 @@ 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 ++{{* paige/image + sizes="(max-width: 576px) 550px, (max-width: 992px) 936px, 1296px" + src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}} +
+``` + +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: @@ -234,6 +286,43 @@ Result: {{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}} +## Srcset parameter + +Code: + +```go-html-template ++{{* 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" */>}} +
+``` + +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 ++{{* paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" style="filter: grayscale(100%)" */>}} +
+``` + +Result: + ++{{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" style="filter: grayscale(100%)" >}} +
+ ## Title parameter Code: