You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
137 lines
3.2 KiB
Markdown
137 lines
3.2 KiB
Markdown
---
|
|
authors: ["will-faught"]
|
|
categories: ["paige", "shortcodes"]
|
|
description: "Demonstration of the Paige image shortcode."
|
|
tags: ["figures", "images"]
|
|
title: "Image Shortcode"
|
|
weight: 40
|
|
---
|
|
|
|
Paige provides a `paige/image` shortcode for displaying an image.
|
|
|
|
<!--more-->
|
|
|
|
## Alt parameter
|
|
|
|
Code:
|
|
|
|
```go-text-template
|
|
{{</* paige/image alt="Landscape" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" */>}}
|
|
```
|
|
|
|
Result:
|
|
|
|
{{< paige/image alt="Landscape" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" >}}
|
|
|
|
## Height parameter
|
|
|
|
Code:
|
|
|
|
```go-text-template
|
|
{{</* paige/image height="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" */>}}
|
|
```
|
|
|
|
Result:
|
|
|
|
{{< paige/image height="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" >}}
|
|
|
|
## Link parameter
|
|
|
|
Code:
|
|
|
|
```go-text-template
|
|
{{</* paige/image link="https://github.com/willfaught/paige" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" */>}}
|
|
```
|
|
|
|
Result:
|
|
|
|
{{< paige/image link="https://github.com/willfaught/paige" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" >}}
|
|
|
|
## Maxheight parameter
|
|
|
|
Code:
|
|
|
|
```go-text-template
|
|
{{</* paige/image maxheight="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" */>}}
|
|
```
|
|
|
|
Result:
|
|
|
|
{{< paige/image maxheight="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" >}}
|
|
|
|
## Maxwidth parameter
|
|
|
|
Code:
|
|
|
|
```go-text-template
|
|
{{</* paige/image maxwidth="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" */>}}
|
|
```
|
|
|
|
Result:
|
|
|
|
{{< paige/image maxwidth="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" >}}
|
|
|
|
## 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" */>}}
|
|
```
|
|
|
|
Result:
|
|
|
|
{{< paige/image link="https://github.com/willfaught/paige" method="resize" options="550x webp picture Lanczos" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" >}}
|
|
|
|
## Src parameter
|
|
|
|
Code:
|
|
|
|
```go-text-template
|
|
{{</* paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" */>}}
|
|
```
|
|
|
|
Result:
|
|
|
|
{{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" >}}
|
|
|
|
## Title parameter
|
|
|
|
Code:
|
|
|
|
```go-text-template
|
|
{{</* paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" title="Landscape" */>}}
|
|
```
|
|
|
|
Result:
|
|
|
|
{{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" title="Landscape" >}}
|
|
|
|
## Width parameter
|
|
|
|
Code:
|
|
|
|
```go-text-template
|
|
{{</* paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" width="50%" */>}}
|
|
```
|
|
|
|
Result:
|
|
|
|
{{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" width="50%" >}}
|
|
|
|
## Figure
|
|
|
|
Code:
|
|
|
|
```go-text-template
|
|
{{</* paige/figure caption="Landscape" */>}}
|
|
{{</* paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" */>}}
|
|
{{</* /paige/figure */>}}
|
|
```
|
|
|
|
Result:
|
|
|
|
{{< paige/figure caption="Landscape" >}}
|
|
{{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" >}}
|
|
{{< /paige/figure >}}
|