Rockingcool
/
paige-hugo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change image shortcode to use div

Browse Source
master
Will Faught 1 year ago
parent fedcac0f3e
commit 46afb013bc
4 changed files with 24 additions and 110 deletions
Show Stats Download Patch File Download Diff File

84
exampleSite/content/shortcodes/image.md
Unescape Escape View File

@ -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

2
layouts/partials/paige/image.html
Unescape Escape View File

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

4
layouts/partials/paige/style.html
Unescape Escape View File

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

44
layouts/shortcodes/paige/image.html
Unescape Escape View File

@ -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
) }}
<div class="paige-image">
{{ 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
) }}
</div>

Write Preview
Loading…
Cancel
Save