Image

The paige-image shortcode displays an image.

Alt parameter

Code:

{{< paige-image alt="Landscape" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}

Result:

Breakpoints parameter

Code:

{{< paige-image breakpoints=true src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}

Result:

Class parameter

Code:

{{< paige-image class="rounded-5" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}

Result:

Densities parameter

Code:

{{< paige-image densities="1x 2x 3x" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}

Result:

Fetchpriority parameter

Code:

{{< paige-image fetchpriority="high" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}

Result:

Height parameter

Code:

{{< paige-image height="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}

Result:

Link parameter

Code:

{{< paige-image link="https://github.com/willfaught/paige" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}

Result:

Linked parameter

Code:

{{< paige-image linked=true src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}

Result:

Code:

{{< paige-image linked="default" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}

Result:

Code:

{{< paige-image linked="r180" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}

Result:

Loading parameter

Code:

{{< paige-image loading="eager" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}

Result:

Maxheight parameter

Code:

{{< paige-image maxheight="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}

Result:

Maxwidth parameter

Code:

{{< paige-image maxwidth="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}

Result:

Process parameter

Code:

{{< paige-image process="default" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}

Result:

Code:

{{< paige-image process="550x lanczos picture resize webp" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}

Result:

Sizes parameter

Code:

{{< paige-image
    sizes="(max-width: 576px) 550px, (max-width: 992px) 936px, 1296px"
    src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}

Result:

Src parameter

Code:

{{< paige-image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}

Result:

Srcset parameter

Code:

{{< 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:

Style parameter

Code:

{{< paige-image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" style="filter: grayscale(100%)" >}}

Result:

Title parameter

Code:

{{< paige-image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" title="Landscape" >}}

Result:

Width parameter

Code:

{{< paige-image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" width="50%" >}}

Result: