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

Size landscape pic to max container width

Browse Source
This commit is contained in:
Will Faught
2023-03-16 23:15:46 -07:00
parent 980d9c646f
commit e5371e942e
4 changed files with 31 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
exampleSite/content/shortcodes/image.md
View File

@@ -16,108 +16,108 @@ Paige provides a `paige/image` shortcode for displaying an image.
Code:
```go-text-template
{{</* paige/image alt="Landscape" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" */>}}
{{</* paige/image alt="Landscape" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}}
```
Result:
{{< paige/image alt="Landscape" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" >}}
{{< paige/image alt="Landscape" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
## Height parameter
Code:
```go-text-template
{{</* paige/image height="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" */>}}
{{</* paige/image height="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}}
```
Result:
{{< paige/image height="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" >}}
{{< paige/image height="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
## Link parameter
Code:
```go-text-template
{{</* paige/image link="https://github.com/willfaught/paige" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" */>}}
{{</* paige/image link="https://github.com/willfaught/paige" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}}
```
Result:
{{< paige/image link="https://github.com/willfaught/paige" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" >}}
{{< paige/image link="https://github.com/willfaught/paige" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
## Maxheight parameter
Code:
```go-text-template
{{</* paige/image maxheight="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" */>}}
{{</* paige/image maxheight="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}}
```
Result:
{{< paige/image maxheight="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" >}}
{{< paige/image maxheight="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
## Maxwidth parameter
Code:
```go-text-template
{{</* paige/image maxwidth="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" */>}}
{{</* paige/image maxwidth="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}}
```
Result:
{{< paige/image maxwidth="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" >}}
{{< paige/image maxwidth="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
## Method and options parameters
Code:
```go-text-template
{{</* paige/image link="https://github.com/willfaught/paige" method="resize" options="550x webp picture Lanczos" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" */>}}
{{</* paige/image link="https://github.com/willfaught/paige" method="resize" options="550x webp picture Lanczos" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}}
```
Result:
{{< paige/image link="https://github.com/willfaught/paige" method="resize" options="550x webp picture Lanczos" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" >}}
{{< paige/image link="https://github.com/willfaught/paige" method="resize" options="550x webp picture Lanczos" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
## Src parameter
Code:
```go-text-template
{{</* paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" */>}}
{{</* paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}}
```
Result:
{{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" >}}
{{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
## Title parameter
Code:
```go-text-template
{{</* paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" title="Landscape" */>}}
{{</* paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" title="Landscape" */>}}
```
Result:
{{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" title="Landscape" >}}
{{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" title="Landscape" >}}
## Width parameter
Code:
```go-text-template
{{</* paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" width="50%" */>}}
{{</* paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" width="50%" */>}}
```
Result:
{{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" width="50%" >}}
{{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" width="50%" >}}
## Figure
@@ -125,12 +125,12 @@ Code:
```go-text-template
{{</* paige/figure caption="Landscape" */>}}
{{</* paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" */>}}
{{</* paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" */>}}
{{</* /paige/figure */>}}
```
Result:
{{< paige/figure caption="Landscape" >}}
{{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" >}}
{{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
{{< /paige/figure >}}