paige-hugo/exampleSite/content/shortcodes/image.md

authors	categories	description	tags	title	weight
will_faught	paige shortcodes	Demonstration of the Paige image shortcode.	figures images	Image Shortcode	40

Paige provides a paige/image shortcode for displaying an image.

Alt parameter

Code:

{{</* paige/image alt="Landscape" src="landscape.webp" */>}}

Result:

{{< paige/image alt="Landscape" src="landscape.webp" >}}

Height parameter

Code:

{{</* paige/image height="10rem" src="landscape.webp" */>}}

Result:

{{< paige/image height="10rem" src="landscape.webp" >}}

Link parameter

Code:

{{</* paige/image link="https://github.com/willfaught/paige" src="landscape.webp" */>}}

Result:

{{< paige/image link="https://github.com/willfaught/paige" src="landscape.webp" >}}

Method and options parameters

Code:

{{</* paige/image link="https://github.com/willfaught/paige" method="resize" options="550x webp picture Lanczos" src="landscape.webp" */>}}

Result:

{{< paige/image link="https://github.com/willfaught/paige" method="resize" options="550x webp picture Lanczos" src="landscape.webp" >}}

Raw parameter

Code:

{{</* paige/image raw=false src="https://picsum.photos/1296/600.webp" */>}}

Result:

{{< paige/image raw=false src="https://picsum.photos/1296/600.webp" >}}

---

Code:

{{</* paige/image raw=true src="https://picsum.photos/1296/600.webp" */>}}

Result:

{{< paige/image raw=true src="https://picsum.photos/1296/600.webp" >}}

Src parameter

Code:

{{</* paige/image src="landscape.webp" */>}}

Result:

{{< paige/image src="landscape.webp" >}}

Title parameter

Code:

{{</* paige/image src="landscape.webp" title="Landscape" */>}}

Result:

{{< paige/image src="landscape.webp" title="Landscape" >}}

Width parameter

Code:

{{</* paige/image src="landscape.webp" width="50%" */>}}

Result:

{{< paige/image src="landscape.webp" width="50%" >}}

Figure

Code:

{{</* paige/figure caption="Landscape" */>}}
{{</* paige/image src="landscape.webp" */>}}
{{</* /paige/figure */>}}

Result:

{{< paige/figure caption="Landscape" >}} {{< paige/image src="landscape.webp" >}} {{< /paige/figure >}}