5. Add Images

Add a small or large image with a Doks shortcode (add extra classes), or use markdown (portability). Images are lazyloaded, blurred up, and responsive.

Place your images in a page bundle, like so:

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

See also the Hugo docs: Page Bundles

Markdown#

Add an image#

An <img> element is used for small images, a <figure> element for large images. Set smallLimit in ./config/_default/params.toml, e.g. smallLimit = "360".

Example#

![Image](day-and-night-escher.jpg "Day and Night, 1938 — M.C. Escher")

Will be processed into:

See also the Markdown Guide: Images

Shortcodes#

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:

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:

Edit this page on GitHub