Image Shortcode
Demonstration of the Paige image shortcode.
Paige provides a paige/image
shortcode for displaying an image.
Alt parameter #
Code:
<p>
{{< paige/image alt="Landscape" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
</p>
Result:
Breakpoints parameter #
Code:
<p>
{{< paige/image breakpoints=true src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
</p>
Result:
Class parameter #
Code:
<p>
{{< paige/image class="rounded-5" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
</p>
Result:
Densities parameter #
Code:
<p>
{{< paige/image densities="1x 2x 3x" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
</p>
Result:
Fetchpriority parameter #
Code:
<p>
{{< paige/image fetchpriority="high" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
</p>
Result:
Height parameter #
Code:
<p>
{{< paige/image height="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
</p>
Result:
Link parameter #
Code:
<p>
{{< paige/image link="https://github.com/willfaught/paige" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
</p>
Result:
Linked parameter #
Code:
<p>
{{< paige/image linked="unprocessed" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
</p>
Result:
Code:
<p>
{{< paige/image linked="default" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
</p>
Result:
Code:
<p>
{{< paige/image linked="r180" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
</p>
Result:
Loading parameter #
Code:
<p>
{{< paige/image loading="eager" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
</p>
Result:
Maxheight parameter #
Code:
<p>
{{< paige/image maxheight="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
</p>
Result:
Maxwidth parameter #
Code:
<p>
{{< paige/image maxwidth="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
</p>
Result:
Process parameter #
Code:
<p>
{{< paige/image process="default" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
</p>
Result:
Code:
<p>
{{< paige/image process="550x lanczos picture resize webp" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
</p>
Result:
Sizes parameter #
Code:
<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:
Src parameter #
Code:
<p>
{{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
</p>
Result:
Srcset parameter #
Code:
<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:
Style parameter #
Code:
<p>
{{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" style="filter: grayscale(100%)" >}}
</p>
Result:
Title parameter #
Code:
<p>
{{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" title="Landscape" >}}
</p>
Result:
Width parameter #
Code:
<p>
{{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" width="50%" >}}
</p>
Result:
Figure #
Code:
{{< paige/figure caption="Landscape" >}}
{{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}}
{{< /paige/figure >}}
Result: