Images

Add a small or large image with a Hyas shortcode. Images are lazyloaded, blurred up, and responsive.

..
├── blog/
│   ├── say-hello-to-hyas/
│   │   ├── index.md
│   │   └── say-hello-to-hyas.png
│   └── _index.md
└── _index.md

See also the Hugo docs: Page Bundles

Add a small image

Using img, src, and data-src.

Add a small image in your page bundle to your page using shortcode img-simple.

Example

{{< img-simple src="square.png" alt="Square" class="border-0 rounded-circle" >}}

Will be processed into:

Square

Add a large image

Using figure and figcaption with img, src, and data-srcset. With noscript fallback.

Add a large image in your page bundle to your page using shortcode img.

Example

{{< img src="rectangle.png" alt="Rectangle" caption="<em>Rectangle</em>" class="border-0" >}}

Will be processed into:

Rectangle
Rectangle

Edit this page on GitHub